nicht angemeldet
Problem: zentrierte, überlappende Elemente
Hallo,
ich bitte um Hilfe bei folgendem Problem:
Ich will mehrere Elemente - sagen wir der Einfachheit halber <div>s - übereinander poitionieren, aber gleichzeitig mittig in Bezug auf ein Elternelement, zB body oder ein übergeordnetes div. Hier mal eine quick'n'dirty Grafik der Sache:
<img src="http://www.exile-myst3.de/pics/divs.gif" border="0" alt="">
Das rote div ist bezüglich body zentriert, und hat height 100% -
Die grünen divs sind ebenfalls bezüglich body zentriert, liegen (im z-index-Sinne) über dem roten und sollen aber ansonsten im normalen "Fluß" sein, also wenn man mehrere hat, eins unter (im Sinne y-Achse) dem anderen, so als wäre das rote gar nicht da.
Ist das überhaupt möglich? ich habe x Varianten durchgespielt, aber keine hat geklappt und mir raucht der Schädel. Als kleine Extra-Erschwernis soll das ganze in XHTML 1.1 geschrieben sein und sowohl im Standardkonformen Mozilla-/IE6-Modus laufen, als auch im Quirk-mode, also unter IE 5. Vielleicht hat ja jemand eine Idee?
Danke schonmal,
Nils
-
hallo Niels
Ist das überhaupt möglich? ich habe x Varianten durchgespielt, aber keine hat geklappt und mir raucht der Schädel.
was klappt denn konkret nicht? rot unter grün, grün untereinander, zentrierung,...?
Frank
-
Hallo Nils,
<img src="http://www.exile-myst3.de/pics/divs.gif" border="0" alt="">
Ich würde da spontan mit negativen Margins arbeiten. Ich habe mal ebenso quick
und ebenso dirty was zusammengehauen:http://www.tepasse.org/selfraum/rot-gruene-leiter.html
Ist aber in den meisten Browsern noch ungetestet.
Als kleine Extra-Erschwernis soll das ganze in XHTML 1.1 geschrieben sein
Mir würde XHTML 1.0 Strict genügen. Such' mal hier im Archiv nach XHTML 1.1
und MIME - da finden sich mehrere Stellen an denen gesagt wird, daß XHTML 1.1
eigentlich mit dem und dem Mimetyp ausgeliefert werden soll, aber so ziemlich
alle Browser diesen noch nicht unterstützen.- Tim
--
Ich weiß nie, was für eine Signatur ich nehmen sollte.-
Hi Tim,
http://www.tepasse.org/selfraum/rot-gruene-leiter.html
Ist aber in den meisten Browsern noch ungetestet.
Ertsmal 1K Dank - Das ist schonmal ne ziemlich großer Schritt für mich. Ich poste mal den entscheidenden Teil deines codes:
<style type="text/css">
html {
background-color:white;
color:black;
}
body {
display;block;
background-color:red;
color:black;
width:300px;
height:auto;
margin:0em auto;
padding:10px 0px;
}
.gruen {
background-color:green;
color:black;
height:100px;
width:350px;
margin:25px -25em 25px -25px;
padding:0px;
}
</style></head><body>
<div class="gruen">blub</div>
<div class="gruen">blub</div>
<div class="gruen">blub</div>
</body>Fragen/Bemerkungen meinerseits:
Du hast einen "Kunstgriff" verwendet, indem du das rote als body genommen hast - aber geht das auch, wenn es ein eigenes div ist, u.U. wenn die ganze Konstuktion in weitere divs verschachtelt ist? Mir ist es jedenfalls nicht gelungen... Jedenfalls hast du die ganze z-index/position relative/absolute-Problematik elegant umgangen.
Noch ein Kunstgriff: die grünen Sprossen sind nicht per margin zentriert, sondern dadurch, dass die Breite der Blöcke bekannt ist - clever! Ich fürchte, eine von absoluten Breiten unabhängige Lösung wird kaum möglich sein - oder?
Warum schreibst du bei den grünen -25em als Abstand nach rechts?
In meinem Moz klappt's gut, der IE scheint brav in compliant mode zu schalten und stellt es auch richtig dar. Der IE 5 hingegen macht das gesamte Fenster rot und klebt die drei Sprossen nach links. Frisst wohl die Breitenangaben zu body grundsätzlich nicht?
Ich würde gerne deine Lösung einsetzen, aber jetzt steck ich in dem Dilemma - wenn's im IE5 nicht geht, kann ich es praktisch nicht machen.
Thx nochmal,
Nils-
Hallo Nils,
Du hast einen "Kunstgriff" verwendet, indem du das rote als body genommen
hast - aber geht das auch, wenn es ein eigenes div ist, u.U. wenn die ganze
Konstuktion in weitere divs verschachtelt ist? Mir ist es jedenfalls nicht
gelungen...Mir auch nicht, schlimmer noch, wenn man es als div umsetzt, schneidet der
Internet Explorer 6 plötzlich die überstehenden Elemente ab.Noch ein Kunstgriff: die grünen Sprossen sind nicht per margin zentriert,
sondern dadurch, dass die Breite der Blöcke bekannt ist - clever! Ich
fürchte, eine von absoluten Breiten unabhängige Lösung wird kaum möglich
sein - oder?Die Breite der grünen Sprossen ist von der Breite des roten Elternelementes
abhängig. Da divs Blockelemente sind und sich hoffentlich über die ganze
Breite spannen muß nur noch der margin dazuaddiert werden und wir haben die
Breite.Warum schreibst du bei den grünen -25em als Abstand nach rechts?
Wie gesagt, es war eine Quick-and-Dirty-Version. ;-)
Ich würde gerne deine Lösung einsetzen, aber jetzt steck ich in dem Dilemma -
wenn's im IE5 nicht geht, kann ich es praktisch nicht machen.Ich würde es lassen. Negative Margins sind irgendwo immer ein riskantes Thema
und in lausigen Browsern wie dem IE5 oder schlimmeren Varianten weiß man nie
genau, was die nun daraus machen.Also eine andere Lösung. Wofür brauchst Du den roten Bereich? Soll da
unbedingt Inhalt rein? Muß der das Elternelement der grünen Sprossen sein?Ansonsten würde ich etwas tricksen. Um den Effekt zu erreichen würde ich
eine 1 Pixel hohe Linie als Bild erstellen und diese als Hintergrundbilder
zentriert und nur vertikal wiederholend in die Seite einbinden. So erhält
man eine rote Spalte im Hintergrund über die man dann bequem die zentrierten
Sprossen legen kann und muß sich nicht mit irgendeinem Elternelement
rumärgern.Aber paßt das irgendwie in Deine Seite hinterher?
- Tim
--
Ich weiß nie, was für eine Signatur ich nehmen sollte.-
Hi Tim,
aber geht das auch, wenn es ein eigenes div ist, u.U. wenn die ganze
Konstuktion in weitere divs verschachtelt ist? Mir ist es jedenfalls nicht
gelungen...Mir auch nicht, schlimmer noch, wenn man es als div umsetzt, schneidet der
Internet Explorer 6 plötzlich die überstehenden Elemente ab.Genau, kurz nach meinem letzten posting war ich dann auch an dieser Stelle - letztlich konnte ich das schon mit div statt body hinkriegen, aber im IE5 nicht breiter als das Elternelement, wie du sagst. (im IE 6 ging's bei mir) Auch overflow:visible-Experimente haben nichts gebracht.
Ich würde gerne deine Lösung einsetzen, aber jetzt steck ich in dem Dilemma -
wenn's im IE5 nicht geht, kann ich es praktisch nicht machen.
Ich würde es lassen. Negative Margins sind irgendwo immer ein riskantes Thema
und in lausigen Browsern wie dem IE5 oder schlimmeren Varianten weiß man nie
genau, was die nun daraus machen.Hast recht - siehe unten. Weißt du, welche Aussicht micht wirklich ankotzt? Dass wir uns noch jahrelang mit dem IE5 rumschlagen müssen, obwohl der IE6 lange auf dem Markt ist, der trotz aller Vorbehalte zumindest eine deutliche Verbesserung gegenüber dem 5er ist, was das rendering anbelangt. Aber trotz rapide sinkender Benutzerzahlen wird der IE5 noch lange eine nervige Eisenkugel am Bein bleiben, etwa so wie es NS4 jahrelang war (ich sprech hier mal in der Vergangenheit - seit kurzem verwende ich @import und habe die Phase der stets angestrebten aber selten erreichten NS4-"Deckungsgleichheit" hinter mich gebracht.) Der IE5 ist der NS4 der Gegenwart und Zukunft... :(
Ansonsten würde ich etwas tricksen. Um den Effekt zu erreichen würde ich
eine 1 Pixel hohe Linie als Bild erstellen und diese als Hintergrundbilder
zentriert und nur vertikal wiederholend in die Seite einbinden. So erhält
man eine rote Spalte im Hintergrund über die man dann bequem die zentrierten
Sprossen legen kann und muß sich nicht mit irgendeinem Elternelement
rumärgern.Aber paßt das irgendwie in Deine Seite hinterher?
Ja, im Prinzip schon. Mir ging es auch etwas um eine prinzipielle Lösung des Problems - bis zu welchem Grad kann man beliebige Elemente beliebig zueinander positionieren, absolut und relativ, und mir scheint, dass es hier noch Potential für größere Gestaltungsmöglichkeiten gibt, vielleicht in einer zukünftigen CSS-Spezifikation. Ich habe letztlich mit etwas gerechnet, dass position-absolute und z-index beinhaltet, aber für mein konkretes Vorhaben ist deine Variante, also die mit dem Hintergrundbild, mit Sicherheit die praktikabelste. Ich hatte einfach nicht daran gedacht (und auch noch nie wirklich mit den CSS-Möglichkeiten der background-URL expreimentiert, um ehrlich zu sein).
Ich werde sicher in Kürze mal die URL der site posten, auf der das Ganze zum Einsatz kommt, wenn's soweit ist.
Hoffentlich war es für dich wenigstens eine unterhaltsame Tüftelei, jedenfalls hast du mir sehr geholfen - danke nochmal.
Grüße,
Nils
-