Page 1 of 1
[Solved]tricky layout (help with css)
Posted: Wed Jun 20, 2012 5:41 pm
by Recon
Hi,
My basic background layout is this:
"
http://w...
Cloud background with jquery full screen supersizer.
How can I get that green line start from the left side of the screen and cut it to content. Green line must be stretchable, so it will be on the left side every browser's resolutions.
Here is beginnig of my work.
"
http://w...
Best
-R
Re: tricky layout (help with css)
Posted: Wed Jun 20, 2012 7:36 pm
by Dr.CSS
You will have to break the line div out of the rest of the divs then use a % to stop it on the right...
Re: tricky layout (help with css)
Posted: Thu Jun 21, 2012 3:52 am
by Recon
If using margin-right: % it will not stay in correct place when zooming in or out.
-R
Re: tricky layout (help with css)
Posted: Sun Jun 24, 2012 5:55 pm
by Recon
Tips for this, please.
-R
Re: tricky layout (help with css)
Posted: Tue Jun 26, 2012 10:03 am
by Zoorlat
First of all, to ensure liquid layout ("zooming in and out") use em instead of px when you specify the size of your objects.
To get the green line in place, I'd place the div for this line inside the middle-div. This way you have a common right side edge to relate to. Eg:
Code: Select all
<div id="realBody">
<div id="top"></div>
<div id="middle">
<div id="line"></div>
<div id="content"><p>Content</p></div>
</div>
<div id="bottom"></div>
</div>
Then you can specify the right-margin of the line-div to be the same (in em's) as the black border. Give the left-margin a very high
negative and it will expand to the left edge of the window.
Eg:
Code: Select all
#line{
background: url(http://whm10.louhi.net/~vvpakki2/uploads/css/greenline.png) repeat-x center center;
height:7em;
margin-right:10.5em;
margin-left:-100em;
}
Assuming you have modified your other margins, paddings and heights to em, this gives the result you asked for.
Good luck!
Z
Re: tricky layout (help with css)
Posted: Tue Jun 26, 2012 10:57 am
by Recon
Thank you Zoorlat,
seems that it works very well... also on different browsers.
Thank you.
-R