nicht angemeldet
Div mit Position: absolute zentrieren
Hallo
Ich möchte gerne 2 Divs (beide mit Position: absolute) horizontal zentrieren. Nach einigem Googlen war das allgemeine Echo: geht nicht. Allerdings bin ich auf der SelfHTML Seite dann auf eine Möglichkeit gestossen.
Die habe ich ausprobiert und siehe da: funktioniert eigentlich auf allen Browsern die ich bei mir installiert habe (IE 7, Firefox 1.5.0.11, Opera 8.01).
Frage:
Hat jemand noch Erfahrungen mit dieser Lösung auf älteren Browsern (IE 6, IE auf Mac, Opera 7 usw...) bei denen es mit dieser Variante eventuell Probleme geben könnte? Oder ist diese Lösung auch für ältere Browserversionen OK?
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#test {
position: absolute;
left: 50%;
width: 400px;;
margin-left: -200px;
top: 10px;
z-index: 1;
}
#test2 {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;
top: 355px;
z-index: 2;
}
-->
</style>
</head>
<body>
<div id="test2">OBERER DIV CONTAINER</div>
<div id="test"><img src="flames.jpg" alt="" width="400" height="335"></div>
</body>
</html>
-
Hallo,
die Methode mit position:absolute ist wohl noch ein eher zuverlässiger
Weg, vgl. auch Center Div oder diese Lösung mit position:relative , die
in Safari (im Gegensatz zu absolute) nicht wie gewünscht funktioniert.Grüsse
Cyx23 -
hi,
Hat jemand noch Erfahrungen mit dieser Lösung auf älteren Browsern (IE 6, IE auf Mac, Opera 7 usw...) bei denen es mit dieser Variante eventuell Probleme geben könnte? Oder ist diese Lösung auch für ältere Browserversionen OK?
Nein, im Gegenteil - sie macht _auch_ in _neueren_ Browsern Probleme.
Wenn die Anzeigefläche für die Darstellung der Elemente nicht ausreicht, dann beförderst du sie mit dieser Kombination von absoluter Positionierung und negativen Margins nämlich links und/oder oben aus dem sichtbaren Bereich, so dass dann Teile des Inhalts ggf. gar nicht mehr erreichbar sind.Also lass' den Unfug bitte bleiben - und lerne stattdessen mit absoluter Positionierung umzugehen.
Wenn du nämlich erst mal berücksichtigst, dass diese sich durchaus relativ verhalten kann - dann ist das mittels eines weiteren, zentrierten Containers eigentlich kein Problem mehr.Vorher überlege dir allerdings bitte noch, ob du absolute Positionierung wirklich brauchst - ich meine wirklich brauchst, nicht zu brauchen glaubst.
Anhand deines Beispiels ist eine wirkliche Notwendigkeit jedenfalls kaum ersichtlich.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Vorher überlege dir allerdings bitte noch, ob du absolute Positionierung wirklich brauchst - ich meine wirklich brauchst, nicht zu brauchen glaubst.
Ich brauche die absolute Positionierung hauptsächlich wegen Google. Ich habe nähmlich eine Seite oben mit Logo, Flash Banner, Navigation und dann Text.
Kann sein, dass ich mich irre, aber ich glaube, je früher im Quellcode der hauptsächliche Text erscheint, desto besser die Platzierung im Google.
Benutze ich nun relative Positionierung, kommt der Text entsprechend spät im Quellcode, deshalb wollte ich mit absoluter Positionierung diesen Div ganz nach oben holen.
Hast Du eventuell eine URL, wo ich ein Beispiel mit einem weiteren Container sehe? Danke!
-
hmm, habs glaube ich selbst raus, wäre diese Lösung besser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#container {
margin: auto;
width: 400px;
}
#test {
position: absolute;
width: 400px;;
top: 10px;
z-index: 1;
}
#test2 {
position: absolute;
width: 400px;
top: 355px;
z-index: 2;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="test2">OBERER DIV CONTAINER</div>
<div id="test"><img src="flames.jpg" alt="" width="400" height="335"></div>
</div>
</body>
</html>
-
-