Page 1 of 1
Auto fit to screen
Posted: Tue Dec 27, 2011 1:14 pm
by DisturbedGoW
Hello everyone,
this is the first time I am encountering my self with this problem, I have created a Template with photoshop and everithing works fine so far, the only problem I am coming across is the fact that I can´t manage to get the page to auto center it´s self to the screen. I have tried giving the objects % values but that moves them from they´re place, even tho I give them an absolute or fixed value.
Thomasrick.de/clinica is the page I am talking about, has anybody got any ideas? I am not looking to get the objects to auto size them selfs, that would be too much hastle, all I need is for it to adjust to the center on every screen resolution!
If anybody has an idea or needs to source code, I will gladly forward it!
Greetings,
Dist
Re: Auto fit to screen
Posted: Thu Dec 29, 2011 9:56 am
by DisturbedGoW
Code: Select all
body {
margin: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align: left;
font-size: medium;
}
/* This is a wrapper for the _center2 layer you made */
#Layer-1-wrapper {
position: absolute;
width: 100%;
height: 100%
margin: auto;
}
/* You named this layer _center2 */
#Layer-1 {
position: absolute;
left: +0px;
top: +0px;
width: 100%;
height: 100%;
z-index: 1;
}
/* You named this layer bg */
#Layer-2 {
position: fixed;
left: 0px;
top: 0px;
width: 100%
height: 100%;
z-index: 2;
margin-left: auto;
margin-right: auto;
}
/* You named this layer logo_gif */
#Layer-3 {
position: absolute;
left: 351px;
top: 0px;
width: 544px;
height: 101px;
z-index: 3;
}
/* You named this layer bgshape_gif */
#Layer-4 {
position: absolute;
left: 144px;
top: 89px;
width: 991px;
height: 818px;
z-index: 4;
margin-left: auto;
margin-right: auto;
}
/* You named this layer Shape 1 */
#Layer-5 {
position: absolute;
left: 201px;
top: 18px;
width: 4px;
height: 778px;
z-index: 5;
}
/* You named this layer User2_joomla */
#Layer-6 {
position: absolute;
left: 1002px;
top: 1px;
width: 226px;
height: 27px;
z-index: 6;
}
/* You named this layer content_joomla */
#Layer-7 {
position: absolute;
left: 204px;
top: 304px;
width: 574px;
height: 473px;
z-index: 7;
overflow: auto;
}
/* You named this layer User1_joomla */
#Layer-8 {
position: absolute;
left: 202px;
top: 19px;
width: 574px;
height: 287px;
z-index: 8;
}
#wraper{
margin-left: auto;
margin-right: auto;
}
/* You named this layer left_joomla */
#Layer-9 {
position: absolute;
left: 20px;
top: 26px;
width: 183px;
height: 280px;
z-index: 9;
}
I have tried adding the #Wrapper, and adding it to the body tags, so far still no slution... All I need is for it to center in the middle of every web!
Re: Auto fit to screen
Posted: Thu Dec 29, 2011 12:59 pm
by DisturbedGoW
Nobody?
Re: Auto fit to screen
Posted: Mon Jan 02, 2012 2:28 am
by inmate1807
It looks ok...
Try - position: centered;
Re: Auto fit to screen
Posted: Mon Jan 02, 2012 2:38 am
by RussW
try setting two values in your margin..
to centre it horiz and have no margin top and bottom
or
to make it center vert & horiz
Re: Auto fit to screen
Posted: Mon Jan 02, 2012 1:31 pm
by DisturbedGoW
Both sound plausible, but don´t work for me, I might be adding it to the wrong item tho, where should I paste that code?
Re: Auto fit to screen
Posted: Wed Jan 11, 2012 12:31 pm
by DisturbedGoW
Almost two weeks and nobody has come up with a solution?
That is a shame...
Re: Auto fit to screen
Posted: Wed Jan 11, 2012 2:06 pm
by jack76
This should Work. You can't do a margin auto for a div with position absolute and width 100% because there is no more space.
Code: Select all
/* This is a wrapper for the _center2 layer you made */
#Layer-1-wrapper {
position: relative;
width: WIDTH IN PX; /* Set this to the width of your background image and you should be fine */
height: 100%
margin: 0 auto;
}