Having trouble with a CSS menu with hover-buttons

**lschmidt** · Apr 7, 2009 16:09

I'm close but having trouble with making it look nice. The problems are:

1) I want the text and picture to be aligned at the top of the button, not the bottom like it is now.

2) If the text is too long for one line, I'd like it to wrap around but stay to the right of the picture.

3) When you hover over each buttom, there is more padding below the button than above it.

Here's the code I have so far:

Code:

<html>
<head>
<style type="text/css">
ul#cssnav {
        list-style-type:none;
}

#cssnav li a {
        display:block;
        width: 150px;
        text-decoration:none;
        padding:5px;
}

#cssnav li a:hover {
        background:#1f1f1f;
        color:#fffff8;
}
</style>
</head>
<body>
<ul id="cssnav">
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Home</a></li>
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Sometimes there will be 2 lines</a></li>
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Contact</a></li>
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Links</a></li>
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Email</a></li>
<li><a href="#"><img src="pic.jpg" width="40" border="1" />Login</a></li>
</ul>
</body>
</html>

Thanks!

**Centauri** · Apr 7, 2009 16:26

Try adding :

Code:

#cssnav li a img {
        vertical-align: top;
}

**lschmidt** · Apr 7, 2009 16:43

Awesome, that fixed the vertical alignment issue! Now just the other two parts:

2) If the text is too long for one line, I'd like it to wrap around but stay to the right of the picture.

3) When you hover over each buttom, there is more padding below the button than above it.

**Centauri** · Apr 7, 2009 17:01

The text could be kept to the right by using left padding and pulling the image into the padding area with a negative left margin :

Code:

#cssnav li a {
        display:block;
        width: 100px;
        text-decoration:none;
        padding:5px 5px 5px 50px;
}

#cssnav li a img {
        vertical-align: top;
        margin-left: -45px;
}

Not sure about the padding issue without seeing this with the graphics - can you put what you have so far online?

**RyanReese** · Apr 8, 2009 06:14

You are also in quirks mode-try adding a valid doctype with a URI.

User Tag List

Thread: Having trouble with a CSS menu with hover-buttons

Thread Tools

Display

Having trouble with a CSS menu with hover-buttons

Bookmarks

Bookmarks

Posting Permissions