nicht angemeldet
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.