3 DIVs untereinander und mittig zentriert
3 
Felix Riesterer
0 0 0 Felix Riesterer
0
3 DIVs untereinander und mittig zentriert
Hallo,
ich will lediglich 3 DIVs untereinander mittig zentrieren.
Die Höhe der DIV's soll sich automatisch immmer dem Inhalt anpassen.
Wieso muss ich <center> anwenden trotz text-align:center?
Und wieso müssen die 3 DIVs extra nochmal in ein DIV eingefasst werden, weil sie sonst auch nicht mittig plaziert werden?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body{margin:15px;text-align:center}
</style>
</head>
<body><center>
<div style="position:relative;width:900px">
<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>
<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>
<div style="position:relative;width:900px;background:green;float:left">bla<br>bla</div>
</div>
</center></body></html>
-
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:)-
padding: 10px 20px;
wenn man das aus "designgründe" weglässt, sind die boxen aber nicht direkt untereinander! :)
-
hi,
padding: 10px 20px;
wenn man das aus "designgründe" weglässt, sind die boxen aber nicht direkt untereinander! :)Und auf was stützt sich "deine behauptung"?
grüße
-
Liebe nachteule,
padding: 10px 20px;
wenn man das aus "designgründe" weglässt, sind die boxen aber nicht direkt untereinander! :)
hast Du wieder mal keinen Browser, sondern den IE eingesetzt ...? Typischer Anfängerfehler.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo,
habe gerade auch mal die Paddings entfernt und bei mir sind da jetzt auch Lücken zwischen den einzelnen Boxen.
Getestet mit FireFox, nicht IE!
Liebe nachteule,
padding: 10px 20px;
wenn man das aus "designgründe" weglässt, sind die boxen aber nicht direkt untereinander! :)
hast Du wieder mal keinen Browser, sondern den IE eingesetzt ...? Typischer Anfängerfehler.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
hi
padding: 10px 20px;
wenn man das aus "designgründe" weglässt, sind die boxen aber nicht direkt untereinander! :)
padding ist für den _innenabstand_ zuständig und margin für den _aussenabstand_.
Entfernt mal margin und schaut was dann passiert.cu
-
padding ist für den _innenabstand_ zuständig und margin für den _aussenabstand_.
Entfernt mal margin und schaut was dann passiert.Lol, die Blocks sind dann nicht mehr zentriert! Aber untereinander...
Also der HTML-Code von Felix ist wohl nur ein Hack...
-
hi
Lol, die Blocks sind dann nicht mehr zentriert! Aber untereinander...
Also der HTML-Code von Felix ist wohl nur ein Hack...
nein ist es _nicht_. aus zwei gründen:
1. es ist _css_
2. siehe untenmargin: 0px auto 0px auto; liefert das gewünschte ergebnis.
^ ^ ^ ^
oben rechts unten linksoder margin: 0px auto; ist dasselbe, um es etwas kürzer zu schreiben.
^ ^
oben/unten seitehier ist noch eine sehr interessante seite. zuerst _lesen_ und _begreifen_ dann meckern. http://de.selfhtml.org/css/eigenschaften/randabstand.htm
cu
-
-
-
-