954,180 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Fixed Foot Nav Bar

Wracking my brain! I've got a fixed footer nav bar and want it to be tucked behind a small logo image on each end. I've edited the CSS so many times that I can't remember what I started with, but the problem seems to be z-index related. If container is set a -1 then the links do not work, but if the navbar is z-index higher then it covers the images. Please suggest best way to get navbar on top, with its container beneath, and bookend images. Thanks for help.

This is how I want it to look, but need to get the links working:

Cruise Ship CLIPACLIPA LogoHome Membership Club Events Message Board Cruise Reviews Marketplace Clothing etc etc etc What to Expect Links Advertise With Us Contact Us


CSS:

#fixedfoot_container{
position:fixed;
bottom:0px;
top:auto;
z-index:10;
width: 100%;
float: left;
}
#fixedfoot_content {
width: 95%;
height: 100px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
z-index: 7;
}
#fxfootL {
float: left;
height: auto;
width: auto;
z-index: 5;
}
#fxfootR {
height: auto;
width: auto;
float: right;
z-index: 5;
}
#fxfootC {
height: auto;
width: 85%;
float: left;
margin: 0px auto 0px 91px;
position: absolute;
bottom: 0px;
background: #102F8C;
left: 4px;
font-weight: bold;
color: #FFF;
z-index: -1;
padding-right: 20px;
padding-left: 20px;
}
#navff{
width: 92%;
height: 40px;
margin-right: auto;
margin-left: auto;
font: 0.8em;
color: #F0F;
background: #102F8C;
padding-right: 20px;
padding-left: 20px;
position: absolute;
bottom: 0px;
left: 1px;
z-index: 2;
}
#navff ul
{ margin: 0px; padding: 0px;}
#navff ul li
{
display:inline;
height:20px;
float:left;
list-style:none;
margin-left: 1px;
position: relative;
}
#navff li a
{
color: #FFF;
text-decoration: none;
font-weight: bold;
padding: 2px 10px 3px 15px;
}
#navff li a:hover
{background: #C00; }
#navff li ul
{
margin:0px;
padding:0px;
display:none;
position: absolute;
left: 0px;
background: #102F8C;
bottom: 21px;
}
#navff li:hover ul
{display:block;
width:175px;
}
#navff li li
{list-style:none;
display:list-item;
}
#navff li li a
{color:#fff; text-decoration:none;}
#navff li li a:hover
{
text-decoration:none;
background: #C00;
}

powersstuff
Newbie Poster
20 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: