CSS - Tricky Nav??

I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to.

I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit.

I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images.

This diagram describes what I'm trying to do:

+----------------------------------------+
|........................................|
|..Fixed height header image.............|...Content
|........................................|...text
+----------------------------------------+...to
|........................................|...overlay
|........................................|...all
|..Expanding region (solid fill color)...|...three
|........................................|...regions
|........................................|...with
+----------------------------------------+...the
|........................................|...center
|..Fixed height footer image.............|...region
|........................................|...expanding
+----------------------------------------+


This is what I'm doing in my html:

Code:

<div class="contentArea">
     <div class="contentTop"></div>
     <div class="contentStretch"></div>
     <div class="contentBottom"></div>
     <div class="main-page-content">
         My Content Here
     </div> 
</div>

This is in my style sheet:

.contentArea{
border: none;
height:auto;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


.contentTop {
background: url('../images/contentTop.jpg') no-repeat left center;
border: none;
height: 276px;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}

.main-page-content{
border: none;
line-height: 100%;
padding: 0px;
width: 515px;
height: auto;
position:relative;
left:265px;
top:-610px;
}


.contentBottom {
background: url('../images/contentBottom.jpg') no-repeat left center;
border: none;
height: 317px;
line-height: 100%;
padding: 0px;
width: 785px;
vertical-align:bottom;
}

.contentStretch {
background: url('../images/StretchPic.jpg') repeat-y left center;
border: none;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave!

I've been at this for days and I'm at the point where I need help! Any suggestions?

Ron

FAQ what's having issues...

Hi!

I have an FAQ page that consists of a series of answer <ul>s nested under question <li>s. A little javascript shows the active answers alongside the question. The questions are supposed to align vertically with the answers and with a constant margin.

Using relatively positioned parent li's and absolutely positioned child uls is doing the trick for all but ie 6-7, which are not respecting the left:400px declaration in a predictable (to me, at least) way. The answers are floating right and left based upon the width of the question.

Any help would be greatly appreciated!

Thanks..

I have a menu that needs to be pixel perfect.
It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far.

It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning.

eg
li#main-nav-3 a:hover{ width:83px; background position:-227px 0;}
...
<li id="main-nav-3"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...

on rollover:

...
<li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...


I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't.

Anyone else faced a similar problem?

Link to the problem page:
http:sidouglas.net/cmx/tourism/
The rollovers are : Business a nd About NZ.

this is really for a counter strike source server MOTD (which lets you use HTML/CSS)

First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+)

unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions.

so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing....

Can this be done or will I just have the face the music?

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.