PDA

Click to See Complete Forum and Search --> : CSS: making an element automatically span the window horizontally or vertically


shellebelle
01-04-2006, 07:58 AM
I'm stumbling through a web design for a family member (ugh). I'd like the header to span the entire width of the window and I'd like the left hand column to go down the entire height of the page, but can't figure out how.

The header and left column elements have some shading to them, so they're made up of repeating image files. They're both in their own div tags, too. I also have an image that I want to put at the right and bottom, respectively. Is there a way to do this without making up an oversized image and thus having scrollbars? There will likely be a huge variation in the monitor resolutions of the browsers visiting this website.

I've tried searching and digging through the archives, but I can't find anything. I can't seem to come up with a good search query, either.

EC
01-04-2006, 08:25 AM
If I'm understanding your question correctly -- in the header and left column, have you set your background images to repeat-x and repeat-y (depending on direction of course)?

You may need to use z-index too, depending on the effect you're trying to achieve.

Not sure what you mean by having an image on the right and bottom. If you've got a huge variation in monitor/browser settings, I'd stick to a liquid orientation (personal opinion of course).

It can get tricky to add too many fixed-width images to any design that has to please all of the people all of the time. Guess I'd have to see a little more -- have anything you can show at this point? Even "code so far"?

shellebelle
01-04-2006, 05:03 PM
Here's a screenshot of where I am ATM (and please don't critique its awfulness--I loathe web design and I was bamboozled into doing this one!). I noticed that it works perfectly in Firefox, but so many people use IE that I have to use its quirks as my guide.

http://img270.imageshack.us/my.php?image=screenshot4rv.gif

Basically, I want it to look like this (this is from Firefox). The graphic at the bottom of the left hand side is just there to force the column down, if that's not needed away she goes.

http://img270.imageshack.us/my.php?image=screenshotgood6zz.gif

And while I'm at it, how can I get images to show up in my posts?

Ryan8720
01-04-2006, 09:40 PM
#header {
width: 100%;
z-index: 1;
}

#nav {
min-height: 100%;
z-index: 1;
}

* html #nav {
height: 100%; /* Fixes IE */
}

Then make that logo a separate div with higher z-index.

#logo {
width: ?;
height: ?;
position: absolute;
top: 0;
left: 0;
z-index: 50;
}