CSS challenge...
- Started
- Last post
- 11 Responses
- xrusos
i'm looking to extend a horizontal stripe along the top as well as a sidebar all the way to the bottom (even on short pages).
what's your strategy for this?
examples?normally, you could pick the horizonal element or the vertical element and just make a background img for the body repeat x or y (respectively). But not both (without tiling).
Any thoughts?
- ganon0
read dis...:
- welded0
Ya, use a div for the footer and you can then tile the vertical element in the background, if that works for you. A div for this would also work, if you wanted to go that route.
- gabriel_pc0
I would tile the vertical stripe as a background image in the body, then create the top stripe by using a div to span the page and have the horiz stripe be it's background.
- xrusos0
gabriel: yes, but then it gets cut at the width of the container (let's say 760px).
i want the green and white of the top area to extend to the right, while the green of the sidebar to extend all the way down.
maybe ALA's http://www.alistapart.com/d/foot… will work. Have to think it through. the footer isn't my focus, but if it forces the sidebar to fill in, it could work.
- gabriel_pc0
could you have the green horizontal bar be positioned absolutely? that would allow it to scale to the size of the page without affecting the other content.
- xrusos0
ooo, that could work. how would you work it so it wouldn't be cut off at 760px? and stay the width of the browser?
width: 100%
so i would make a container div be width 100% (with background color/img horizontal bar), and then a container div within that that is width of 760px?
with the body background img of the sidebar repeat-y?
- welded0
All you need to do is the following:
- tile the vertical band in the body
- absolutely position the horizontal band 100% with a z-index of 1
The div containing all of your content should just settle to the top-left naturally, but make sure it has a z-index of 2. You may have to position it absolutely as well to make sure it shows up on top of the horizontal band, but probably not.
- gabriel_pc0
yeah, what welded said....
- versa0
i have also played with using one of the h1, h2, etc elements as a horizontal band before....a bit of a hack, but those elements inherently will extend 100% of the page if told to do so, and you can give them set heights, bgd colors, etc........
- ********0
css -
yeah :)
- xrusos0
mikotondria - i hope you typed the css somewhere else, cause NT didn't display it. consider posting a link instead.
thanks for all your help guys!