Help with navigation bar links rollover

1 reply [Last post]

Tue, 2010-02-16 18:59

joshynet

Offline

newbie

Liverpool

Last seen: 13 years 15 weeks ago

Liverpool

Joined: 2010-02-16

Posts: 1

Points: 2

Hey
I am fairly new to CSS and I am having touble with my navigation bar's links.
I simply want the image to change to a different image when you mouseover.

Heres the code that is obviously wrong:

#menu {
	width: 654px;
	height: 50px;
	margin-left:auto;
	margin-right: auto;
 
}
 
#menu_blog {
	float: left;
	width: 109px;
	height:50px;
	background-image:url(images/blog.jpg);
	background-repeat:no-repeat;
}
 
menu_blog.rollover {
	background-image:(images/bloghover.jpg);
}

And here is the HTML:

<div id="menu">
	  <ul>
 
			<div id="menu_about"></div>
			<div id="menu_animation"></div>
			<div id="menu_blog"></div>
			<div id="menu_contact"></div>
			<div id="menu_graphic"></div>
			<div id="menu_photo"></div>
 
	  </ul>
  </div>

If you could give me the right html code also, I will be much appreciated.

Thank you
Josh

Tags:

Tue, 2010-02-16 19:49

purewebdesigner

Offline

Enthusiast

Washington DC

Last seen: 4 years 27 weeks ago

Washington DC

Timezone: GMT-5

Joined: 2007-04-22

Posts: 234

Points: 95

Here's an example menu from

Here's an example menu from one of my sites: http://www.puredezigner.com/clients/2010/
You should use Firebug to examine this code and you will see I use the below for graphic based menus. There are many examples of menus out there. I learned a lot from http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/

Any ways here's my example code:

CSS:

#nav ul {
	width:660px;
	text-indent: -900%;
	margin:5px 0 0 10px;
}
#nav li {
     display:inline;
}
#nav li.home a {
  	float:left;
    display:block;
	background:url("../images/btn-home.jpg") no-repeat 0 0%;
	width:82px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.home a:hover {
  	background:url("../images/btn-home.jpg") no-repeat 0 100%;
	}
#nav li.home a.selected {
  	background:url("../images/btn-home.jpg") no-repeat 0 100%;
	}
 
#nav li.portfolio a {
  	float:left;
    display:block;
	background:url("../images/btn-portfolio.jpg") no-repeat 0 0%;
	width:126px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.portfolio a:hover {
  	background:url("../images/btn-portfolio.jpg") no-repeat 0 100%;
	}
#nav li.portfolio a.selected {
  	background:url("../images/btn-portfolio.jpg") no-repeat 0 100%;
	}
 
#nav li.about a {	
    float:left;
    display:block;
  	background:url("../images/btn-about.jpg") no-repeat 0 0%;
	width:94px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.about a:hover {
  	background:url("../images/btn-about.jpg") no-repeat 0 100%;
	}
#nav li.about a.selected {
  	background:url("../images/btn-about.jpg") no-repeat 0 100%;
	}
#nav li.services a {	
    float:left;
    display:block;
  	background:url("../images/btn-services.jpg") no-repeat 0 0%;
	width:111px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.services a:hover {
  	background:url("../images/btn-services.jpg") no-repeat 0 100%;
  }
#nav li.services a.selected {
  	background:url("../images/btn-services.jpg") no-repeat 0 100%;
  }
#nav li.contact a {	
    float:left;
    display:block;
  	background:url("../images/btn-contact.jpg") no-repeat 0 0%;
	width:117px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.contact a:hover {
  	background:url("../images/btn-contact.jpg") no-repeat 0 100%;
	}
#nav li.contact a.selected {
  	background:url("../images/btn-contact.jpg") no-repeat 0 100%;
	}
#nav li.blog a {	
    float:left;
    display:block;
  	background:url("../images/btn-blog.jpg") no-repeat 0 0%;
	width:83px;
	height:29px;
	margin: 0 5px 0 0;
	}
#nav li.blog a:hover {
  	background:url("../images/btn-blog.jpg") no-repeat 0 100%;
	}
#nav li.blog a.selected {
  	background:url("../images/btn-blog.jpg") no-repeat 0 100%;
	}

HTML:

<div id="nav">
	<ul id="mainnav">
		<li class="home"><a href="#" class="selected" title="Home">Home</a></li>
		<li class="portfolio"><a href="#" title="Portfolio">Portfolio</a></li>
                <li class="about"><a href="#" title="About">About</a></li>
                <li class="services"><a href="#" title="Services">Services</a></li>
                <li class="contact"><a href="#" title="Contact">Contact</a></li>
                <li class="blog"><a href="#" title="Blog">Blog</a></li>
      	</ul>
</div>

The id="mainnav" on the ul is not needed.
This code is slightly dated, I have started to not add the div wrapper to the nav and just code for the ul. What ever works for you.

I hope this helps!

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Help with navigation bar links rollover

Here's an example menu from

User login

Navigation