Jump to content

Recommended Posts

Posted (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 by capnhud
Posted (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 by capnhud
Posted

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.

Posted (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 by newseed
Posted

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?

Posted (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 by Wickham
Posted
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.

Posted

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.

Posted (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 by Wickham

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...