vandret menu med background image
Nu bliver jeg nødt til at have lidt hjælp. Jeg forstår ikke dette problem.Jeg forsøger at få på plads hvordan tingene hænger sammen, når man laver en menu. Jeg har lavet den med billeder i b 180px x h 50px. lagt billedet ind som background i min css på a og et andet af samme størrelse på min a:hover. Men uanset hvad jeg har gjort, er billedets størrelse afhængig af teksten. Jeg troede, at det altid ville blive billedets størrelse, der gav menupunkterne.
Jeg vil have lige store menupunkter med teksten midstille både lodret og vandret.
Problemet kan ses på http://www.annelise-b.dk/test/
<head>
<link rel="stylesheet" type="text/css" href="menu.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.annelise-b.dk" target="_blank">annelise-b</a></li>
<li><a href="http://www.hov-sa.dk" target="_blank">hov-sa</a></li>
<li><a href="http://www.google.dk" target="_blank">google</a></li>
<li><a href="http://www.lynda.com" target="_blank" >lynda</a></li>
</ul>
</div>
</body>
</html>
og css:
*{border:0; padding:0; margin:0;}
#nav {list-style:none;
float:right;
width:100%;}
#nav li{display:inline}
#nav a{
display:block;
float:right;
border-right-width:10px;
padding:1em 4em;
text-decoration:none;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-variant:small-caps; font-weight:bolder;
background: url(menu.jpg); background-repeat:no-repeat;
border-right:1px solid #fff;
}
#nav a:hover{
color:#FFFF00;
background: url(menurrolover.jpg); background-repeat:no-repeat;
}
