zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div Float Clear usw... Ich dreh durch ;)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.02.2010, 18:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 6
buggix befindet sich auf einem aufstrebenden Ast
Standard 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>
Das ERgebniss versteh ich! Der ganze Mist fließt um den div mit dem Bild herum ... Erst rechts und sobald das bild zu ende ist dann auch aunter dem Bild...

So jetzt was ich nicht versteh. Im dritten div habe ich jetzt noch ein
Code:
float:left;
hinzugefügt. Der Quellcode sieht nun so aus.

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>
Es passiert folgendes:
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.02.2010, 20:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 6
buggix befindet sich auf einem aufstrebenden Ast
Standard weiß denn keiner hilfe?

aaaaaaaaaaaaaaaaaaaa
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.02.2010, 20:58
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 10.02.2010, 21:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 10.02.2010, 22:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 6
buggix befindet sich auf einem aufstrebenden Ast
Standard 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;}
Quelltext htmldatei:
HTML-Code:
<div class="owmain">
	<div class="owleft">owleft .... </div>
	<div class="owright">owright .... </div>
	<div class="clearing"></div>
</div>
Das kommt dabei raus:
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
Mit Zitat antworten
  #6 (permalink)  
Alt 10.02.2010, 22:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.02.2010, 22:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 6
buggix befindet sich auf einem aufstrebenden Ast
Standard .

ich habe keinen webspace
Mit Zitat antworten
  #8 (permalink)  
Alt 10.02.2010, 22:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Dann besorg dir welchen.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2010, 22:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 6
buggix befindet sich auf einem aufstrebenden Ast
Standard .

wegen 5 zeilen html...
bevor du mir jetzt dauernd sagst was ich falsch mach hättet mir schon lang helfen können ...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.02.2010, 22:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du solltest die Antworten ganz lesen. Ich habe dir bereits hingeschrieben, warum sich die Elemente verhalten, wie sie sich verhalten.
Mit Zitat antworten
Sponsored Links
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
div & float & Breitenanpassung - unschönes Überlagern nyo CSS 2 12.11.2008 13:36
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 21:24
div, float und clear - Problem - IE vs. FF jehmi CSS 11 10.06.2008 15:18
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
Komisches Div margin Problem nach float & clear matott CSS 11 08.05.2005 00:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:27 Uhr.