Räuber_Glotzenrotz
Grünschnabel
Hallo,
ich werde noch wahnsinnig, ich habe in einer horizontalen Navi kleine Abstände zwischen den Elementen, sodass der Hover-Effekt nicht ganz an das Elemt davor ansetzt.
Ich bin noch ein frischling was CSS angeht, aber dieses Prob hatte ich noch nie.
Ich stelle mich wahrscheinlich total doof an.
Ich hab das Prob mal aus meinem Layout herausgezogen und nur den Codeteil eingefügt, der davon betroffen ist.
Ich dachte zuerst, vllt. hat sich da ein List-Style-Type eingeschlichen, hab aber schon ein None stehen
Naja die einzigste Möglichkeit, die ich momentan hatte, war der #navi ul li ein negatives margin zu geben, aber dass kann jawohl nicht die Lösung des Problems sein?
ich werde noch wahnsinnig, ich habe in einer horizontalen Navi kleine Abstände zwischen den Elementen, sodass der Hover-Effekt nicht ganz an das Elemt davor ansetzt.
Ich bin noch ein frischling was CSS angeht, aber dieses Prob hatte ich noch nie.
Ich stelle mich wahrscheinlich total doof an.
Ich hab das Prob mal aus meinem Layout herausgezogen und nur den Codeteil eingefügt, der davon betroffen ist.
Ich dachte zuerst, vllt. hat sich da ein List-Style-Type eingeschlichen, hab aber schon ein None stehen
Naja die einzigste Möglichkeit, die ich momentan hatte, war der #navi ul li ein negatives margin zu geben, aber dass kann jawohl nicht die Lösung des Problems sein?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#navi{
height: 41px;
width: 960px;
background: #F93;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#navi ul{
list-style: none;
line-height: 41px;
}
#navi ul li{
display: inline-block;
text-decoration: none;
}
#navi ul li a{
display: block;
color: #FFF;
padding-right: 30px;
padding-left: 30px;
border-right: 1px solid #FFF;
}
#navi ul li a:hover{
background: #F30;
}
</style>
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</body>
</html>
