Jump to content

Toolbar Link Issues


ben03
 Share

Recommended Posts

I am currently writing code for a new toolbar and have come accross a problem where a link to an address which doesn't have a 'www.' is not inheriting the style rules (text should be white but remains blue). The code is below:

a.toolbar	{			float: left;			text-decoration:none;			color: white;			background-image:			url('images/toolbar.gif');			width: 85px;			height: 35px;			padding: 0px 10px 0px 10px;			}a.toolbar:hover 	{			color: #00ff00;			text-decoration: underline;			background-image:			url('images/toolbar_over.gif');			width: 85px;			height: 35px;			padding: 0px 10px 0px 10px;			}<a class="toolbar" href="http://jabonline.myfastforum.org">Forums</a>

Is there anything missing in there that may solve the issue?

Link to comment
Share on other sites

  • 2 weeks later...

Here's the code I've worked out so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}#navlist li, #navlist a{height:35px;display:block;}#home{left:0px;width:85px;}#home{background:url('images/toolbar.gif') 0 0;}#home a:hover{background: url('images/toolbar_over.gif') 0 -85px;}#about{left:85px;width:85px;}#about{background:url('images/toolbar.gif') -85px 0;}#about a:hover{background: url('images/toolbar_over.gif') -85px -85px;}#forums{left:170px;width:85px;}#forums{background:url('images/toolbar.gif') -170px 0;}#forums a:hover{background: url('images/toolbar_over.gif') -170px -85px;}#photo{left:255px;width:85px;}#photo{background:url('images/toolbar.gif') -255px 0;}#photo a:hover{background: url('images/toolbar_over.gif') -255px -85px;}#film{left:340px;width:85px;}#film{background:url('images/toolbar.gif') -340px 0;}#film a:hover{background: url('images/toolbar_over.gif') -340px -85px;}#clothing{left:425px;width:85px;}#clothing{background:url('images/toolbar.gif') -425px 0;}#clothing a:hover{background: url('images/toolbar_over.gif') -425px -85px;}#links{left:510px;width:85px;}#links{background:url('images/toolbar.gif') -510px 0;}#links a:hover{background: url('images/toolbar_over.gif') -510px -85px;}</style></head><body><ul id="navlist">  <li id="home"><a href="default.asp"></a></li>  <li id="about"><a href="css_intro.asp"></a></li>  <li id="forums"><a href="css_syntax.asp"></a></li>  <li id="photo"><a href="css_syntax.asp"></a></li>  <li id="film"><a href="css_syntax.asp"></a></li>  <li id="clothing"><a href="css_syntax.asp"></a></li>  <li id="links"><a href="css_syntax.asp"></a></li></ul></body></html>

The rollover is not functioning properly (the image displayed for 'hover' is halved). Is there a reason for that in the code shown?(images can be found at: http://www.jab-ride.co.uk/toolbar.gif and http://www.jab-ride.co.uk/toolbar_over.gif). Thanks.

Link to comment
Share on other sites

I think the problem is in your implementation. If you want to do it like the try-it example, you need to combine all the states, off and hover, into one image, which is the point of sprites. With your current implementation, you don't need to use a negative value for the hover because in the try it example, the hover images (within the overall collective image file) are below the off states. In your case, your x-axis moves the same for both states, but the y doesn't.Two solutions: (better) Combine your off and hover states into one image and recalculate your x-y coordinatesorLeave the y coordinates at 0, essentially using the same coordinates from the off state, but just changing the image src.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...