capnhud Posted May 19, 2009 Report Share Posted May 19, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 19, 2009 Author Report Share Posted May 19, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 19, 2009 Report Share Posted May 19, 2009 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. Quote Link to comment Share on other sites More sharing options...
newseed Posted May 19, 2009 Report Share Posted May 19, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 19, 2009 Author Report Share Posted May 19, 2009 Using the z-index solved the problem on the subhorlist and container. Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 19, 2009 Author Report Share Posted May 19, 2009 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 20, 2009 Report Share Posted May 20, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 20, 2009 Author Report Share Posted May 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 20, 2009 Report Share Posted May 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 20, 2009 Author Report Share Posted May 20, 2009 Add z-index: 5; on #headcontainer like I said before. Do you mean header? Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 20, 2009 Report Share Posted May 20, 2009 (edited) #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 Quote Link to comment Share on other sites More sharing options...
capnhud Posted May 20, 2009 Author Report Share Posted May 20, 2009 in my head I thought had labeled that headlinecontainer. So I did not realize what you were talking about. Ok the changes were made. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.