Web Design Forums

Dusteh · 11-04-2005, 07:33

I'm sure theres a simple way... but I can't get it to work and I'm on a deadline:

Has anyone else used the suckerfish menu system and replaced the main nav links with images using css image replacement? Using a couple of different methods and I run into difficulties applying the <a> or showing the nested <ul>

smallbeer · 11-04-2005, 07:46

your code please.

Dusteh · 11-04-2005, 08:14

ok you asked for it! My personal webspace is currently dead so I'm afraid its a cut-n-paste job:

This is method1 - without an extra <span> tag.
The alternative is to use the 2nd method on this site: http://wellstyled.com/css-replace-text-by-image.html
This makes the image a link, but I still can't get the nested <ul> to show.

sorry for wearing out your mouse scroll wheel with this wodge of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript"><![CDATA[//><!]]></script>
<style type="text/css">

</style>
</head>

<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li id="button3-method1"><a href="#">Services</a>
<ul>
<li><a href="#">Repairs & Accessories</a></li>
<li><a href="#">Door Frames</a></li>
<li><a href="#">Roller</a></li>
<li><a href="#">Sectional</a></li>
<li><a href="#">Side Hung</a></li>
<li><a href="#">Remote Control</a></li>
<li><a href="#">Up & Over</a> </li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

smallbeer · 11-04-2005, 08:42

untested but try putting #button3-method1 on the link instead of the list item

Code:

<li><a id="button3-method1" href="#">Services</a>

you'll have to add display: block to the link.

Code:

#button3-method1 {
height: 21px;
text-indent: -5000px;
 background: url(images/button3.gif) no-repeat;
display: block;
}

Dusteh · 11-04-2005, 09:02

Ha! Yes, of course, theres me swearing and cursing trying to apply it to elements of the list without it ever occuring to me to use the link item itself. Thanks m8y.

11-04-2005, 07:33	#1 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 4,830	Suckerfish menu and image replacement. I'm sure theres a simple way... but I can't get it to work and I'm on a deadline: Has anyone else used the suckerfish menu system and replaced the main nav links with images using css image replacement? Using a couple of different methods and I run into difficulties applying the <a> or showing the nested <ul>

11-04-2005, 08:42	#4 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	untested but try putting #button3-method1 on the link instead of the list item Code: <li><a id="button3-method1" href="#">Services</a> you'll have to add display: block to the link. Code: #button3-method1 { height: 21px; text-indent: -5000px; background: url(images/button3.gif) no-repeat; display: block; }

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

11-04-2005, 07:46	#2 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	your code please.

11-04-2005, 08:14	#3 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 4,830	ok you asked for it! My personal webspace is currently dead so I'm afraid its a cut-n-paste job: This is method1 - without an extra <span> tag. The alternative is to use the 2nd method on this site: http://wellstyled.com/css-replace-text-by-image.html This makes the image a link, but I still can't get the nested <ul> to show. sorry for wearing out your mouse scroll wheel with this wodge of code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script> <style type="text/css"> <!-- /* menu settings / ul { margin: 0px; padding: 0px; list-style: none; } li { float: left; position: relative; width: 90px; line-height: 21px } li ul { display: none; position: absolute; width: 200px; top: 21px; left: 0; } / fix for non-IE */ li > ul { top: auto; left: auto; } li:hover ul, li.over ul { display: block; } li ul li { display: block; width: 200px; } #button3-method1 { height: 21px; text-indent: -5000px; background: url(images/button3.gif) no-repeat; } --> </style> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li id="button3-method1"><a href="#">Services</a> <ul> <li><a href="#">Repairs & Accessories</a></li> <li><a href="#">Door Frames</a></li> <li><a href="#">Roller</a></li> <li><a href="#">Sectional</a></li> <li><a href="#">Side Hung</a></li> <li><a href="#">Remote Control</a></li> <li><a href="#">Up & Over</a> </li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>

11-04-2005, 09:02	#5 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 4,830	Ha! Yes, of course, theres me swearing and cursing trying to apply it to elements of the list without it ever occuring to me to use the link item itself. Thanks m8y.

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