Keep Navigation above content underneath

[capnhud]

I am trying to I trying position a series of div's inside of a single div with the biggest div being centered with the other smaller one surround the bigger div. The only result I keep getting is that the divs do not even want to line up. Is is possible for someone to point out the possible error. This is the demonstration page

 

Ok i think I got this part figured out and I have changed the question to reflect the fact that the navigation goes underneath the headline content. How do I stop that?

Edited May 19, 2009 by capnhud

[capnhud]

I think I have did a better job of positioning, but the right side seems to be underneath the main headline part. Doesn't the selector left mean from the edge of the content?

Ok with some more tweaking this is coming together.

 

 

How can I make the navigation stay on top of the headline content?

Edited May 19, 2009 by capnhud

[Wickham]

You can make the center div overlap the right div by adding a z-index:-

 

#headcontainer { z-index: 5;

background:transparent url(images/headshadow.png) no-repeat

scroll center top;

width: 588px;

height:358px;

position:relative;

left:182px;

padding-top:1px;

}

 

This is just a quick fix which worked for me in IE7, but I expect that there is a better method.

[newseed]

Add z-index: 100; to all your subhor-?items classes and z-index: 1; to #headlinewrapper.

 

Also, I noticed that the gallery was not displaying via IE but is working in FX.

Edited May 19, 2009 by newseed

[capnhud]

Using the z-index solved the problem on the subhorlist and container.

[capnhud]

Why is when I change

#nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover {

background:#777777 none repeat scroll 0 0;

color:#EEEEEE;

}

 

to

 

background:url(sub_ver.png)repeat scroll 0 0;

 

the navigation takes on another look?

[Wickham]

http://capnhud.googlepages.com/sub_ver.png is not found, so probably not uploaded to the host server's root folder.

 

Edit:

Your drop down menu now works properly in Firefox by coming down on top of the lower images, but is still hidden in my IE7.

Adding a z-index here solved it:-

#nav ul, #nav ul ul li {z-index:100;

margin:0;

padding:0;

position:relative;

}

Edited May 20, 2009 by Wickham

[capnhud]

Your drop down menu now works properly in Firefox by coming down on top of the lower images, but is still hidden in my IE7.

Adding a z-index here solved it:-

#nav ul, #nav ul ul li {z-index:100;

margin:0;

padding:0;

position:relative;

}

 

I did not put one there initially because I thought z-index had to be positioned absolutely. Thanks for catching that. The squirrely look that I was refererring to uses the image sub_ver_bg.png I mistyped yesterday.

[Wickham]

If you look at your page as it is now in IE7 the right gray border of #headcontainer doesn't show over the right image, but it does on the left side.

 

Add z-index: 5; on #headcontainer like I said before.

[capnhud]

Add z-index: 5; on #headcontainer like I said before.

 

Do you mean header?

[Wickham]

#headcontainer { z-index: 5; /*needed for right gray border of div*/

background:transparent url(headshadow.png) no-repeat scroll center top;

height:358px;

left:186px;

padding-top:1px;

position:relative;

width:588px;

}

Edited May 20, 2009 by Wickham

[capnhud]

in my head I thought had labeled that headlinecontainer. So I did not realize what you were talking about. Ok the changes were made.