# Content zentrieren, aber Text nicht



## iTalk (5. Juni 2010)

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



Wie kann ich das bewerkstelligen? Danke!


----------



## Maik (5. Juni 2010)

Hi,

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


```
#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:


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


mfg Maik


----------



## iTalk (5. Juni 2010)

Hat geklappt, Danke!

Edit: Halt, jetzt ignoriert das Headerbild aber das 





> margin-top: 20px;


.


----------



## Maik (5. Juni 2010)

iTalk hat gesagt.:


> Edit: Halt, jetzt ignoriert das Headerbild aber das .



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


```
#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


----------



## iTalk (5. Juni 2010)

Perfekt, ich weiß gar nicht, was ich sagen soll. Danke!


----------



## Maik (5. Juni 2010)

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 :-(


```
#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


----------



## iTalk (5. Juni 2010)

Ich kann nur nochmal dick DANKE sagen.


----------



## Maik (5. Juni 2010)

Und ich fett *Bitte* 

mfg Maik


----------



## Maik (5. Juni 2010)

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


----------



## iTalk (5. Juni 2010)

Man macht ja eigentlich keine doppelten Antworten, aber: vielen Dank für deine Hilfe!


----------



## iTalk (5. Juni 2010)

Entschuldigung, aber ich habe nochmal ein kleines Problem. Ich möchte ein kleines Häuschen als Grafik vor dem Homelink, aber er macht mir die Grafik in eine Zeile und die restliche Navigation dann in die nächste:



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


----------



## Maik (5. Juni 2010)

Jo, meine eingangs empfohlene Regel gilt in dieser allgemein gehaltenen Form des Nachfahren-Selektors nun natürlich für alle  im DIV *#content* enthaltenden <img>-Elemente ;-)

Ergo spezifizieren wir sie explizit und ausschließlich für das Headerbild mittels eines ID-Bezeichners, da dieses <img>-Element mit der Headergrafik nur einmal im Dokument existiert, und schließen so alle übrigen Grafikelemente von dieser CSS-Formatierung aus.


```
<img id="header" style="margin-top: 20px;" src="test_head.jpg" alt="">
```


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

Außerdem hatte ich dir vorhin in meiner ersten Antwort geraten, das <center></center>-Element aus dem HTML-Code zu entfernen, da es a) zum Zentrieren nicht (mehr) benötigt wird, und b) du es in dieser Form entweder an der falschen Stelle im Markup öffnest oder beendest.

Schön wäre es, wenn du zukünftig in deinen Beiträgen die Highlight-Tags zum Auszeichnen deines Quellcodes verwendest (siehe zum Vergleich meine Beiträge mit Quellcode-Angaben), anstelle des Zitat-Tags - vielen Dank.

mfg Maik


----------

