nicht angemeldet
vertical-align in Tabellenzelle funktioniert nicht bei a:hover!
Hallo,
ich bin echt am verzweifeln, und würde mich sehr über Hilfe bei folgendem Problem freuen!
Auf meiner Webseite habe ich ein Fußzeile mit 30px Höhe. Diese enthält auch ein paar Links. Die Seite passt sich dynamisch an die Breite des Browserfensters an (wie es ja in html gewollt ist). Nun sind die Linktexte relativ lang, sodass bei schmalerem Browserfenster die Gefahr besteht, dass die Linktexte umgebrochen werden. Zusätzlich sollen die Linktexte (umgebrochen oder nicht) noch vertikal zentriert in der Fußzeile stehen. Soweit klar?
Meine erste Lösung war ein div-Container für die Fußzeile (30px hoch), Zentrierung des Textes über line-height: 30px, die Links als Liste mit display: inline, float: left, width: 100%, damit ein Hovereffekt über das gesamte List-Item funktioniert. Funktioniert soweit, aber wenn die Linktexte nun umgebrochen werden, befindet sich die obere Textzeile außerhalb der Fußzeile, wegen line-height: 30px!
Da ich ansonsten keine befriedigende Lösung gefunden habe, Text unabhängig von seiner Höhe in einem div vertikal zu zentrieren, habe ich das ganze nochmal komplett umgeschrieben und die Fußleiste mit einer einzeiligen Tabelle realisiert. Da kann man dann Text innerhalb der Zellen mit vertical-align: middle zentrieren, und wenn der Text umbricht, bleibt er innerhalb der Fußzeile. Funktioniert soweit auch gut, bis ich einen Hovereffekt über die gesamte Ausdehnung der Tabellenzelle einbauen will mit display: block; width: 100%; height: 30px (habe auch 100% probiert, kein Unterschied). Und, schwupp, sitzen alle Links am oberen Rand der Tabellenzellen, nicht mehr zentriert! Entfernung von height: 30px bringt den Text wieder in die Mitte, führt aber dazu, dass sich der Hovereffekt nicht mehr über die ganze Zellenhöhe erstreckt. Denselben Effekt hat das Entfernen von display: block statt der Höhenangabe.
Hier mein css:
table.fusszeile {position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 30px; margin: 0px; padding: 0px; table-layout: fixed; line-height: 15px;}
table.fusszeile td {text-align: center; vertical-align: middle; margin: 0px; padding: 0px;}
table.fusszeile a, table.fusszeile a:visited {display: block; width: 100%; height: 30px; vertical-align: middle; text-decoration: none; color: #DDEEBB; background-color: #336633;}
table.fusszeile a:hover, table.fusszeile a:focus {display: block; width: 100%; height: 30px; color: #000000; background-color: #DDEEBB}
Und hier mein html:
<table class="fusszeile" width="100%" height="30px" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td>hier ist text</td>
<td><a href="verweis1.htm">Verweis1</a></td>
<td><a href="verweis2.htm">Verweis2</a></td>
<td><a href="verweis3.htm">Verweis3</a></td>
<td><a href="verweis4.htm">Verweis4</a></td>
</tr>
</table>
Und jetzt bin ich mal gespannt, was euch dazu einfällt. Würde mich sehr über kreative Lösungsmöglichkeiten freuen.
Schöne Grüße, Jan.
-
Hi,
folgende Tabelle funktioniert:
[code:html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Fusszeile</title>
<style type="text/css">
a { color: red; }
a:hover { color: blue; }
</style>
</head>
<body>
<table class="fusszeile" width="1000" border="1" cellspacing="0" cellpadding="30">
<tr>
<td align="center" valign="middle" height="75" nowrap>hier ist text</td>
<td align="center" valign="middle" height="75" nowrap><a href="verweis1.htm">Das ist ein ganz langer Verweis Text, der nicht umgebrochen werden soll.</a></td>
<td align="center" valign="middle" height="75" nowrap><a href="verweis2.htm">Das ist ein ganz langer Verweis Text, der nicht umgebrochen werden soll.</a></td>
<td align="center" valign="middle" height="75" nowrap><a href="verweis3.htm">Das ist ein ganz langer Verweis Text, der nicht umgebrochen werden soll.</a></td>
<td align="center" valign="middle" height="75" nowrap><a href="verweis4.htm">Das ist ein ganz langer Verweis Text, der nicht umgebrochen werden soll.</a></td>
</tr>
</table>
</body>
</html>
[/code]bye trunx
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>hier</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.-
Hallo trunx,
vielen Dank für deine Antwort. Leider fürchte ich, dass du mich nicht richtig verstanden hast. Mein Linktext soll ja umgebrochen werden, wenn es nötig ist. Nur möchte ich folgendes erreichen:
-
Der Linktext in der Fußzeile fester Höhe soll vertikal zentriert stehen, unabhängig davon, ob er ein- oder zweizeilig ist.
-
Der Linktext soll dynamisch, je nach Fenstergröße umgebrochen werden, d.h. "selbst entscheiden", ob er nun ein- oder zweizeilig ist.
-
Es soll sich ein Hovereffekt ergeben, der sich auf die gesamte, den Link umgebende Box (entweder Tabellenzelle oder div-Container, o.ä.) erstreckt, d.h. die gesamte Box soll klickbar sein und die Hintergrundfarbe der Box soll sich beim Hovern ändern.
-
Die Höhe der Fußzeile, und damit die Höhe der Hoverbox, soll höher sein als der Text, damit genug Platz für zwei Zeilen ist (falls der Text umbricht). Und hier scheint mir das Problem zu liegen. Wenn ich dem Link die Eigenschaft display: block mitgebe, und den entstehenden Container höher mache als die Schrift, dann habe ich ja wieder das gleiche Problem, wie in einem div-Container, dass es keinen einfachen Befehl gibt, die Schrift vertikal zu zentrieren. Mir scheint, dass hier letztlich noch Bedarf ist, im nächsten css-Standard eine Möglichkeit zu schaffen, um Text oder sonstiges innerhalb von Blockelementen vertikal zu zentrieren.
Aber falls jemand noch eine Idee hat, wie dies jetzt schon zu bewerkstelligen ist, würde ich mich freuen, davon zu hören. Also:
- Wie kann ich einen Link auf eine Tabellenzelle ausdehnen, ohne display: block zu benutzen, oder
- wie kann ich Text innerhalb eines Block-Elementes (div oder a als block) vertikal zentrieren?
Danke und schöne Grüße,
Jan.
-
-