Graphics only ul menu

Excavator

12-12-2006, 08:16 PM

Just started looking at this (http://www.codingforums.com/showthread.php?t=102790) this morning and thought I should start a new thread so as not to hijack the original.

That is not what was suggested above; since the images in this case should be considered presentational in nature, including them as content in the document is not the preferred method.
I didn't realize that. I've done this before with divs but never with an unordered list. It makes sense to prefer CSS background.

It is more appropriate to use CSS background images as HarbingerOTV suggested, which would also make the use of ordinary link text instead of images for text possible.

So I'm having problems getting the li to be a link with no text.
Here is what's not working so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vertical ul menu with buttons</title>
<meta name="" content="authored by http://www.nopeople.com" />
<style type="text/css">
html, body {
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
#menu_left {
padding: 0px;
width: 147px;
margin: 10px 0 0 10px;
}
#menu_left ul {
list-style-type: none;
text-align: left;
}
#menu_left li {
width: 147px;
height: 21px;
display: block;
}
#menu_left li a{
width: 147px;
height: 21px;
}
#menu_left li a:hover {
width: 147px;
height: 21px;
margin-left: 3px;
background-position: 3px;
}
.button1 {
border: 1px solid #00FF00;
background-image: url(button1.gif);
height: 21px;
width: 147px;
}
.button2 {
border: 1px solid #00FF00;
background-image: url(button2.gif);
height: 21px;
width: 147px;
}
.button3 {
border: 1px solid #00FF00;
background-image: url(button3.gif);
height: 21px;
width: 147px;
}
.button4 {
border: 1px solid #00FF00;
background-image: url(button4.gif);
height: 21px;
width: 147px;
}
.button5 {
border: 1px solid #00FF00;
background-image: url(button5.gif);
height: 21px;
width: 147px;
}
.button6 {
border: 1px solid #00FF00;
background-image: url(button6.gif);
height: 21px;
width: 147px;
}
</style>
</head>

<body>

<div id="menu_left">
<ul>
<li class="button1"><a href="http://www.nopeople.com"></a></li>
<li class="button2"><a href="http://www.nopeople.com"></a></li>
<li class="button3"><a href="http://www.nopeople.com"></a></li>
<li class="button4"><a href="http://www.nopeople.com"></a></li>
<li class="button5"><a href="http://www.nopeople.com"></a></li>
<li class="button6"><a href="http://www.nopeople.com"></a></li>
</ul>
<div class="button1"><a href="http://www.nopeople.com"></a></div>
</div>
</body>
</html>

zk0

12-12-2006, 08:49 PM

Why dont you make the text as a special id and then in the CSS use display:none; for the text?

Could work. I haven't tested it.

Excavator

12-12-2006, 08:54 PM

I thought of that but, since ronaldb66 seemed to think that adding the graphic via markup is not the way to go, I didn't think that was a very elegant solution. I haven't tried it yet either...

VIPStephan

12-12-2006, 09:21 PM

Firstly: You can't set height and width to links if they aren't floated or set to display: block;.

I always do it this way:

<ul>
<li class="home"><a href="#">Home</a>
<li class="gallery"><a href="#">Gallery</a>
<li class="contact"><a href="#">Contact</a>
</ul>

ul {
margin: 0;
padding: 0;
list-style: none;
}
ul a {
display: block;
text-indent: -999em;
/* if all links are the same size you can put width and height here, otherwise set it separately for each link (iin the rules below below) */
}
.home a {background: url(path/to/image1.gif);}
.gallery a {background: url(path/to/image2.gif);}
.contact a {background: url(path/to/image3.gif);}
ul a:hover {background-position: 0 3px; /* just an example */}

This is just a very basic example for text links and image replacement. There are several approaches/methods to replace text with a background image: http://www.mezzoblue.com/tests/revised-image-replacement/

Excavator

12-12-2006, 11:59 PM

That works well but I can't seem to get the 3px shift to the right to work...

Excavator

12-15-2006, 11:06 PM

Well, I finally got a chance to work on these a bit.
Still can't figure out how to get the image to shift over 3px and show the background color when you hover on it so I did it another way.
I added the 3px border to the top and left of the buttons, so they can be used in a vertical or horizontal menu. Then just shift the background image enough to hide or show the extra border on mouseover.

See them at
http://www.nopeople.com/CSS/menu_buttons_horizontal/
and
http://www.nopeople.com/CSS/menu_buttons_vertical/

_Aerospace_Eng_

12-16-2006, 12:49 AM

What are you going to do if the user has background images disabled?

Excavator

12-16-2006, 01:17 AM

This menu is not going to work with background images disabled.

Excavator

12-16-2006, 02:11 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
.smallfonts {
font-family: "Comic Sans MS";
font-size: .6em;
color: #CC0066;
}
#footer {
text-align: center;
height: 25px;
width: 100%;
}
</style>
</head>

<body>
<div id="footer">
<a href="http://www.nopeople.com" class="smallfonts">first link</a> | <a href="http://www.nopeople.com" class="smallfonts">second link</a> | <a href="http://www.nopeople.com" class="smallfonts">third link</a> | <a href="http://www.nopeople.com" class="smallfonts">fourth link</a> | <a href="http://www.nopeople.com" class="smallfonts">fifth link</a> | <a href="http://www.nopeople.com" class="smallfonts">last link</a>
</div>
</body>
</html>