Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    help required with Class="selected" on nav bar

    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
    Code:
    <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
    Code:
    /** 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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I was going to suggest that:

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

    Code:
    #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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •