✔ Contentprobleme. Wie Floatet man richtig?

L

LLeerrooyy

Mitglied
Hallo zusammen,

ich bekomme Probleme, je komplexer eine Struktur wird. Es geht um das Floating. Ich verstehe es manchmal einfach nicht.
Als Beispiel, habe ich eine Grafik hochgeladen.
Wenn ich diese Struktur nachbauen müsste, wie klappt das dann mit dem Floating ?
Ich weiß nicht genau wie ich grundsätzlich vorgehen soll.

Ich habe mir erstmal die HTML Struktur gebastelt.
HTML: 
<div id="maincontainer">
	<div id="banner"></div>
        <div id="menu"></div>
    
  		<div id="content">
        		<div id="contentleft">
            		       <div id="content1"></div>
            		       <div id="content2"></div>
            		       <div id="content3"></div>
                               <div id="content4"></div>
        	        </div>
			<div id="contentright">
                   	       <div id="contentA"></div>
            		       <div id="contentB"></div>
            		       <div id="contentC"></div>
                        </div>
		</div>
</div>

Jetzt müsste ich im CSS alles formatieren. Dann kommt ja noch das Floating hinzu.
Je mehr DIVs ich habe, desdo unübersichtlicher wird es für mich.
Wenn man jetzt mal als Beispielseite http://www.spiegel.de nimmt, oder http://www.sport1.de, könnte ich das nicht so einfach Nachbasteln, was die Anordnung der DIV Container angeht, plus Floating.
Bei sport1.de z.B. ist auf der linken Seite der Content manchmal noch in zwei Bereiche geteilt.
Gehe ich denn bei meinem Beispiel von der Aufteilung in sachen DIVs richtig vor ?
Und gibt es irgend eine Eselsbrücke oder ähnliches, damit man das mit dem Floating richtig versteht, auch wenn das Ganze noch so tief verschachtelt ist ? Denn das ist mein Hauptproblem.
Vielleicht kann mir jemand dabei helfen.
Danke und Gruß

Leroy
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    21,8 KB · Aufrufe: 12
Moin,

#contentleft und #content2 erhalten in dem Modell eine float:left-Regel, #contentright und #content3 float:right.

  • float:left = Element wird vom benachbarten Element rechtsseitig umflossen.
  • float:right = Element wird vom benachbarten Element linksseitig umflossen.

Umflüsse werden anschliessend mit der clear-Eigenschaft abgebrochen, also z.B. für #content4, um wieder den normalen Dokumentfluß herzustellen.

In den Webmaster FAQ hab ich vor geraumer Zeit einen Beitrag reingestellt, der dich ebenso interessieren dürfte:

mfg Maik
 
Ah ok, ich verstehe.
Dann stimmt mein HTML Gerüst, das ich jetzt für diese Testgrafik gebaut habe also auch ?
Es ist dann praktisch nur diese Floating Geschichte, die passen muss, und der Rest der CSS Anweisungen natürlich.
Diesen letzten Code (clearfix etc.), in deinem Beispiel habe ich nicht verstanden.
Ich kann doch ganz normal ein clear setzen.
 
Ich hab mal deinen Vorentwurf in die CSS-Praxis umgesetzt, damit zukünftige Hilfesuchende in diesem Thema auch ein konkretes Codebeispiel vorfinden :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-03-10" />

<title>tutorials.de</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
#maincontainer {
width:800px;
margin:auto;
}
#banner {
height:100px;
background:#aaa;
}
#menu {
height:50px;
background:#fdabad;
}
#contentleft {
float:left;
width:500px;
}
#content1 {
height:200px;
background:#82fbc6;
}
#content2 {
float:left;
width:250px;
height:200px;
background:#87f6ff;
}
#content3 {
float:right;
width:250px;
height:200px;
background:#ffcb87;
}
#content4 {
clear:both;
height:200px;
background:#fe87ff;
}
#contentright {
width:290px;
float:right;
}
#contentA {
height:200px;
background:#e2dde3;       
}
#contentB {
height:200px;
background:#5c5c5c;
}
#contentC {
height:200px;
background:#c5c5c5;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>

