float frage

[mrmaus]

hallo.

ich probiere schon die ganze zeit rum aber nichts funktioniert. der hauptteil meiner webseite ist bisher in zwei teile unterteilt. den linken teil dirigiere ich mit float= left und den rechten mit =right. jetzt möchte ich aber den hauptteil dreiteilen und es funktioniert nicht. wenn ich den mittelteil right setze, überlegt er den eigentlichen teil einfach. wie ist dem beizukommen?

vielen dank!

 

[Chrislidesign]

quellcode bilder etc anders wird das helfen schwer :S

 

[Loon3y]

Guten Abend.

Du hast da mehrere Möglichkeiten..

- Endweder du nimmst 3 Elemente und floatest sie alle nacheinander links. Das würde dann so aussehen:

<div style="width:50px; height:50px; border:1px solid; [B]float:left;[/B]">
 <p> Box 1 </p>
</div>
<div style="width:50px; height:50px; border:1px solid; [B]float:left;[/B]">
  <p> Box 2 </p>
</div>
<div style="width:50px; height:50px; border:1px solid; [B]float:left;[/B]">
 <p> Box 3 </p>
</div>

oder du floatest ein element links, eins rechts, ein zentrierst du.

<div style="width:50px; height:50px; border:1px solid; [B]float:left;[/B]">
 <p> Box 1 </p>
</div>
<div style="width:50px; height:50px; border:1px solid; [B]float:right;[/B]">
 <p> Box 3 </p>
</div>
<div style="width:50px; height:50px; border:1px solid; [B]margin:0px auto;[/B]">
 <p> Box 2 </p>
</div>

Die Unterschiede an den Methoden sollten durch die Bezeichnung "Box xyz" sichtbar sein.

Gruß
Loon3y

Edit: anbei wäre es noch ratsam, beim ersten Beispiel im darauffolgenden element ein "clear:left;" einzubinden ins css, beim zweiten beispiel ein "clear:both;", ansonsten könntest du probleme mit dem darstellen des darauffolgenden content bekommen.

 

[mrmaus]

hallo,

hier der .css teil.

die sidebar definition ist der linke teil.
die content definition ist der rechte teil, der aber in die mitte soll.

danke

/* Page */
#page {
 width: 1050px;
 margin: 0px auto;
 padding: 10px 0px 0px 0px;
 background: #FFFFFF;
}
#header-pic {
 background: url(images/img05.jpg) no-repeat left top;
 width: 1050px;
 height: 225px;
}
/* Content */
#content {
 float:right;
 width: 720px;
 padding: 0 0px;
}
.post {
 margin: 0px 0px 30px 0px;
}
.post .title {
 margin: 0px;
 background:url(images/balken2.jpg) no-repeat;
 padding: 7px 26px;
 font-size: 1.6em;
}
.post .title h1 {
}
.post .entry {
 padding: 0 5px;
}
.post .meta {
 font-weight: bold;
 padding-left: 5px;
}
.post .byline {
 margin: 0px;
 padding-left: 5px;
}

/* Sidebar */
#sidebar {
 float: left;
 width: 265px;
}
#sidebar-content {
 background: url(images/img01.jpg) repeat-y left top;
}
#sidebar ul {
 padding: 0px 0 5px 0;
 margin: 0px;
 list-style: none;
}
#sidebar li li {
 margin-left: 8px;
 margin-right: 8px;
 line-height: 30px;
 padding-left: 5px;
 border-bottom: 1px dashed #6FB7FF;
}
#sidebar li ul {
 margin-bottom: 1.8em;
 list-style: none;
}
#sidebar h2 { 
 background:url(images/balken1.jpg) no-repeat;
 padding: 7px 25px;
 font-size: 1.6em;
}
#sidebar a {
 text-decoration: none;
 font-weight: bold;
 color:#444444
}
#sidebar a:hover {
 font-weight: bold;
 color:#F00;
}

 

[mrmaus]

also wenn ich den mittleren teil auf float= left setze erscheint er immer ganz links über dem teil, der eigentlich ganz links stehen soll!

gracias

 

[mrmaus]

so also wenn ich beide teile mit float=left belege dann funktioniert es. nur das leider der teil der ganz links stehen soll nun mittig ist und der teil der mittig sein soll ist ganz links. kann man eine herarchie oder ähnliches festlegen?

vielen dank

 

[mrmaus]

okay ich habs, die reihenfolge liegt am html content.

 

[Loon3y]

Erstmal, ohne die Arbeit eines Mods weg zu nehmen: Doppelposting ist hier nicht so gewünscht, es gibt eine "edit"-funktion ^^

und dann...hättest du meine beispiel aufmerksam durchgelesen, hättest du es sofort geschafft.

Gruß
Loon3y

 

[Efchen]

Ergänzung zu Loon3y:

Wenn der mittlere Teil den restlichen Platz zwischen den beiden gefloateten Bereichen einnehmen soll, muss man den mittleren Teil nicht zentrieren, der erstreckt sich dann ja sowieso über die volle Breite und ist somit auch zentriert. Mit einem margin-left und margin-right erreicht man dann auch, dass sich der Inhalt dieses Bereichs niemals in die beiden äußeren Spalten schiebt.

 

[sarabb]

Hallo,
binn ja noch ein Neuling. Habe immer kleine Probleme mit "Float". Habe da wieder was dazu gelernt.
Danke!

 

[Efchen]

Kann man Deine Probleme mit float irgendwie beseitigen? Dir was erklären?

"float" nimmt das gefloatete Element aus dem Textfluss. Der Textfluss ist das, wie der Browser Elemente auf der Seite positioniert. Eines nach dem anderen. Block-Elemente untereinander, Inline-Elemente nebeneinander. Immer hübsch der Reihe nach.

Wenn Du ein Element floatest, wird es an die Stelle gesetzt, wo der Textfluss gerade ist (stell Dir das vor wie ein Stift, der immer eine bestimmte Stelle markiert und im Normalfall nach dem Setzen eines Elements an die nächste Position hinter das eben gesetzte Element weiterspringt). Der imaginäre Stift :-) setzt sich dann aber nicht hinter das Element, sondern macht mit dem nächsten Element an der selben Stelle weiter, wo auch das gefloatete Element steht. Es "schwebt" quasi über dem Rest, ohne die Reihenfolge der anderen Elemente zu beeinflussen.

Das Gegenteil zu "float" ist "clear". Mit "clear" sagst Du dem Browser, dass er das floaten beenden soll. Der o.g. Stift (Textfluss) setzt sich dann hinter das gefloatete Element und macht dann da weiter.

Das ist schon alles. float ist ein sehr mächtiges und das meistbenutzte Element bei der Positionierung. Es ist weit unkomplizierter als absolute oder relative Positionierung und reicht in den meisten Fällen aus.

Noch Fragen offen?

Grüße,
-Efchen