Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Nav Menu

    ,
  • being read in entire site

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 29, 2011 at 3:17 pm #35884
    jmeyer0911
    Member

    Hi…
    I have a problem with my css…
    I am using a jquery type navigation, which looks like this (HTML CODE):

    My CSS looks like this (This is a separate css from my site css (and I have everything in order)):


    
ul
    
{
    
margin: 0;
    
padding: 0;
    
z-index: 999;
    
}
    

    
li
    
{
    
width: 100px;
    
height: 50px;
    
float: left;
    
color: #191919;
    
text-align: center;
    
overflow: hidden;
    
z-index: 999;
    
}
    

    
a
    
{
    
color: #FFF;
    
text-decoration: none;
    
z-index: 999;
    
}
    

    
p
    
{
    
padding: 0px 5px;
    
z-index: 999;
    
}
    

    
.subtext
    
{
    
padding-top: 15px;
    
z-index: 999;
    
}
    

    
/*Menu Color Classes*/
    
.home
    
{
    
background: #6AA63B url('Images/home.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.residential
    
{
    
background: #FBC700 url('Images/residential.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.commercial
    
{
    
background: #D52100 url('Images/commercial.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.lotsland
    
{
    
background: #5122B4 url('Images/lotsland.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.rentals
    
{
    
background: #0292C0 url('Images/rentals.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.referencecenter
    
{
    
background: #0292C0 url('Images/references.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.onlineinquiry
    
{
    
background: #0292C0 url('Images/inquiry.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.aboutus
    
{
    
background: #0292C0 url('Images/about.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.searchproperties
    
{
    
background: #0292C0 url('Images/searchProp.jpg') top left no-repeat;
    
z-index: 999;
    
}
    
.contactus
    
{
    
background: #0292C0 url('Images/contact.jpg') top left no-repeat;
    
z-index: 999;
    
}

    This is my div.nav code in my Site.css


    
div.nav
    
{
    
background-color: #959241;
    
height: 51px;
    
margin-left: 1px;
    
position: relative;
    
z-index: 999;
    
overflow: hidden;
    
text-align: center;
    
}
    

    
div.content
    
{
    
background-color: #d7e9d1;
    
overflow: hidden;
    
position: relative;
    
margin-left: 1px;
    
padding-bottom: 4px;
    
padding-left: 4px;
    
}

    Problem 1 – When you mouse over the nav…it drops to show facts…but, it is going behind my div.content div…I put a z-index on the nav…but it constantly goes behind the content div.

    Problem 2 – all of my ul and li are (the parts that have nothing to do with the nav) is reading the the jquery animation.css…I know i’m doing something wrong. Here is what is in my html head section:

    Any help would be great

    December 29, 2011 at 9:10 pm #93683
    noahgelman
    Participant

    Z-index does not apply to elements that are positioned static. Your elements are going under the content div because the content div is after the hovered element in the DOM.

    Just add position:relative; to the css for the elements you want to appear over the content div.

    As for the second issue, I have no idea what the problem is unless I see a link to the page in question. It could be a dozen different things.

    December 30, 2011 at 2:20 pm #93733
    jmeyer0911
    Member

    I put the postion: relative; to the items:


    
/*Menu Color Classes*/
    
.home
    
{
    
background: #6AA63B url('Images/home.jpg') top left no-repeat;
    
position: relative;
    
}
    
.residential
    
{
    
background: #FBC700 url('Images/residential.jpg') top left no-repeat;
    
position: relative;
    
}
    
.commercial
    
{
    
background: #D52100 url('Images/commercial.jpg') top left no-repeat;
    
position: relative;
    
}
    
.lotsland
    
{
    
background: #5122B4 url('Images/lotsland.jpg') top left no-repeat;
    
position: relative;
    
}
    
.rentals
    
{
    
background: #0292C0 url('Images/rentals.jpg') top left no-repeat;
    
position: relative;
    
}
    
.referencecenter
    
{
    
background: #0292C0 url('Images/references.jpg') top left no-repeat;
    
position: relative;
    
}
    
.onlineinquiry
    
{
    
background: #0292C0 url('Images/inquiry.jpg') top left no-repeat;
    
position: relative;
    
}
    
.aboutus
    
{
    
background: #0292C0 url('Images/about.jpg') top left no-repeat;
    
position: relative;
    
}
    
.searchproperties
    
{
    
background: #0292C0 url('Images/searchProp.jpg') top left no-repeat;
    
position: relative;
    
}
    
.contactus
    
{
    
background: #0292C0 url('Images/contact.jpg') top left no-repeat;
    
position: relative;
    
}

    This is the navs…but it is still going behind the content div

    December 30, 2011 at 2:33 pm #93734
    TheDoc
    Member

    You need to add position relative if you’re going to use z-index. You’ve replaced the z-index instead of adding to it.

    Should be:

    .home
    
{
    
background: #6AA63B url('Images/home.jpg') top left no-repeat;
    
position: relative;
    
z-index: 100;
    
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.