</head>
<body>

<div id="maincontainer">
  <div id="banner">banner</div>
  <div id="menu">menu</div>   
  <div id="content" class="clearfix">
    <div id="contentleft">
      <div id="content1">content1</div>
      <div id="content2">content2</div>
      <div id="content3">content3</div>
      <div id="content4">content4</div>
    </div>
	  <div id="contentright">
      <div id="contentA">contentA</div>
      <div id="contentB">contentB</div>
      <div id="contentC">contentC</div>
    </div>
  </div>
</div>

</body>
</html>


mfg Maik
 
Genial. Ich wollte das zu Testzwecken zwar heute abend selber machen, aber so nehme ich das natürlich auch mit :) Danke.
Ich habe mir diese letzte Passage ein paar mal durchgelesen, verstehe es aber immer noch nicht wirklich.
Diese clearfix geschichte sieht aus wie ein Hack.
Apropos Hack, mit den gängigen Browsern habe ich bei so einem CSS Aufbau ja keine Probleme.
Wie testet ihr eure sachen, wenn ihr so ein Layout macht ?
Früher gab es eine Seite, wo man in vielen Browsern simulieren konnte, wie die Seite aussieht. Dementsprechend konnte man dann gezielt mit einem Hack diese Fehler ausbügeln.
Diese Seite gibt es anscheinend leider nicht mehr.
Bin mir dann immer ziemlich unsicher, wenn ich irgend etwas erstellen will, und nicht 100%ig weiß, obs dann wirklich auch in älteren Browsern korrekt dargestellt wird.
 
Die CSS-Regeln der .clearfix-Klasse, die in diesem Code-Beispiel im DIV #content aufgerufen wird, ersetzen das rotmarkierte "inhaltsleere" DIV am Ende von #content, das hier ausschließlich die Aufgabe hat, das Umfließen der beiden Blöcke #leftColumn u. #rightColumn zu beenden, und im Dokument wieder den normalen Textfluß herzustellen, da ansonsten standardkonforme Browser (FF, Opera, Safari, usw.) mit Fehldarstellungen im Seitenlayout reagieren - siehe z.B. den Schnappschuß in meinem Webmaster FAQ-Thema.

Code: 
<div id="wrapper">
   <div id="content" class="clearfix">
      <div id="leftColumn"></div>
      <div id="rightColumn"></div>
      <div style="clear:both;"></div>
   </div>
</div>


Zum lokalen Testen hab ich auf meinem System die gängigen Browser vorrätig. Für die jüngere Generation der IE-Famile (7 + 8) hab ich zwei virtuelle PCs aufgesetzt, und falls jemand etwas von mir über die 5.x-Versionen erfahren will, stehen sie mir neben dem IE6 als (parallele) "Standalone"-Versionen zur Verfügung :)


mfg Maik
 
Ahhhh, jetzt verstehe ich das Ganze.
Vielen Dank für die Erklärung ;)
Gruß

EDIT: Doch noch ne schnelle Frage, falls jetzt überhaupt noch jemand hier rein schaut.
Wenn ich aber noch z.B. einen Footer hinzufüge, könnte ich den ja zum Schluss auf clear setzen, und bräuchte somit die Regel nicht. Richtig ?
 
Zuletzt bearbeitet:
LLeerrooyy hat gesagt.:
EDIT: Doch noch ne schnelle Frage, falls jetzt überhaupt noch jemand hier rein schaut.
Wenn ich aber noch z.B. einen Footer hinzufüge, könnte ich den ja zum Schluss auf clear setzen, und bräuchte somit die Regel nicht. Richtig ?
Zum Vergrößern anklicken....
Nun liebe Kinder gebt fein Acht, ich hab euch etwas mitgebracht :)
Maik hat gesagt.:
das rotmarkierte "inhaltsleere" DIV am Ende von #content, das hier ausschließlich die Aufgabe hat, das Umfließen der beiden Blöcke #leftColumn u. #rightColumn zu beenden, und im Dokument wieder den normalen Textfluß herzustellen
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück