Content zentrieren, aber Text nicht @ tutorials.de: Tutorials, Forum & Hilfe

iTalk · 05.06.10 20:28

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>

Wie kann ich das bewerkstelligen? Danke!

Maik · 05.06.10 20:35

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;
[B]margin: auto;
text-align: left;[/B]
}
 
[B]#content img {
display: block;
margin: auto;
}[/B]

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

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

mfg Maik

iTalk · 05.06.10 20:39

Hat geklappt, Danke!

Edit: Halt, jetzt ignoriert das Headerbild aber das

margin-top: 20px;

.

Maik · 05.06.10 20:45

Zitat von iTalk

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:

Code 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

iTalk · 05.06.10 20:47

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

Maik · 05.06.10 21:00

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

Code 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

iTalk · 05.06.10 21:04

Ich kann nur nochmal dick DANKE sagen.

Maik · 05.06.10 21:06

Und ich fett Bitte

mfg Maik

Maik · 05.06.10 21:19

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 · 05.06.10 21:27

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

iTalk · 05.06.10 22:10

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>
<title>Testseite</title>

<style type=text/css>

#content {
background-color: #fff;
width: 750px;
height: variable;
border: none;
margin: 50px auto 0;
text-align:left;
padding-top: 5px;
border: 3px solid #2e6fac;
}

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

#contenttext {
width: 650px;
padding-left: 26px;
padding-bottom: 26px;
font-size: 8pt;
}

#Navi_Feld {
text-align:left;
font-family:Tahoma;
font-weight:bold;
font-size:15px;
width: 973px;
height:34px;
background: #XXXXXX;
color: #646464;
padding-top: 12px;
padding-left: 25px;
}

#Navi_Feld a{
font-family:Verdana;
font-weight:bold;
font-size:13px;
color: #6f6f6f;
}

#Navi_Feld a:hover{
font-family:Verdana;
font-weight:bold;
font-size:13px;
color: #292929;
}

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: url(http://discreated.de/img/service/designs/bg.jpg); font-family: arial;">

<center><div id="content"><img style="margin-top: 20px;" src="test_head.jpg">

<div id="Navi_Feld">
<a href="http://www.6p-designs.de.tl/home.htm"><img border="none" src="home.png">Home</a> 

<a href="http://www.6p-designs.de.tl/designs.htm">Designs</a> 

<a href="http://www.6p-designs.de.tl/guestbook.htm">Guestbook</a> 

<a href="http://www.6p-designs.de.tl/about.htm">About Us</a></div>

<div id="contenttext">TEST</div>

</center>

</div>

</body>
</html>

Maik · 05.06.10 22:23

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.

HTML-Code:

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

Code css:

#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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

XOR funktioniert mit Text-, aber nicht Binärdateien

Frame zentrieren.. aber wie?

Text wir in der .fla korrekt angzeigt aber im .swf nicht

Text-Block von dem User vestecken aber vom Screenreader nicht.

swf zentrieren, aber wie?

Stichworte

E-Mail:

Abonnieren Abbestellen