nicht angemeldet
Lieber Klaus,
ich will lediglich 3 DIVs untereinander mittig zentrieren.
und wer hindert Dich daran?
Die Höhe der DIV's soll sich automatisch immmer dem Inhalt anpassen.
P'fui Teu'fel! Im'mer diese Ap'ostrophe, wo sie nicht hingehören! Arrrrgh!
Wieso muss ich <center> anwenden trotz text-align:center?
Du darfst es laut Deinem verwendeten Doctype überhaupt nicht! <center>-Elemente existieren in HTML nicht!
Und wieso müssen die 3 DIVs extra nochmal in ein DIV eingefasst werden, weil sie sonst auch nicht mittig plaziert werden?
Das müssen sie überhaupt nicht. Du machst irgendetwas irgendwo unnötig umständlich.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
Das ist suboptimal. Vergib einen Titel.
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
Jetzt wird es spannend...
body{margin:15px;text-align:center}
</style>
War das schon alles? Und wozu verwendest Du dann CSS??? Ich ahne schon, dass Du überall inline-styles verwendest. Das solltest Du nicht.
</head>
<body><center>
Hau wech dat <center>-Ding!
<div style="position:relative;width:900px">
Was verstehst Du von relativer Positionierung? Für Dein Problem ist sie nicht relevant.
<div style="position:relative;width:900px;background:red;float:left">bla<p>bla<p>bla<p>bla<p>bla<p>bla<p>bla<p>bla<p>bla</div>
Nein, kein Wunder, dass nicht das passiert, was Du gerne hättest. Das geht anders. Und in XHTML musst Du die schließenden Tags immer dazu notieren. Code der Art <p>...<p>...<p> ist nicht valide. Wenn Dein Code nicht valide ist, dann muss der Browser raten. Dass ergibt fast zwangsläufig eine fehlerhafte Darstellung. Nutze den Validator des W3C um Deinen HTML-Code auf formale Richtigkeit zu prüfen, bevor Du an irgendwelche Darstellungsfehler gehst! Sonst versuchst Du eine fehlerhafte Darstellung zu korrigieren, die auf Deinen fehlerhaften und daher vom Browser erratenen Code zurückzuführen ist.
<div style="position:relative;width:900px;background:yellow;float:left">blabla<p>blabla<p>bla<p>bla<p>bla<p>bla<p>bla<p>bla</div>
Und so weiter, und so weiter.
Im folgenden Beispiel siehst Du, dass man für Dein Vorhaben den div-Elementen sinnvoller Weise besser eine Klasse vergibt, anstatt sie inline direkt zu stylen. Später solltest Du den <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=CSS-Code in eine externe Datei auslagern>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Zentrierte Divs</title>
<style type="text/css">
div.anzeigebox {
margin: 1em auto 20px auto;
padding: 10px 20px;
background: #c0c0ff;
border: 1px solid #6060ff;
width: 75%;
}
</style>
</head>
<body>
<h1>Beispiel zentrierter Div-Elemente</h1>
<p>Folgende drei Boxen sollten zentriert dargestellt werden.</p>
<div class="anzeigebox">
<h2>Erste Unter-Überschrift</h2>
<p>Erster Textabsatz</p>
</div>
<div class="anzeigebox">
<h2>Zweite Unter-Überschrift</h2>
<p>Zweiter Textabsatz</p>
</div>
<div class="anzeigebox">
<h2>Dritte Unter-Überschrift</h2>
<p>Dritter Textabsatz</p>
</div>
<p>Ende der Demo.</p>
</body>
</html>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)