Bildchen bei hover einblenden

nadjak · 22.10.2011

Hallo,
ich habe einen grünen Kasten (div) in dem sich eine Navigation in einer ul-Liste befindet. Bei a:hover soll ein Bildchen am RAnd des grünen Kastens eingeblendet werden. Leider wird es aber direkt über den ersten Buchstaben der Navigation eingeblendet.
Ich vermute das es daran liegt, das eine Liste immer eingerückt ist, aber wie kann ich das jetzt ändern. Mit margin:0 und padding:0 hat es nicht geklappt.
Vielleicht hat einer von euch noch einen Tipp für mich.
Danke schonmal
lg Nadja

Hier ist noch der Code:

im CSS-File:

HTML:

.unternavi{
 float:left;
 width: 230px;
 background: #e5e895; /*gruenton*/
 margin: 30px;
}

/*Unternavigation*/
li.menue2{
   list-style-type: none;
   font-family: "Droid Serif", serif;
   color: #666666;
   line-height: 20px;
   text-align: left;
   margin:0;
   padding:0;
   
}
li.menue2 a {
  text-decoration:none;
  color: #666666;
  font-size: 12px;
}
li.menue2  a:hover{  
  font-weight: bold; 
   background: url(images/halbkreis.gif) 0px 0px no-repeat;
}

in der HTML-Seite:

HTML:

 <div class="unternavi">
             <ul>
                <li class="menue2"><a href="massage.html">Mobile Massage</a></li>
                <li class="menue2"><a href="aromaoelmassage.html">Aroma&ouml;lmassagen</a></li>
                <li class="menue2"><a href="fussreflexzonen.html">Fu&szlig;reflexzonenmassage</a></li>
                <li class="menue2"><a href="kleinemassagen.html">Kleine Massagen</a></li>
                <li class="menue2"><a href="bueromassagen.html">B&uuml;romassagen</a></li>
             </ul>
          </div> <!-- ende unternavi-->

Herr_D · 22.10.2011

AW: Bildchen bei hover einblenden

ul, li { margin: 0; padding: 0; list-style-type: none;}

a { padding-left: gewünschter Wert }
a:hover background

ungetestet

Müßte aber gehen...

getestet:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="author" content="Reene">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
body {

}

.unternavi{
 float:left;
 width: 230px;
 background: #e5e895; /*gruenton*/
 margin: 30px;
}

/*Unternavigation*/

ul#menue2 {
margin:0;
padding:0;
list-style-type: none; }
li.menue2{
   list-style-type: none;
   font-family: "Droid Serif", serif;
   color: #666666;
   line-height: 20px;
   text-align: left;
   margin:0;
   padding:0;

}
li.menue2 a {
  text-decoration:none;
  color: #666666;
  font-size: 12px;
  padding:2em;
}
li.menue2  a:hover{
  font-weight: bold;
   background: url(images/halbkreis.gif) 0px 0px no-repeat;
}
-->
</style>

</head>
<body>
<div class="unternavi">
             <ul id="menue2">
                <li class="menue2"><a href="massage.html">Mobile Massage</a></li>
                <li class="menue2"><a href="aromaoelmassage.html">Aroma&ouml;lmassagen</a></li>
                <li class="menue2"><a href="fussreflexzonen.html">Fu&szlig;reflexzonenmassage</a></li>
                <li class="menue2"><a href="kleinemassagen.html">Kleine Massagen</a></li>
                <li class="menue2"><a href="bueromassagen.html">B&uuml;romassagen</a></li>
             </ul>
          </div> <!-- ende unternavi-->

</body>
</html>

nadjak · 22.10.2011

AW: Bildchen bei hover einblenden

Tausend Dank! Jetzt klappt es !!
lg NAdja

Herr_D · 22.10.2011

AW: Bildchen bei hover einblenden

ein

list-style-type: none;

kann aber auch noch raus...