css side & head repeat ?
- Started
- Last post
- 13 Responses
- xrusos
can you help me repeat the sidebar and the header along the entire length of the page?
i currently have a body bg img repeating x. but the sidebar stops at the length of sidebar content - as sidebar height defaults to auto, but it is repeating y.
http://aspswebgold.com/_t12/indeā¦
any help?
- welded0
By length do you meant height and not width?
height: 100%; works in most browsers (that is to say not IE). Alternatively you could probably use javascript to find the height of the view port and/or the height of the content and set the height of the sidebar appropriately. Know what I mean?
- heavyt0
yeah, CSS doesnt really respond to 100%. it uses th econtent to set the height.
The trick is to use a BG image that makes them appear to extend the whole page.
there is an article on alistapart about this. take a quick peek at it.
TR1
- xrusos0
i know about the bg column trick that appears to go 100% of the height, but i want it both ways... i want one background to repeat-x and another to repeat-y. i set the body to repeat-x for the header, but now i need the sidebar to fill in. don't know how yet... i'd prefer to stay away from js.
- heavyt0
interesting...i would think that you could use the HTML for 1 property and BODY for the other. That may work.
otherwise, i supppose that the vertical could be the body and header could be another div with a defined width.
got me thinking now....
TR1
- heavyt0
honestly, lookign at it again, i would go with the scripts.
Seems like getting the CSS to work might be more trouble than it is worth.
you can write a jscript function in about 5 lines that will take care of it.TR1
- nRIK0
height: 100% for a div seems to work in IE, but not in Firefox when the content becomes more than the view area... which is wierd
i'd say do what heavyt said:
" otherwise, i supppose that the vertical could be the body and header could be another div with a defined width. "
- keiTai0
Maybe this will help you http://www.alistapart.com
- keiTai0
Maybe this will help you http://www.alistapart.com
- keiTai0
Maybe this will help you http://www.alistapart.com
- keiTai0
oops sorry
- welded0
Remember that you can use absolutly positioned divs anywhere on the page as long as they have a lower z-index of the content, either hard coded or by inheritance.
- heavyt0
re:welded;
that is cool, but it wont change the vertical space.
I really think that the javascript solution is the answer.
I think that it is pretty well determined that CSS layouts have limitations when it comes to DIV heights.
basically, they are as big as you tell them to be, or as big as the content requires.
'life's a b!tch sometimes"TR1
- welded0
No, absolutely positioned stuff isn't the solution in of itself, but what I mean is that it's not necessary to apply styles to the html tag (is it even technically allowed?). In conjunction with a small bit of javascript it should all work out.
I haven't yet read up on it, but I understand that CSS3 should bring much improvement to many typical layout issues. That is to say in five years when all browsers fully support it...