Forum Moderators: not2easy
I'm really new to CSS, just moved away from tables. I'm trying to make a bar down the side of a page which is 48px wide, and the same height as the page (not the screen). Here's the code I'm using for it:
<span style="position: absolute; left: 0; top: 0; background-image: url('images/back_metal_only.jpg'); background-repeat: repeat-y; width: 48; height: 100%; z-index: 2">
</span>I've briefly searched through this forum, and a few posts dealt with similar things to this but didn't seem to work for me. Could anyone help me? I've also tried making a table 100% high (which works in the existing table-based layout of my site) but that doesn't work either.
Thanks in advance for any help :)
-Kaeroll
To make it work in IE you should also add:
body, html{height: 100%;}
=> books were written on this forum about this ;-)
I would also replace the span with a div.
Definitely. A
span
Thanks a lot :-)
>> To make it work in IE you should also add:
>> body, html{height: 100%;}
To do that I added this:
html { height: 100% }
body { height: 100%; }
...to the style thingy (don't know the correct term, sorry) in the <head> tags... also I made it into a <div> rather than a <span>
I've searched here a bit more and tried several of the solutions offered; none seem to work for me. The very long 3-column solution/tutorial I had a go at but I probably did wrong, as it doesn't work. I've also tried using a table rather than a <div>.
Any help or am I too thick for this malarky?
-Kaeroll
no.. not too thick, maybe just trying to run before learning to walk ;)
this has been one of the holy grails of CSS for the last few years.. and there are varying different ways of simulating this effect. Now in CSS2.1 compliant browsers it is possible. I only learned exactly how during the last few weeks.. it involves knowing your CSS-P and inheritance rules and is sort of garbly explained here - msg#24 onwards [webmasterworld.com] with an example layout here - msg#20 [webmasterworld.com]. Now I admit that may be a bit complicated, heck even I have trouble understanding my own explanation ;) but it's becoming clearer..
Now having said all that for your purposes I think one of the simulation techniques may do?
if you take that absolutely position div you are trying to stretch and remove the background image from it and stop trying to give it height.
now give your content area element (body or container div?) the background image instead and give it left padding of 48px (or more) so the actual content clears the left side of the page by the amount you want.
now if you need the absolutely positioned for content then leave it transparent and leave it's co-ordinates so it's actually overlaying the content area...
does that work?
Suzy
The page has three background images really - one is this bar, then a 'header' image of sorts that blends into the page background. I was going to use tables but the actual content was about 350+ pixels from the top of the page and it looked awful. So when I've tried your suggestion, the bar works fine, but the main background does what the bar was doing, i.e. stretching 100% of the screen as opposed to the page. :-(
( you can do this with the body element in most cases, but probably best to work with a containing div as you can then see quite clearly what is happening... and until the different browsers sort out their definition of "root element", it's easier to give your page a distinct one.. and it won't do any harm! in fact once it's coded in you can use for different design reasons as your knowledge grows ;) )
You can now control the width (if desired), padding/margins etc of the container. And much easier, your header, inside the container, would then be controlled by the width of the the container as opposed the screen size (body).
Suzy
Note: container = container or wrapper div
