zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grunsätzliches Verständnis von Floating

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2010, 18:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2007
Beiträge: 11
actionjackson befindet sich auf einem aufstrebenden Ast
Standard Grunsätzliches Verständnis von Floating

Ich habe eine Frage zum Thema Floating.

Überlichweise baue ich alle Websites wie in der angefügten Grafik 1 dargestellt. Dabei werden Header, Subnavigation, Content, Sidebar und Footer mit float:left und einer width:XXpx formatiert.

Grafik 1


Damit jetzt im Content-Bereich die Elemente automatisch die Maximalbreite haben, floate ich kein Element. Ausnahme: In einem P der Klasse "image-left" ist ein Bild, das float:left gefloatet wird. Jetzt kommen wir zur Frage.

Braucht man danach immer ein Element zum clearen mit clear:both oder clear:left ? Gibt es da andere Möglichkeiten? Siehe Grafik 2. Aktuell mache ich das immer mit einem DIV class="clearer".

Grafik 2


Ich bin Dankbar für Ideen und Erklärungen!
Angehängte Grafiken
Dateityp: png 1.png (9,9 KB, 35x aufgerufen)
Dateityp: png 2.png (10,4 KB, 36x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2010, 18:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Musst nicht.
ich cleare eigentlich nie.
Besser ist es aber.

Jenachdem was du machen willst.
div`s und p`s haben bei mir immer eine min-height und feste Breite. Von daher brauche ich das clear nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.07.2010, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2007
Beiträge: 11
actionjackson befindet sich auf einem aufstrebenden Ast
Standard

Mein Problem ist aber, wenn der Contentbereich verschiedene Breiten haben könne muss. Aktuell würde ich das so lösen, dass der Body eine id bekommt.

HTML-Code:
<body id="index">

Im CSS steht dann beispielhaft folgendes
HTML-Code:
body#index #content p,
body#index #content ul,
body#index #content h1,
body#index #content h2{
 width:500px;
}
Ich empfinde diesen Zwang, bei Ausnahmen immer allen Elementen eine Breite geben zu müssen, als störend. Irgendwie auch total verkompliziert.

Meine Frage war ja, ob mein Ansatz falsch ist, ein gefloatetes Element im Contentbereich wieder zu clearen. Und vor allem ob es etwas eleganters gibt als imm DIVs hinter das gefloatete Element zu schreiben.
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2010, 13:26
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 brauchst weder width, noch min-height, noch leere Elemente. Statt des leeren grünen divs kann auch das folgende rote (mit Inhalten) clearen. Oder Du sorgst dafür, dass das orange, das den Float enthält, diesen vor vorneherein einschließt, z.B. indem es selber floatet (dann braucht es eine Breite), oder per Clearfix (siehe FAQ 2).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2010, 13:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Du musst allen einen feste breite geben !
Sonst bekommst du erhebliche schwierigkeiten in anderen Browsern.

ich würde es so machen:

<style type="text/css">
#content {float:left:
width:520px;
min-height:650px;}
#div1 {float:left;
width:500px;
min-height:150px;
margin:20px 0 0 0;} // alles nur grobe Richtwerte
usw.


<div id="content">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<divclass="div1"></div>
</div>

in diesen div`s kannst du dann deine Inhalte einfügen. Die du auch floaten musst.

die hauptdivs (subnavigation, cont., sidebar) müsstest du ebenfalls floaten. um alle 3 großen divs solltest du ein div setzen was du ebenfalls floaten müsstest sowie ihm eine min-height verpassen.
Mit Zitat antworten
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
Wiedermal floating mcdaniels CSS 7 16.05.2011 21:08
IE7 Floating DIV und Background des Containers SXP CSS 3 04.03.2010 14:45
Probleme im IE6 und IE7 (wahrscheinlich floating) Guitarrero CSS 16 19.10.2009 12:53
floating überlappt sich Luke_Skyscraper CSS 7 14.09.2006 08:05
floating Problematik bei verschachtelten div's bensen CSS 2 29.05.2005 17:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:39 Uhr.