|
|||
2 Elemente untereinander - folgendes element ganz oben positionieren
Liebe Community,
nachdem mir hier bei meiner ersten Anfrage so grandios weitergeholfen wurde, moechte ich die Gelegenheit nutzen und nochmal eine Frage hinterher stellen. Diesmal dreht es sich erneut um das Positionieren von Elementen, was fuer mich momentan den schwierigsten Teil von CSS darstellt. Der Einfachheit halber habe ich das Beispiel auf seine elementaren Bestandteile heruntergebrochen: Markup: Code:
<body> <div id="box1"> </div> <div id="box2"> </div> <div id="box3"> </div> </body> Code:
#box1 { position:relative; background-color:#000000; width:100px; height:300px; } #box2 { position:relative; float:left; background-color:#0000CC; width:100px; height:200px; } #box3 { position:relative; float:left; background-color:#FF0000; width:500px; height:700px; } Ich moechte die Positionierung mit 'absolute' nach Moeglichkeit vermeiden, genau wie ich es nicht so praktisch faende, die beiden ersten Elemente (#box1 und #box2) nochmal in einen Kontainer zu integrieren und diesen dann links zu floaten. Dies wuerde, wenn ich richtig informiert bin, mein Problem loesen, den Code allerdings nicht unbedingt uebersichtlicher machen. Stellt mir CSS hierzu noch eine andere Loesungsmoeglichkeit zur Verfuegung? Zum besseren Verstaendnis Herzlichen Dank fuer jede Hilfe!!! |
Sponsored Links |
|
|||
Super, das loest das Problem zu geschaetzten 70%
Im konkreten Anwendungsfall jedoch befindet sich noch ein zusaetzliches Element neben der roten #box3. Code:
#box1 { position:relative; float:left; background-color:#000000; width:100px; height:300px; } #box2 { position:relative; float:left; clear:left; background-color:#0000CC; width:100px; height:200px; } #box3 { position:relative; background-color:#FF0000; width:500px; height:700px; margin-left:100px; } #box4 { position:relative; background-color:#00FF00; width:200px; height:300px; float:right; } Code:
<body> <div id="box1"> </div> <div id="box2"> </div> <div id="box3"> </div> <div id="box4"> </div> </body> Wichtiger ist jedoch auch hier, dass box4 wie box1 und box3 oben ausgerichtet wird. aktualisiertes Anschauungsmaterial Schonmal vielen Dank fuer die schnelle und effektive Hilfe! Ein grossartiges Forum... |
|
|||
habe gerade gesehen, dass wenn ich #box3 links floate, im IE alles korrekt dargestellt wird, da brauche ich nicht mal mehr die margin-left angabe fuer box3. der firefox,opera und safari hingegen ziehen alles auf die hoehe von #box2 und nicht ganz nach oben zu #box1... Verrueckt diese Browser-Unterschiede
siehe da Geändert von MrBr (19.08.2008 um 16:27 Uhr) |
|
||||
Zitat:
Und mit Hinzunahme der grünen Box würde ich nun doch zu einem zus. div raten, um allzu abenteuerliche Konstruktionen (z.B. mit neg. margin-top) zu vermeiden. |
|
|||
Perfekt! Das hat's gebracht...
Es wuerde mich dennoch interessieren, inwiefern die negative Abstandsdeklaration Schwierigkeiten bringen kann. Gibt es dazu evtl. eine Quelle? Desweiteren schreibst du von einem 3px-Bug. Die Vorsorge ist dabei ausschliesslich auf den Internet-Explorer anzuwenden. Wie funktionieren denn CSS-browserspezifische Anweisungen? Gibt es da auch eine gute Quelle im Netz? Herzlichen Dank fuer deine grossartige Hilfe! |
|
||||
Zitat:
Stichwort "Conditional Comment" in meinem FAQ-Beitrag: http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439 Den IE < 7 spricht man dann am besten per * html vor dem eigentlichen Selektor an. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Element relativzu anderem Element positionieren | Gsicht | Javascript & Ajax | 7 | 21.02.2008 08:20 |
Layer oben links in die Ecke des Browser positionieren | crossgolfer | (X)HTML | 5 | 29.05.2007 12:04 |
Element absolut positionieren | ProXy | CSS | 0 | 27.03.2006 10:47 |
Hintergrundbild x Pixel von oben positionieren? | Kai Oberthaler | CSS | 2 | 13.01.2005 12:48 |