• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS hover verschiebt sich

FireFreak

Neues Mitglied
body {
/*font-size: small;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}


.navi_line {
border-bottom: 1px solid #ADADAD;
display: block;
width: 130px;
height: 20px;
padding: 6px 0 4px 15px;
}


.navi_line a:link, .navi_line a:visited {
text-decoration: none;
color: #038DFF;
}


.navi_line a:hover, .navi_line a:active {
display: block;
width: 130px;
height: 20px;
text-decoration: none;
background-color: #E3E3E3;
padding: 6px 0 4px 15px;
}


.navi_line a {
display: block;
}
Mir geht es nur um a:hover.
Mit dieser Einstellung verschieben sich die hovered-Felder um das padding:
8XWERl.png


Nachdem ich das padding im a:hover entferne weil mir sonst nichts einfiel, sieht das ganze etwas besser aus:
QMSTvR.png


Allerdings sind die Kanten immernoch nicht so wie sie sein sollten, sie füllen nicht das komplette Feld aus. Wie kann man das denn beheben?

EDIT: Er will die Zeilenumbrüche irgendwie nicht in den Code reinnehmen, also lass ich das einfach so.
 
Werbung:
PHP:
ul.menu {
    padding: 0;
}

ul.menu li {
    list-style: none;
}

ul.menu li a {
    width: 115px;
    height: 20px;
    line-height: 20px;
    padding-left: 15px;
    display: block;
    text-decoration: none;
    color: #038DFF;
    border-bottom: 1px solid #ADADAD;
}

ul.menu li a:hover {
    background-color: #E3E3E3;
}


HTML:
<ul class="menu">
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>    
</ul>
 
Danke, funktioniert super :D

Nächste Frage:
Jetzt sind nur die Links anklickbar, wie kriege ich es hin, die ganze Fläche(das, was beim hover die Farbe verändert) anklickbar(ein Link) wird?
 
Werbung:
Nein, leider nicht :/ Immerhin nicht bei mir, villeicht habe ich auch was vergessen, habe es nämlich nicht exakt so abgeschrieben sondern nur teils etwas geklaut um es meinen Wünschen anzupassen :/

EDIT: Gut, vergessen wir das, ich habe tatächlich etwas vergessen :/
Danke vielmals :)
 
Zurück
Oben