kleines Zentrierungsproblem - Hilfe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
blocken
code
display
falsch macht
farbe
file
folgendes problem
formatierung
idee
inhalt
jemand
modus
nutzen
problem
text
trennen
wert abziehen
zelle
zentrierung
-
Hi,
hier mal mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href="format.css" type="text/css"> </head> <body> <table width="800" style="height:100%" align="center" border="0" cellspacing="0" cellpadding="0"> <tr><td height="*"></td></tr> <tr> <td height="500"> <!--<td height="500" align="center" valign="middle">Inhalt</td>--> <table width="800" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td id="menue_1"><a href="index.php?menu=s01" id="linkFormatMenu">Text1</a></td><td id="menue_2"><a href="index.php?menu=s02" id="linkFormatMenu">Text2</a></td><td id="menue_1"><a href="index.php?menu=s02" id="linkFormatMenu">Text3</a></td><td id="menue_2"><a href="index.php?menu=s02" id="linkFormatMenu">Text4</a></td><td id="menue_1"><a href="index.php?menu=s02" id="linkFormatMenu">Text5</a></td></tr> </table> </td> </tr> <tr><td height="*"></td></tr> </table> </body> </html> CSS-File: #linkFormatMenu { color:#FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; } #menue_1 a { /*menue-grey*/ height:30px; width:160px; background-color:#808080; text-align:center; /*vertical-align:middle;*/ color:#FFFFFF; font-size:14px; font-weight:bold; display: block; } #menue_1 a:hover { /*menue-grey*/ height:30px; width:160px; background-color:#FF0000; text-align:center; color:#FFFFFF; font-size:14px; font-weight:bold; } #menue_2 a { /*menue-blue*/ height:30px; width:160px; background-color:#000080; text-align:center; /*vertical-align:middle;*/ color:#FFFFFF; font-size:14px; font-weight:bold; display: block; } #menue_2 a:hover{ /*menue-blue*/ height:30px; width:160px; background-color:#FF0000; text-align:center; color:#FFFFFF; font-size:14px; font-weight:bold; }
Folgendes Problem: Warum lässt sich der Text in den Zellen nicht vertikal zentrieren?
Hab schon alles versucht. Wenn ich im CSS-File das a bei #menue_1 weglasse, dann gehts mit der Zentrierung, nur füllt er dann nicht die gesamte Zelle beim mit der anderen Farbe an, wenn man über den Link fährt.
Hat jemand eine Idee?
Liebe Grüsse.
Beitrag zuletzt geändert: 13.2.2009 0:54:05 von onlineuser -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
onlineuser schrieb:
Hat jemand eine Idee?
Stelle ganz einfach bei deinen #menue die height auf 32px und setze überall ein padding-top:8px; ein. Z.B.:
#menue_1 a { /*menue-grey*/ height:32px; width:160px; background-color:#808080; text-align:center; /*vertical-align:middle;*/ color:#FFFFFF; font-size:14px; font-weight:bold; display: block; padding-top:8px; }
Du kannst natürlich auch height:28px; und padding-top:7px; machen...
Ansonsten würde ich dir raten HTML und CSS sauber zu trennen, soll heißen: Formatierung nur im CSS - dann behälst du Überblick besser. -
Hi,
thx für die Lösungen, jedoch, wenn ich einfach von oben nach unten "einrücke", dann interpretiert das der Firefox falsch. Der vergößert die Zelle dann einfach nochmal um die Pixelanzahl.
padding-top:4px;
Aha, das ist wohl ein Problem vom Quirks-Modus im IE, der das falsch macht. Aber wie kann ich verhindern, dass die Zellenhöhe nicht um das von oben eingerückte höher wird.
Liebe Grüsse.
Beitrag zuletzt geändert: 13.2.2009 21:52:09 von onlineuser -
Das ist schon richtig. Die Höhe berechnet sich aus Höhe + Padding + Border. Du musst im CSS deine Paddingwerte vom Höhe Wert abziehen. Dann passt es wieder.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
