Web Design Forums

NickToye · 19-01-2005, 10:20

Hi,

On my site I have a list style navigation that displays inline and I have my own icons next to the textual links.

When I rollover the text changes colour, but the icons stay static. I would like to have the icons change in someway.

Here is my CSS

Code:

/* Navigation elements*/
#nav {
	margin: 0;
	padding: 0;
	line-height:25px;
	display: inline;
	list-style: none;
}

ul#nav {margin:0;padding:5px}

#nav li  {
	display: inline;
 	list-style-type: none;
	padding-left:15px;
	padding-top: 15px;
	padding-bottom: 15px;
}

#nav a {
	padding: 20px 0 0 0;
	overflow: hidden;
 	line-height: 14px;
	font-weight: bold;
	margin: 0 0px 0px 40px;
 	text-decoration: none;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 10px;
 	color: #000000;
 }
	
#home  { background: url(http://www.nicktoye.co.uk/images/home_tiny.png) no-repeat 20px;
}
#contact  { background: url(http://www.nicktoye.co.uk/images/mail_tiny.png) no-repeat 20px;
}
#about  { background: url(http://www.nicktoye.co.uk/images/about_tiny.png) no-repeat 20px;
}
#blog  { background: url(http://www.nicktoye.co.uk/images/blog_tiny.png) no-repeat 20px;
}
#work  { background: url(http://www.nicktoye.co.uk/images/work2.png) no-repeat 20px;
}


 
#nav a.active, #nav:hover {
	 color: #804040;
 }
 
#nav a:hover {
  	color: #804040;
  }

The link to the live site is here

emil · 19-01-2005, 10:45

Hi.

You could put the small icons as backgrounds in your css and change them on hover.
This would also mean that you would have to have a different id/class for your navigation links.

NickToye · 19-01-2005, 11:53

The icons are as backgrounds in the CSS. So could I have a rule like:

#home a:hover { background: url(http://www.nicktoye.co.uk/images/home_hover.png) no-repeat 20px;
}

emil · 19-01-2005, 13:31

Yes, that's what I meant.

Also you should check your margin/padding for your navigation, as it doesn't look ok in ie

NickToye · 19-01-2005, 15:44

Well I have fixed the IE problem, but when I try and create a hover rule, it shows the image not exactly over the original.

emil · 20-01-2005, 02:04

Try this

#home a:link{ background: url(path-to-image/normal-image.png) no-repeat 20px;
}
#home a:hover{ background: url(path-to-image/hover-image.png) no-repeat 20px;
}

LATER EDIT
----------------------------------------------------------------------------

I tried to replicate your code

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>NickToye 2005</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">


ul#nav { 
	padding: 5px; 
	margin: 0px; 
	font-family: Arial, Helvetica, sans-serif; 
	}
#nav li {
	display: inline; 
	padding: 15px 0px 15px 15px; 
	margin: 0px; 
	color: #000; 
	list-style-type: none;
}

#nav a {
	font-size:xx-small; color: #000; text-decoration: none;
}


#nav a:hover {
	color: #804040
}

a#home:link {
	background: url(http://www.nicktoye.co.uk/images/home_tiny.png) no-repeat left; padding-left:30px; height:50px;
	
}

a#home:hover {
	background: url(http://www.nicktoye.co.uk/images/about_tiny.png) no-repeat left; padding-left:30px; height:50px; 
}

</style>

</head>
<body>
<ul id="nav">
  <li>
  <a id="home" class=active href="http://www.nicktoye.co.uk/index.php">HOME</a>
  </li>
  <li>
</ul>

</body>
</html>

This is what I came up with.
The problem is that, having 10px font in the links, "cuts" the edges of your icons.

At this moment I can't think of an other solution (other than setting larger font-sizes for your nav or reducing the sizes of the icons) than javascript

19-01-2005, 13:31	#4 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,998	Yes, that's what I meant. Also you should check your margin/padding for your navigation, as it doesn't look ok in ie Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

19-01-2005, 10:45	#2 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,998	Hi. You could put the small icons as backgrounds in your css and change them on hover. This would also mean that you would have to have a different id/class for your navigation links.

19-01-2005, 11:53	#3 (permalink)
NickToye Senior Member Join Date: Oct 2004 Location: Chester Posts: 364	The icons are as backgrounds in the CSS. So could I have a rule like: #home a:hover { background: url(http://www.nicktoye.co.uk/images/home_hover.png) no-repeat 20px; }

19-01-2005, 15:44	#5 (permalink)
NickToye Senior Member Join Date: Oct 2004 Location: Chester Posts: 364	Well I have fixed the IE problem, but when I try and create a hover rule, it shows the image not exactly over the original.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)