Content zentrieren, aber Text nicht

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

HTML:

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

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

Content zentrieren, aber Text nicht

iTalk

Mitglied

Maik

Neue Beiträge