Zentriertes "Elterndiv" mit mehreren divs innen - wo ist der fehler?

cyan · 15. März 2004

Hallo zusammen,

es ist zum Verzweifeln, ich find einfach den Fehler nicht

Mein Ziel:

a) das Div mit Id "eltern1" soll zunächst horizontal zentriert werden. Das funktioniert interessanterweise allerdings nur, wenn man ein übergeordnetes div (Id bei mir "eltern" ) mit der Anweisung text-algin:center einfügt, gekoppelt mit der Anweisung margin-left:auto; margin-right:auto in elter1 ... siehe dazu: http://selfforum.teamone.de/archiv/2003/3/41010/#m224376

b) die divs mit den Ids: eins, zwei, drei, vier, fuenf sind in dem div mit der Id "eltern1" eingebettet und sollen eigentlich punktgenau zusammengefügt ein Rechteck geben

leider klappt das überhaupt nicht und ich komm nicht auf meinen Fehler. Positionsangaben beziehen sich doch immer nur auf das direkt übergeordnete Element, oder?

vielleicht kommt ihr ja dahinter, hier der html text:

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

<head>
<title>Neue Seite 2</title>

<link rel="stylesheet" type="text/css" href="file.css">

</head>

<body style=" background: #000000">

</body>

</html>

und hier der css text (extern):

#eltern { text-align:center}

#eltern1 { margin-left:auto; margin-right:auto }

#eins{ position:absolute;
top:100px;

margin: 0;

width:169px;
height:101px;
border: dotted 1pt }

#zwei{position:absolute;
top:100px;
left:169px;

width:632px;
height:101px;
border: dotted 1pt}

#drei{ position:absolute;
top:201px;
margin: 0;
width:169px;

height:382px;
border: dotted 1pt}

#vier{position:absolute;
top:201px;
left:169px;

margin: 0;

width:632px;
height:382px;
border: dotted 1pt}

#fuenf{position:absolute;
top:582px;

margin: 0;

width:801px;
height:119px;
border: dotted 1pt}

chrisch · 15. März 2004

Schreib bei #eltern1 noch text-align:left mit rein, und schreib statt dem auto bei #eltern{margin-left:auto ...} -10, dann fängt es genau am linken Rand an.
Jetzt schauts fast perfekt aus

EDIT: Hm, jetzt ist es aber dummerweise nicht mehr zentriert...mal schaun, vielleicht fällt mir nochwas ein

XNeo · 26. März 2004

Re: Zentriertes "Elterndiv" mit mehreren divs innen - wo ist der fehler?

Zitat

Original geschrieben von cyan
Positionsangaben beziehen sich doch immer nur auf das direkt übergeordnete Element, oder?

Positionsangaben beziehen sich auf das übergeordnete positionierte Element. Sobald Du einem der Eltern-DIVs eine Positionsangabe hinzufügst, klappt das zusammenpuzzeln der anderen DIVs auch. Die Zentrierung über Margin-Auto klappt deswegen nicht, weil das eltern1-DIV die ganze Seitenbreite einnimmt (es funktioniert also, aber man sieht's nicht ;)). Wenn du die Breite beschränkst, klappt's auch mit der Zentrierung - das DIV "eltern" ist überflüssig.

Ergebnis:

HTML

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


<head>
<title>Neue Seite 2</title>
<style type="text/css">
#eltern1 { position:relative; width:810px; margin-left:auto; margin-right:auto; }


#eins{ position:absolute;
top:100px;


margin: 0;


width:169px;
height:101px;
border: dotted 1pt }




#zwei{position:absolute;
top:100px;
left:169px;




width:632px;
height:101px;
border: dotted 1pt}




#drei{ position:absolute;
top:201px;
margin: 0;
width:169px;


height:382px;
border: dotted 1pt}




#vier{position:absolute;
top:201px;
left:169px;


margin: 0;




width:632px;
height:382px;
border: dotted 1pt}




#fuenf{position:absolute;
top:582px;


margin: 0;


width:801px;
height:119px;
border: dotted 1pt}
</style>


</head>


<body style=" background: #ffffff">


<div id=eltern1>
<div id=eins></div>
<div id=zwei></div>
<div id=drei></div>
<div id=vier></div>
<div id=fuenf></div>
</div>


</body>


</html>

Alles anzeigen

Gruß,

Zentriertes "Elterndiv" mit mehreren divs innen - wo ist der fehler?

Jetzt mitmachen!

Teilen