zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Elemente untereinander - folgendes element ganz oben positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2008, 15:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2008
Beiträge: 8
MrBr befindet sich auf einem aufstrebenden Ast
Standard 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>
CSS dazu:
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;
}
Im Grunde ist alles was ich erreichen moechte, dass die rote #box3 ganz oben neben dem #box1-div ausgerichtet wird.

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!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2008, 15:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du kannst 1 & 2 links floaten, 2 cleart zusätzlich noch links, und 3 floatet nicht, sondern bekommt margin-left.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2008, 16:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2008
Beiträge: 8
MrBr befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Markup:
Code:
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</body>
Die Tatsache, dass box4 nicht unmittelbar an box3 andockt, spielt eine untergeordnete rolle, das kriege ich (hoffentlich) ueber die entsprechenden abstands-formatierungen hin.
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...
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2008, 16:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2008
Beiträge: 8
MrBr befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2008, 16:42
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrBr Beitrag anzeigen
im IE alles korrekt dargestellt wird, da brauche ich nicht mal mehr die margin-left angabe fuer box3.
Nein, denn er stellt Non-Floats mit Layout immer komplett neben den Float. Allerdings sollte letzterer ausschließlich für den IE < 7 noch ein margin-right: -3px; bekommen, um den sog. 3px-Bug zu beheben.

Zitat:
Zitat von MrBr Beitrag anzeigen
firefox,opera und safari hingegen ziehen alles auf die hoehe von #box2
Zitat:
Zitat von heiko_rs Beitrag anzeigen
3 floatet nicht
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2008, 16:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2008
Beiträge: 8
MrBr befindet sich auf einem aufstrebenden Ast
Standard

okay und das zusaetzliche <div> wuerde dann was genau machen bzw. einschliessen?
Mit Zitat antworten
  #7 (permalink)  
Alt 19.08.2008, 17:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Es würde die linke Spalte bilden, also 1 & 2 einschließen, und dann links floaten. Dann können 3 & 4 ebenfalls floaten.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.08.2008, 17:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2008
Beiträge: 8
MrBr befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #9 (permalink)  
Alt 19.08.2008, 18:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrBr Beitrag anzeigen
Es wuerde mich dennoch interessieren, inwiefern die negative Abstandsdeklaration Schwierigkeiten bringen kann.
Wenn man die Lösung ausgiebig in den verschiedensten Browsern testet, geht es schon. Beispiel: Wenn alle 4 divs links floaten und 2 cleart, kann man 3 und 4 per margin in Position bringen. Für den IE muss man diese margins aber zurücksetzen.

Zitat:
Zitat von MrBr Beitrag anzeigen
Wie funktionieren denn CSS-browserspezifische Anweisungen?
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:18 Uhr.