10.02.2010, 17:58
|
|||
|
|||
Div Float Clear usw... Ich dreh durch ;)
Hi zusammen,
vorab ich hab die FAQ gelesen und denk dass ichs fast verstanden habe... Ich post hier jetzt ein Beispiel in dem ich nicht weiß warum sich das so verhält  HTML-Code:
<div style="width:600px; background-color:green; border=1px black;"> <div style="float:left; background-color:blue; border=1px black;"> <img src="img.gif"> </div> <div style="border=1px black;"> <div style="background-color:red;"><h2>teste</h2></div> <div><h3>bla - blub</h3></div> <div style="background-color:red;"><h4>nr. (5686)</h4></div> <div style="background-color:blue;"><p>Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </p></div> <div style="float:left; background-color:red;">*****</div> <div style="float:left; background-color:yellow;">a</div> <div style="clear:left;"></div> </div> </div> So jetzt was ich nicht versteh. Im dritten div habe ich jetzt noch ein Code:
float:left; HTML-Code:
<div style="width:600px; background-color:green; border=1px black;"> <div style="float:left; background-color:blue; border=1px black;"> <img src="img.gif"> </div> <div style="float:left; border=1px black;"> <div style="background-color:red;"><h2>teste</h2></div> <div><h3>bla - blub</h3></div> <div style="background-color:red;"><h4>nr. (5686)</h4></div> <div style="background-color:blue;"><p>Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </p></div> <div style="float:left; background-color:red;">*****</div> <div style="float:left; background-color:yellow;">a</div> <div style="clear:left;"></div> </div> </div> Der ganze rechte Mist fließt um den div mit dem Bild rechts vorbei, aber warum fließt er nun nicht mehr darunter? So wie ich das verstanden habe, müsste doch der eingefügte quellcode gar nichts verändern? Bitte um Erklärung Es geht nicht drum dass die DIV konstelation vereinfacht werden könnte... ich möcht eigetnlich nur verstehen, warum sich das beschriebene so verhält. Vielen Danke 
|
| Sponsored Links |
|
10.02.2010, 19:58
|
||||
|
||||
|
13. Positionieren mit float: schwebende Boxen - Little Boxes - Webseiten gestalten mit HTML und CSS da, das wird dir weiterhelfen. Wenn nicht sogar das ganze tutorial, neben dem FAQ auch mal cross lesen was hier im Forum steht nicht bumben und sich die Haare raufen.
Des weiteren: vermeide inline formatierungen, die sorgen dafür das mans schlecht lesen kann und du und auch wir den Überblick verlieren
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege  www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
|
|
10.02.2010, 20:00
|
|||
|
|||
|
Poste einen Link zum Problem, keine Codeschnipsel.
http://xhtmlforum.de/40080-f-r-frage...twortende.html Außerdem verstehe ich deine Problembeschreibung nicht und weiß nicht, was ich mit dem Codeschnipsel anfangen soll. Du willst über Bilder reden? Die sehen wir nicht. Entferne die Inline-Styles. Vergib Namen für deine Elemente. Dann muss man sich nicht mit Umschreibungen wie "der ganze rechte Mist" herumschlagen. Und validier deinen Code bevor du ihn postest!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
10.02.2010, 21:27
|
|||
|
|||
|
also gut ich bemüh mich *g*
CSS
HTML-Code:
.owmain{
width:600px;
background-color:blue;
}
.owleft{
width:100px;
float:left;
background-color:yellow;}
.owright{
width:500px;
background-color:green;
}
.clearing
{clear:both;}
HTML-Code:
<div class="owmain"> <div class="owleft">owleft .... </div> <div class="owright">owright .... </div> <div class="clearing"></div> </div> Ganz links oben befindet sich owleft. Um owleft herum (rechts + unten) floatet der inhalt owright herum. Wenn ich der klasse owright nun ein "float:left;" hinzufüge, dann rutscht der div owright komplett rechts neben owleft. Ich versteh nicht warum Hoffe es kann mir wer erklären Dankeschön
|
|
10.02.2010, 21:36
|
|||
|
|||
|
Das sind ja schon wieder Codeschnipsel. Niemand hat Zeit, daraus erst einen Testcase zu basteln, der zeigt, was du willst.
Nochmal: Poste einen Link. Float schafft einen neuen Block Formatting Context. Eine Folge davon ist, dass es kein Verweben mit dem vorherigen Float mehr gibt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
10.02.2010, 21:41
|
|||
|
|||
|
Dann besorg dir welchen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
10.02.2010, 21:46
|
|||
|
|||
|
Du solltest die Antworten ganz lesen. Ich habe dir bereits hingeschrieben, warum sich die Elemente verhalten, wie sie sich verhalten.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| div & float & Breitenanpassung - unschönes Überlagern | nyo | CSS | 2 | 12.11.2008 12:36 |
| Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 20:24 |
| div, float und clear - Problem - IE vs. FF | jehmi | CSS | 11 | 10.06.2008 14:18 |
| Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 15:22 |
| Komisches Div margin Problem nach float & clear | matott | CSS | 11 | 07.05.2005 23:05 |
Linear-Darstellung
