nicht angemeldet
vertikales Menü - im "Paddingbereich" wird nicht gehovert
0 
Gunnar Bittersmann
0
vertikales Menü - im "Paddingbereich" wird nicht gehovert
Hallo allerseits!
Ich mal wieder:
Habe hier versucht, ein simples Menü mit CSS zu erstellen, das bei Hover über die Listenpunkte die HG-Farbe ändert und der Link geklickt werden kann.
Durch das Padding (möchte großzügigen Rahmen um die Listenpunkte) entstehen mit leider 2 Probleme NUR IN DIESEM PADDING-BEREICH:
1. a:hover wirkt nicht = Linkfarbe wird nicht weiss
2. der Link ist nicht klickbar
(im TEXT-Bereich funktioniert es)
Weiteres Problem:
3. wieso schieben sich die Listenpunkte aus ul rechtsbündig raus???
Wie löse ich die Probleme? Oder gehe ich das ganz falsch an?
Danke!
ul#navi {
width: 150px;
border: 1px dashed #ff0000;
}
ul#navi li {
width: 150px;
padding: 1.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
text-align: center;
list-style: none;
border: 1px dashed #000000;
}
ul#navi li:hover, ul#navi a:hover {
background: #000000;
color: #ffffff;
}
<ul id="navi">
<li><a href="#">TESTLINK</a></li>
<li><a href="#">TESTLINK</a></li>
<li><a href="#">TESTLINK</a></li>
<li><a href="#">TESTLINK</a></li>
<li><a href="#">TESTLINK</a></li>
<li><a href="#">TESTLINK</a></li>
</ul>
LG, Jürgen
-
@@juewi:
nuqneH
Durch das Padding (möchte großzügigen Rahmen um die Listenpunkte) entstehen mit leider 2 Probleme NUR IN DIESEM PADDING-BEREICH:
- a:hover wirkt nicht = Linkfarbe wird nicht weiss
- der Link ist nicht klickbar
Deine 'a'-Elemente haben kein Padding.
(im TEXT-Bereich funktioniert es)
Also in der Box der 'a'-Elements. Mehr ist auch nicht zu erwarten.
Weiteres Problem:
3. wieso schieben sich die Listenpunkte aus ul rechtsbündig raus???Weil 150px breite 'li'-Elemente mit 2 × 0.5em Padding nicht in ein 150px breites 'ul'-Element passen.
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Hallo Gunnar!
»» (im TEXT-Bereich funktioniert es)
Also in der Box der 'a'-Elements. Mehr ist auch nicht zu erwarten.Tja - heisst also, ich geh die Sache also falsch an?
»» Weiteres Problem:
»» 3. wieso schieben sich die Listenpunkte aus ul rechtsbündig raus???
Weil 150px breite 'li'-Elemente mit 2 × 0.5em Padding nicht in ein 150px breites 'ul'-Element passen.Ok, nun passen sie rein, haben aber noch immer einen ominösen Abstand zum linken Rand? Woher kommt der?
LG, Jürgen
-
@@juewi:
nuqneH
Tja - heisst also, ich geh die Sache also falsch an?
Tja, war „Deine 'a'-Elemente haben kein Padding“ nicht verständlich genug? Gib ihnen welches, 'li' dafür keins. Außerdem:
ul#navi a {display: block}– und schon füllen die 'a'-Boxen die 'li'-Boxen aus und (1) und (2) sind gelöst.Ok, nun passen sie rein, haben aber noch immer einen ominösen Abstand zum linken Rand? Woher kommt der?
Den Firebug kennst du aber, oder?
Damit kannst du im Tab „Layout“ sehen, dass ul[id="navi"] 40px linkes Padding hat. Kuckst du im Tab „Styles“ und siehst … – nichts. Es kommt auch nicht aus Autoren- oder Nutzerstylesheet, sondern aus dem browserinternen Stylesheet. [CSS2 §6.4]
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Tja, war „Deine 'a'-Elemente haben kein Padding“ nicht verständlich genug? Gib ihnen welches, 'li' dafür keins. Außerdem:
ul#navi a {display: block}– und schon füllen die 'a'-Boxen die 'li'-Boxen aus und (1) und (2) sind gelöst.Oh, super! Dachte, man kann a-tags keine paddings etc. verpassen ...
Funktioniert - danke!»» Ok, nun passen sie rein, haben aber noch immer einen ominösen Abstand zum linken Rand? Woher kommt der?
Den Firebug kennst du aber, oder?
Nein kannte ich nicht. Hab ihn jetzt installiert.
Damit kannst du im Tab „Layout“ sehen, dass ul[id="navi"] 40px linkes Padding hat. Kuckst du im Tab „Styles“ und siehst … – nichts. Es kommt auch nicht aus Autoren- oder Nutzerstylesheet, sondern aus dem browserinternen Stylesheet. [CSS2 §6.4]
wow - Klasse Link, den hätte ich vermutlich vor 2033 nicht gefunden ;-)
Hab halt padding: 0 eingebaut und funktioniert so!Vielen lieben Dank!
LG, Jürgen
-
@@juewi:
nuqneH
Dachte, man kann a-tags […]
[…] keine paddings etc. verpassen ...
Man kann jedem Element jede Eigenschaft verpassen ... ob sie wirkt, ist eine andere Frage.
Linkes und rechtes Padding wirken bei Inlineboxen, oberes und unteres nicht. Aber durch 'display: block' ist das 'a'-Element ja eine Blockbox, da wirkt Padding in alle vier Richtungen.
Hab halt padding: 0 eingebaut und funktioniert so!
Nicht im IE 6. Irritiert den der ihm unverständliche und völlig überflüssige Selektor 'li:hover'?
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
»» Dachte, man kann a-tags […]
Ups sorry ...
Linkes und rechtes Padding wirken bei Inlineboxen, oberes und unteres nicht. Aber durch 'display: block' ist das 'a'-Element ja eine Blockbox, da wirkt Padding in alle vier Richtungen.
Wieder was gelernt.
»» Hab halt padding: 0 eingebaut und funktioniert so!
Nicht im IE 6. Irritiert den der ihm unverständliche und völlig überflüssige Selektor 'li:hover'?Lt. IE-Renderer siehts jetzt in IE6 auch ok aus -> hab li:hover entfernt.
Lieben Dank erstmal, Fortsetzungsfragen folgen unter Garantie ;-)
Jürgen
-
-
-
-