float:left beenden/unterbrechen - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > float:left beenden/unterbrechen

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > float:left beenden/unterbrechen

Pages: [1]

geschrieben von mosi am 18.07.2008 - 16:34

Moin Moin,

mal eine Frage an die Webdesigner unter euch =) Ich zerbrech mir seit zwei Tagen den Kopf, wie ich folgendes Problem lösen kann und bekomms einfach nicht hin *genervt*:
Ich habe ein Div, welches den eigentlichen Inhalt meiner Seite enthalten soll. Weil ich an einer Stelle in einem Fieldset ein Bild links haben will, habe ich bilder auf float: left gesetzt. An einer anderen Stelle brauche ich jedoch nun ein Bild zentriert... aber es weigert sich mit konstanter Boshaftigkeit!

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:

div#ContentBox  {
	position: absolute; top: 10px; left: 161px;
	width:590px; min-width:590px;	min-height: 350px; padding: 5px 5px;
	position:relative; z-index:1;
	background: #ffffff;
	border-left: 1px solid #424242;
	border-right: 1px solid #424242;
	border-top: 1px solid #424242;
	border-bottom: 1px solid #424242;
}
div#ContentBox fieldset { border:2px solid #424242; margin-bottom: 10px;}
div#ContentBox legend {
	font-size: 16px; font-weight:bold;
	color: #ffffff; background: #424242}

div#ContentBox fieldset { border:2px solid #424242; margin-bottom: 10px;}
div#ContentBox legend {
	font-size: 16px; font-weight:bold;
	color: #ffffff; background: #424242}
div#ContentBox img { border: 0px; float: left;} /* <--Übeltäter!! */

In dem div kommt nun mit p ein textblock. Der Text ist auch zentriert, das funktioniert so weit. Was mich natürlich etwas wundert, ist dass img dadurch nicht angesprochen wird, sollte es doch ein inline-element sein, oder? Mal davon abgesehen sollte nach meinem Verständnis clear: both den float unterbinden. Testweise hab ich das auch in p geschrieben. Auch die ergoogelte Lösung mit margin-left und margin-right auf auto wird "ignoriert".

	PHP-Quelltext
`1: 2: 3: 4: 5: 6: 7: 8:`	`<? p#AccessDenied { padding: 2px; clear: both; font-size: 14; color: #000000; font-weight: bold; text-align: center; } p#AccessDenied img {clear: both; border: 0px;} ?>`

Wo könnte der Fehler liegen? Für Anregungen wäre ich sehr verbunden, sonst kann ich heute Nacht nicht schlafen ^^

geschrieben von Klaush am 18.07.2008 - 17:12

Mit der clear - Eigenschaft wird das Umfließen vorheriger gefloateter Elemente beendet.

geschrieben von mosi am 18.07.2008 - 17:34

clear hab ich ja bereits ohne erfolg genutzt, es sei denn, ich habe es falsch eingesetzt.

geschrieben von Klaush am 18.07.2008 - 18:40

Wann willst du denn das float unterbinden? Wie schon oben geschrieben, hebt das clear:left das vorheriger gefloateter Element auf.

geschrieben von mosi am 18.07.2008 - 19:04

also die html struktur kann man eigentlich dem css teil oben entnehmen. in dem div mit der id ContentBox befindet sich ein Textabsatz - bezeichnetes p. In p soll alles zentriert sein, also Text und ein eingefügtes Bild. Von daher ist es ja weniger ein vorangegangenes, als ein übergeordnettes Element? Wie schon geschrieben ist der Text ganz normal mit text-align: center in p ausgerichtet. das klappt auch. nur das Bild bleibt notorisch links.

clear hab ich ja bereits zwei mal genutzt, weil ich hoffte damit des float:left des divs aufheben zu können (einmal in p und einmal nochmal in img, weil mir die ideen ausgingen).

geschrieben von mosi am 05.08.2008 - 17:04

Ich habe leider keine Lösung für dieses Problem gefunden und bin es jetzt umgangen. Dazu hab ich div#ContentBox legend und gieldset einmal global definiert (ohne img) und für das Fieldset mit dem Bild eine extra definition via einer id-Zuweisung erstellt. Das beantwortet zwar leider nicht meine Frage, aber so komme ich zu einem zufriedenstellenden Ergebnis.

geschrieben von MOUXIN am 23.08.2008 - 22:15

Hi Mosi,
ich hatte dasselbe Problem und bin auf den Befehl \"float:none\" gestossen. Mit dem hab ich´s hinbekommen.
Musst aber den kompletten Pfad bis zu Deinem Element, das nicht mehr gefloatet werden soll angeben, damit der erste float Befehl auch überschrieben wird.
Gruß,
MOUXIN.

HTML-Quelltext

PHP-Quelltext