CSS-Frage zu float

Computer: Software & Programmierung HTML & CSS
#1

Hai, Leute,

ich werd hier wieder mal zum Kaninchen…

Ich hab eine ganz einfache Aufgabe: auf eine Seite soll ein Bild und der folgende Absatz soll rechts neben das Bild - alles klar; dafür gibt es „float:left“.
Im IE steht der Text da, wo er soll - im Firefox nicht :frowning:

Hat jemand 'ne Idee, warum nicht?

Gruß
Sibylle

CSS-Fetzen:

div.inhalt { position:absolute;
 top:100px;
 left:230px;
 min-width:800px;
 width:800px;
 margin:0px; } 
div.inhalt p { font-size:10pt;
 width:200px;
 display:inline; 'zur Probe - Text ist zwar neben der
 Grafik, aber die Width-Angabe geht
 verschütt
 margin:25px; }
img.mili { vertical-align:middle; 'zur Probe - bringt nichts
 float:left;
 display:inline; 'zur Probe - bringt auch nichts
 margin-left:0px;
 margin-right:25px; }

HTML-Fetzen:

.
.


 blablablarhabarbarblafaseltexterzähl 


.
.
#2

mal ohne es geprüft zu haben…

Lorem ipsum dolor sit amet, consectetuer...

Versuch ausserdem mal leerzeichen nach den : im css file zu machen

Wenn Du mich fragst liegts an dem Zusätzlichen -Tags um Deinen Text…
Pack wenn dann das img auch in das rein.

#3

Hai, München-Freak,

Lorem ipsum dolor sit amet,
consectetuer…

Ergänzung img-Tag um Größenangaben: kein Effekt…

Versuch ausserdem mal leerzeichen nach den : im css file zu
machen

Leerzeichen eingefügt: kein Effekt

Wenn Du mich fragst liegts an dem Zusätzlichen -Tags
um Deinen Text…
Pack wenn dann das img auch in das rein.

Img mit in p gesetzt: auch nicht die Lösung…

ach seufs…

Gruß
Sibylle

#4

Ergänzung: Zusammenhang mit width
Hai, Leute,

ich hab das mal „gestripped“ ausprobiert und bin auf folgenden Zusammenhang gestoßen:

img { float:left;}
p { margin:25px; }

funktioniert

img { float:left;}
p { margin:25px;
width:200px; }

funktioniert nicht - blöd daran ist nur, daß der neben dem Bild stehende Absatz nur eine bestimmte Breite haben und sich eben nicht im restlichen Platz ausbreiten darf…

Besonders merkwürdig finde ich, daß es bei den divs, mit denen ich das Grundlayout angelegt habe, anstandslos und genau funktioniert, obwohl da auch alle Größen-Angaben haben.

Hat jemand 'ne Idee?

ratlosen Gruß
Sibylle

#5

Wenn du jetzt beschreiben würdest, wie das aussehen soll… Soll neben dem Bild ein 200px breiter Textbereich erscheinen? Wenn ja, denkst du falschrum. Ein float liegt innerhalb des enthaltenden Blocks und „überlagert“ andere Blockelemente, ohne deren festgelegte Grenzen oder die Lage innerhalb des enthaltenden Blockelements zu beeinflussen. Lediglich der Textfluss wird angepasst:
http://www.w3.org/TR/CSS21/visuren.html#floats

Du könntest wenn die Bilder eine feste Breite haben z.B. versuchen, den Textblock mit Breite bildbreite+200px und padding-left:bildbreite auszurichten.

Wenn du mit CSS arbeitest, solltest du übrigens auf keinen Fall IE zur Verifikation benutzen (der kommt erst zum Tragen, wenn du hässliche Hacks produzieren willst/musst), da die Anzeige dort in den meisten Fällen falsch ist.

#6

Hai, Nicos,

Wenn ja, denkst du falschrum. Ein float liegt innerhalb des
enthaltenden Blocks und „überlagert“ andere Blockelemente,
ohne deren festgelegte Grenzen oder die Lage innerhalb des
enthaltenden Blockelements zu beeinflussen. Lediglich der
Textfluss wird angepasst:

?Das habe ich jetzt nicht verstanden…

http://www.w3.org/TR/CSS21/visuren.html#floats

Jetzt habe ich es verstanden! :smile:

Du könntest wenn die Bilder eine feste Breite haben z.B.
versuchen, den Textblock mit Breite bildbreite+200px und
padding-left:bildbreite auszurichten.

Hach nee - funktioniert ja jetzt…wo ich meinen Denkfehler kapiert habe.

Wenn du mit CSS arbeitest, solltest du übrigens auf keinen
Fall IE zur Verifikation benutzen (der kommt erst zum Tragen,
wenn du hässliche Hacks produzieren willst/musst), da die
Anzeige dort in den meisten Fällen falsch ist.

Ja, DAS weiß ich :frowning:
Da es im IE ja auf Anhieb so aussah, wie ich es wollte, war mir klar, daß ich irgendwas falsch gemacht haben muß… :wink:

Gruß und Danke
Sibylle

#7

Hi,

ich werd hier wieder mal zum Kaninchen…

das sieht sicher sehr lustig aus. :smile:

Zum Thema: lass doch das Ganze mal durch die Validatoren laufen und sieh dir an, was dann bemängelt wird.
Es könnte u.a. auch am Doctype liegen. Schon mal transitional statt strict versucht?

Viele Grüße
WoDi