- This topic is empty.
-
AuthorPosts
-
December 29, 2011 at 3:17 pm #35884jmeyer0911Member
Hi…
I have a problem with my css…
I am using a jquery type navigation, which looks like this (HTML CODE):
Welcome!
Current Listings!
Commercial Listings
Find your perfect spot!
Rental Listings
Helpful Guides
Interested?
Meet Us!
Love to hear from you!
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 #93683noahgelmanParticipantZ-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 #93733jmeyer0911MemberI 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 #93734TheDocMemberYou 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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.