PDA

View Full Version : A simple a:hover question.


RobG
07-01-2006, 02:39 PM
Hi,

I am trying to build a simple navigation list, and I want it so that the background colour for the block containing the ul item is changed on hover. I am almost there, but the block of colour is offset and I can't seem to get it lined up within the background image I am using for the containing div.

I have uploaded the page to:

http://www.csstest.pwp.blueyonder.co.uk/menu.html

Here is the HTML:


<!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>Menu Demo</title>

<style type="text/css">

div#menu1 {width:240px; height:340px; background-image:url(200x300.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; background-repeat:no-repeat;}

div#menu1 ul {list-style-type:none; padding-top:20px; list-style-position:inside; }

div#menu1 li {height:45px; width:200px; margin: 0; list-style:none;}

div#menu1 a {text-decoration:none; color:#CCCCCC; font-size:14pt; display: block; }

div#menu1 a:link { color:#CCCCCC; }

div#menu1 a:visited {color:#999999; }

div#menu1 a:hover { background-color:#CCCCCC; color:#333333; text-decoration : underline; }

</style>

</head>

<body>

<div id="menu1">
<ul>
Link 1 (#)
Link 2 (##)
Link 3 (###)
Link 4 (####)
Link 5 (#####)
Link 6 (######)
[/list]
<div>

</body>
</html>


If someone could help me with this, I would greatly appreciate it.

Thanks

Rob

RobG
07-02-2006, 10:49 AM
Hi,

I have now found the answer to this. I needed to add the code:


display:inline;


to the div#menu ul selector in the CSS.

Cheers

Rob