...

View Full Version : help required with Class="selected" on nav bar



jarv
10-30-2009, 03:44 PM
hi, on my site: http://vila.slicedcreative.co.uk/gallery.html
I have added a new class "Selected" to the Gallery button but it is all out of place and now has a new hover style on it which moves it down?!
please can someone help me?

html


<div id="navbar">
<ul id="menu">
<li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
<li><span></span><a href="#" title="The Area">The Area</a></li>
<li><span></span><a href="#" title="The Property">The Property</a></li>
<li class="selected"><span></span><a href="gallery.html" title="Gallery">Gallery</a></li>
<li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
<li><span></span><a href="#" title="Availability & Prices">Availability & Prices</a></li>
</ul>
<img src="/images/right_side_nav.png" alt="right side nav" class="nav_end" />
</div>


css


/** Menu **/
#navbar {
padding-left: 21px;
background-image: url(/images/left_side_nav.png);
background-repeat: no-repeat;
height:55px;
position: absolute;
top:54px;
left:220px;
width:689px;
}
.nav_end {
width: 21px;
height: 55px;
float: left;
}
ul#menu {
position:relative;
}
#menu li {
height: 55px;
float: left;
background-image: url(/images/1px_nav.png);
background-repeat: repeat-x;
display:block;
line-height: 52px;
}
#menu .selected {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}
#menu a:link,
#menu a:visited,
#menu a:active {
height: 55px;
padding: 2px 16px 0;
display: block;
font-weight: bold;
font-size: 13px;
color: #264a81;
text-decoration: none;
}
#menu a:hover {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}
#menu span{
background-image: url(/images/nav_divider.jpg);
height: 37px;
width:2px;
float:left;
margin-top: 9px;
position:absolute;
}

Excavator
10-30-2009, 03:53 PM
Hello jarv,
Your hover effect is still there, .selected doesn't shut it off.
When you apply .selected to your li, it makes the button look selected. Then, when you hover on your link, the background shows up a second time.

Works much better if you do it this way
<div id="navbar">
<ul id="menu">
<li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
<li><span></span><a href="#" title="The Area">The Area</a></li>
<li><span></span><a href="#" title="The Property">The Property</a></li>
<li><span></span><a href="gallery.html" title="Gallery" class="selected">Gallery</a></li>
<li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
<li><span></span><a href="#" title="Availability &amp; Prices">Availability &amp; Prices</a></li>
</ul>

SB65
10-30-2009, 04:02 PM
I was going to suggest that:


#menu .selected {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}

should be:


#menu .selected a {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}

which is another way of saying the same thing...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum