Supportnet Computer
Planet of Tech

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_

hai,
schau dir hier mal beispiel 1 an
http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm

cu

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

Antwort 3 von derpfleger

Eine gute Erklärung anhand eines Beispieles findest du zb auch HIER .

Gruß Heiko

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

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{ 
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

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>

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.

Antwort 10 von Dixi

... aber es funktioniert wenigstens mit den gängigen Browsern und das Bemängelte von @rfb kann man auch hinbekommen.