nicht angemeldet
Zentriertes div mit mehreren divs innen - wo ist der fehler?
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://forum.de.selfhtml.org/archiv/.../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">
<div id=eltern>
<div id=eltern1>
<div id=eins></div>
<div id=zwei></div>
<div id=drei></div>
<div id=vier></div>
<div id=fuenf></div>
</div>
</div>
</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}
-
hi,
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
was soll daran verwunderlich sein?
das ist die gängigste methode, um nach heutigem stand der technik horizontale zentrierung zu erreichen.
allerdings formatiert man idR. direkt den body mit text-align:center, anstatt ein ansonsten unnötiges zusätzliches div einzufügen.leider klappt das überhaupt nicht und ich komm nicht auf meinen Fehler. Positionsangaben beziehen sich doch immer nur auf das direkt übergeordnete Element, oder?
nein.
absolute positionierung bezieht sich auf die koordinaten des elternelementes, dessen position vom defaultwert static _abweicht_.
wenn es kein solches gibt, dann orientiert sie sich am viewport.gruss,
wahsaga-
hi,
zunächst vielen dank, dass du dir kurz zeit genommen hast :)ich versuch gerade deine antwort zu verstehen:
"absolute positionierung bezieht sich auf die koordinaten des elternelementes"die koordinaten kenne ich doch leider nicht, da das elternelement zentriert wird, was wiederum von der auflösung abhängt. wie hast du das gemeint bzw. was genau wäre die lösung?
nur kurz: was meinst du mit viewpoint, bzw. was ist der defaulwert und wie wird er verändert?
gruß matthias
-
die text-align anweisung ist aus meiner sicht verwunderlich, weil sich sich doch eigentlich auf inline-elemente bezieht und nicht auf blockelemente, oder liege ich damit falsch?
-
hi,
die text-align anweisung ist aus meiner sicht verwunderlich, weil sich sich doch eigentlich auf inline-elemente bezieht und nicht auf blockelemente, oder liege ich damit falsch?
nein, damit liegst du nicht falsch.
lediglich der IE liegt dabei falsch: zentrierung über das setzen der seitlichen margins auf auto beherrscht er in den 5er-versionen gar nicht, in der 6er nur im compliant mode.
dafür interpretiert er aber text-align falsch, nämlich auch für block level elemente - und deshalb kann man dies hier gut als workaround für seine margin:auto-schwäche einsetzen.
gruss,
wahsaga
-
-
Moin,
ähnliches wie Du habe ich auch lange versucht, bis ich begriffen habe wie das mit den Elternelementen funktioniert bzw. nicht funktioniert.Diese Angabe #eins{position:absolute;top:100px;} bezieht sich eben nicht, wie man meinen könnte auf die Koordinaten von #eltern1 sondern auf den ominösen "viewpoint".
Wenn Du #eins innerhalb von "#eltern1" positionieren möchtest, muss "#eltern1" auch ein "position" bekommen.Gruß, Jan
-
das ist aber schlecht, weil die position kann ich ja leider nicht absolut angeben wg der zentrierung...
heißt das, dass ich vor einem unlösbaren problem stehe?
-
Moin,
das ist aber schlecht, weil die position kann ich ja leider nicht absolut angeben wg der zentrierung...
heißt das, dass ich vor einem unlösbaren problem stehe?
Nach meinen "Experimenten" mit absoluter, relativer und sonstwie-Positionierung habe ich mich etwas mehr mit dem float-Element beschäftigt, vielleicht hilft Dir das auch weiter.
Gruß, Jan
-
hi,
das ist aber schlecht, weil die position kann ich ja leider nicht absolut angeben wg der zentrierung...
kein mensch verlangt, dass du dem elternelement eine absolute position gibst.
lies dir noch mal durch, was ich vorher schrieb:
"das jenige elternelement, dessen positionierung vom default-wert static _abweicht_"abweichen tut sie z.b. dann, wenn du dem elternelement position:relative; verpasst - die ändert idR. nichts an seiner lage (werte für top/left/right/bottom brauchst du nicht zu setzen) - aber wenn du seine kindelemente jetzt absolut positionierst, werden sie sich an seinen koordinaten ausrichten.
sieh dir auch noch mal das beispiel unter http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position an, dort findest du genau dieses verhalten.
gruss,
wahsaga-
wahsaga, du bist mein persönlicher held - funktioniert alles wunderbar :) vielen, vielen dank!!
-
-
-
-
-