nicht angemeldet
CSS Hover
Hallo zusammen,
ich habe ein kleines Problem bei meiner Navigationsleiste, die ich mit CSS formatiert habe. Ich weiß das Thema "Hover" ist schon oft besprochen worden, allerdings hab ich keine Erklärung für mein Problem gefunden.
Dieses sieht wie folgt aus:
Ich habe eine Tabelle mit X Zeilen als Navigator. In jeder Zelle steht ein Link, den ich gerne vertikal mittig hätte, z.B.
<tr>
<td style="font:10pt;vertical-align:center;">
<a id="k" href="home_d.html"> Startseite</a>
</td>
</tr>
In einer separaten CSS Datei ist k wie folgt definiert:
a#k {display:block;
width:100%;
height:100%;}
a#k:hover {background-color:#af2b2b;}
Das Problem ist nun jedoch, dass der Link, sobald ich height:100% definiere nicht mehr mittig sitzt (sondern oben, was doof aussieht, weil drüber ein Rahmen ist). Lasse ich height:100% hingegen weg, dann sitzt der Link zwar vertikal mittig, bei hover wird aber nicht die gesamte Zelle farbig markiert,sondern nur auf Höhe der Schrift, oben und unten am Rand bleibt die Zelle im vorherigen farblichen Zustand.
Was mache ich falsch? Für Anregungen wäre ich sehr dankbar, auch für Hinweise, dass ich hier im Forum falsch gesucht habe :)
Danke schon mal im Voraus.
Gruß
Dummbatz
-
Ach so, hab vergessen: muss natürlich in vorherigem Post:
vertical-align:middle heißen. Ändert aber an der Problemlage trotzdem nichts.Grüße
Dummbatz
-
Hallo.
Was mache ich falsch? Für Anregungen wäre ich sehr dankbar, auch für Hinweise, dass ich hier im Forum falsch gesucht habe :)
Evtl. hilft cellpadding:0; (Vergleich: http://de.selfhtml.org/html/tabellen/gestaltung.htm#abstand) Dann stattest du a mit padding aus, je nach Bedarf.
Tabellen sind für tabellarische Daten. Für Menüs oder dergleichen verwendet man in der Regel Listen.
http://de.selfhtml.org/css/eigenschaften/listen.htm
http://css.maxdesign.com.au/listamatic/MfG, Kungschu.
--
Brain: an apparatus with which we think we think.-
Hallo Kungschu,
ich danke dir für den Hinweis mit den Listen. Wenn ich es so mache, dann geht es indem ich mit padding einfach den Link größer mache und dann highlightet er auch komplett.
In Zukunft dann wohl Listen :)
Besten Dank
Gruß
Dummbatz
-
-
Hi,
Das Problem ist nun jedoch, dass der Link, sobald ich height:100% definiere nicht mehr mittig sitzt (sondern oben, was doof aussieht, weil drüber ein Rahmen ist).
das liegt daran, dass vertical-align nicht auf blocklevel Elemente angewendet werden kann, zu denen Du die Links gemacht hast. Eine Alternative bietet hier line-height.
freundliche Grüße
Ingo