Contentprobleme. Wie Floatet man richtig? @ tutorials.de: Tutorials, Forum & Hilfe

LLeerrooyy · 10.03.10 06:13

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-Code:

<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 www.spiegel.de nimmt, oder 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

Maik · 10.03.10 06:20

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:

[CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik

LLeerrooyy · 10.03.10 06:47

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.

Maik · 10.03.10 06:51

Dann lies dir hierzu mal den am Ende meines "Webmaster FAQ"-Beitrags verlinkten Artikel How To Clear Floats Without Structural Markup durch.

mfg Maik

Maik · 10.03.10 08:58

Ich hab mal deinen Vorentwurf in die CSS-Praxis umgesetzt, damit zukünftige Hilfesuchende in diesem Thema auch ein konkretes Codebeispiel vorfinden

HTML-Code:

<!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

LLeerrooyy · 10.03.10 15:46

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.

Maik · 10.03.10 16:00

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" [b]class="clearfix"[/b]>
      <div id="leftColumn"></div>
      <div id="rightColumn"></div>
      [B][COLOR="Red"]<div style="clear:both;"></div>[/COLOR][/B]
   </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

LLeerrooyy · 10.03.10 17:54

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 ?

Maik · 10.03.10 18:16

Zitat von LLeerrooyy

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 ?

Nun liebe Kinder gebt fein Acht, ich hab euch etwas mitgebracht

Zitat von Maik

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

mfg Maik

LLeerrooyy · 10.03.10 20:58

Ok Ok

Erledigt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Menü floatet über die content box

Do While wie ist es Richtig?

DIV´s richtig ?

DIVs im DIV Problem... "wie floatet man korrekt?"

So richtig 3D

E-Mail:

Abonnieren Abbestellen