Supportnet / Forum / Webseiten/HTML
inhelt per css zentrieren
Frage
hi
wie ihr im betreff lesen könnt, geht es mal wieder ums thema zentrieren des inhalts per css ...
nur leider funktioniert kein vorschlag den ich gefunden habe
wenn ich es mit <div ...> inhalt der seite </div> mache dann geht es leider nicht (FF)
in meiner style.css habe ich das für den body tag stehen -->
[code]
body{
text-align: center;
font-family: thaoma;
font-size: 12px;
}
[/code]
das funktioniert auch im IE nur halt im FF nicht
plz help me ...
IKA
Antwort 1 von otimac_
Antwort 2 von derpfleger
Lese doch dazu bitte diesen Abschnitt in Selfhtml nach, insbesondere den Hinweis unter "Beachten Sie", das sollte deine Frage beantworten.
Gruss Heiko
Gruss Heiko
Antwort 3 von derpfleger
Antwort 4 von ika1987
hi
danke erstmal für die schnellen antworten ...
werde ich mir morgen nachmittag zu gemüte führen und teste ..
melde mich dann später also ..
thx
ika
danke erstmal für die schnellen antworten ...
werde ich mir morgen nachmittag zu gemüte führen und teste ..
melde mich dann später also ..
thx
ika
Antwort 5 von rfb
kurz gesagt: der IE machts falsch, du musst noch die Syntax für die Browser einbauen, die CSS richtig beherrschen. Für deine Codeschnipsel heißt das:
</body>
body{
text-align: center;
font-family: thaoma;
font-size: 12px;
}
#inhalt {
margin-left:auto;
margin-right:auto;
}
...
<body>
<div id="inhalt"> inhalt der seite </div></body>
Antwort 6 von ika1987
hi
@rfb
wenn ich das so mache wir du es schreibst, dann gibt es der IE richtig aus !!!
Allersdings macht der FF das nicht, dann sind alle textareas (wo der inhalt der einzelnen guestbook einträge vorhanden ist) ca. 3-5 Pixel vom linken rand entfernt, und nicht in der mitte zentriert.
danke
ika
@rfb
wenn ich das so mache wir du es schreibst, dann gibt es der IE richtig aus !!!
Allersdings macht der FF das nicht, dann sind alle textareas (wo der inhalt der einzelnen guestbook einträge vorhanden ist) ca. 3-5 Pixel vom linken rand entfernt, und nicht in der mitte zentriert.
danke
ika
Antwort 7 von rfb
das ist nun ein bisschen schwer nachzuvollziehen - ohne deinen Quellcode zu kennen. Wie wäre es mit einem Link oder dem Quelltext hier zur Einsicht?
Antwort 8 von Dixi
Hier ein Beispiel mit einer zentrierten Tabelle.
<head>
<style type="text/css">
<!--
table.aussen { width:100%; height:100%; }
div.innen { margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
text-align:center;
vertical-align:middle; }
.text { font-size:20pt;
color:#0000FF;
font-family:Helvetica, Verdana, Arial; }
.text1 { font-size:16pt;
color:#000000;
font-family:Helvetica, Verdana, Arial; }
-->
</style>
</head>
<body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000" bgcolor="#E0F4FF">
<table class="aussen" border="0" cellpadding="0" cellspacing="0" summary="Wünsche">
<tr>
<td>
<div class="innen">
<table width="470" height="200" border="0" summary="zur Startseite">
<tr valign="top">
<td class="text" colspan="2">
<p class="text1">Bitte, etwas geduld!</p>
<p class="text">Seite wird geladen ...</p>
</td>
</tr>
<tr>
<td height="40" align="left" >
<font size="2" face="VERDANA,ARIAL,HELVETICA"><b>Wenn sie nicht automatisch weitergeleitet werden,<br> klicken Sie bitte hier! </b></font>
</td>
<td align="left"> </td>
</tr>
</table>
</div>
</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
<!--
table.aussen { width:100%; height:100%; }
div.innen { margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
text-align:center;
vertical-align:middle; }
.text { font-size:20pt;
color:#0000FF;
font-family:Helvetica, Verdana, Arial; }
.text1 { font-size:16pt;
color:#000000;
font-family:Helvetica, Verdana, Arial; }
-->
</style>
</head>
<body text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000" bgcolor="#E0F4FF">
<table class="aussen" border="0" cellpadding="0" cellspacing="0" summary="Wünsche">
<tr>
<td>
<div class="innen">
<table width="470" height="200" border="0" summary="zur Startseite">
<tr valign="top">
<td class="text" colspan="2">
<p class="text1">Bitte, etwas geduld!</p>
<p class="text">Seite wird geladen ...</p>
</td>
</tr>
<tr>
<td height="40" align="left" >
<font size="2" face="VERDANA,ARIAL,HELVETICA"><b>Wenn sie nicht automatisch weitergeleitet werden,<br> klicken Sie bitte hier! </b></font>
</td>
<td align="left"> </td>
</tr>
</table>
</div>
</td></tr>
</table>
</body>
</html>
Antwort 9 von rfb
dies ist eher ein wunderschönes Beispiel wie man es nicht machen sollte:
verschachteltes Tabellenlayout, meta-refresh-Weiterleitung (steht zwar nicht im Code, aber sonst hätte der Inhalt keinen Sinn), alle möglichen veralteten Layout-Attribute im HTML, font-tag und oben drauf eine kleine Prise CSS.
verschachteltes Tabellenlayout, meta-refresh-Weiterleitung (steht zwar nicht im Code, aber sonst hätte der Inhalt keinen Sinn), alle möglichen veralteten Layout-Attribute im HTML, font-tag und oben drauf eine kleine Prise CSS.
Antwort 10 von Dixi
... aber es funktioniert wenigstens mit den gängigen Browsern und das Bemängelte von @rfb kann man auch hinbekommen.