Content zentrieren, aber Text nicht

iTalk

iTalk

Mitglied
Hallo. Ich bastle gerade an meiner ersten eigenen Homepage und ich habe folgendes Problem:
Ich möchte, das der weiße Content-Bereich zentriert ist, das Headerbild auch aber der Text nicht.

Der Code:

<html>
<head>
<title>Testseite</title>

<style type=text/css>

#content {
background-color: #fff;
margin-top: 50px;
width: 750px;
height: 1000px;
border: none;
}

a{outline:none;color:#6b6b6b; font-size: 12px; text-decoration: none;}
a:hover {color: #888888; font-size: 15px; text-decoration: none;}
a:link {color: #6b6b6b; font-size: 12px; text-decoration: none;}
a:active {color: #888888; font-size: 12px; text-decoration: none;}
a:visited {color: #6b6b6b; font-size: 12px; text-decoration: none;}



</style>

</head>

<body style="background: #c1c1c1; font-family: arial;">

<center><div id="content"><img style="margin-top: 20px;" src="test_head.jpg"><br/>DIESER TEXT SOLL NICHT ZENTRIERT SEIN!!</center>

</div>

</body>
</html>
Zum Vergrößern anklicken....

Wie kann ich das bewerkstelligen? Danke!
 
Hi,

das falsch geöffnete bzw. geschlossene <center> </center>-Element entfernst du gänzlich aus dem Markup, und ergänzt dein Stylesheet folgendermaßen:

Code: 
#content {
background-color: #fff;
margin-top: 50px;
width: 750px;
height: 1000px;
border: none;
margin: auto;
text-align: left;
}

#content img {
display: block;
margin: auto;
}

Damit die IE-Familie die beiden margin-Regeln zum horizontalen Zentrieren wie gewünscht interpretiert, ist es zusätzlich erforderlich, für das HTML-Dokument einen Doctype anzugeben, der die Browser in den standardkonformen Modus schaltet - beispielsweise hiermit:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">


mfg Maik
 
iTalk hat gesagt.:
Edit: Halt, jetzt ignoriert das Headerbild aber das .
Zum Vergrößern anklicken....

Verzichte hier auf die margin-top-Regel für das Grafikelement, und deklarier stattdessen für #content:

CSS: 
#content {
background-color: #fff;
margin-top: 50px;
width: 750px;
height: 1000px;
border: none;
margin: auto;
text-align: left;
padding-top: 20px; /* oberer Innenabstand */
}

mfg Maik
 
Ich leg noch eine Schüppe nach, damit auch weiterhin margin-top:50px für #content greift, und diese Angabe nicht von meinem nachfolgenden Lösungsvorschlag überschrieben wird ;-)

Hab die existierende Regel vorhin beim Überfliegen deines Codes überhaupt nicht bewußt wahrgenommen :-(

CSS: 
#content {
background-color: #fff;
/*margin-top: 50px;*/ /* auskommentiert = kann von dir aus dem Regelblock entfernt werden */
width: 750px;
height: 1000px;
border: none;
margin: 50px auto 0; /* erster Wert steht für oben, zweiter Wert für links u. rechts, dritter Wert für unten */
text-align: left;
}


mfg Maik
 
Als Zugabe hab ich eben noch deinen Tippfehler ("texr" anstatt "text") in den Stichworten berichtigt, damit es zukünftig auch zu einem erfolgreichen Suchergebnis führt ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück