[CSS] float:left und mehrere Bilder

[rancor]

Hi,
ich arbeite gerade an einem Newsscript. Die Ausgabe soll so aussehen, dass links ein Bild zur News ist und rechts eben der Text dazu.

#content img {
position: left;
margin: .5em .5em .5em 0;
}

Das Problem tritt nur auf wenn der Text der News nicht lang genug ist, also wenn der Text das Bild gar nicht ganz floaten kann. Auf dem Bild ist es ganz gut zu sehen. Die Bilder sollten natürlich immer links sein:




Danke

[airbone]

<div style="clear:both;"></div> Nach dem Text setzen

[rancor]

wow danke, das war flott UND es funtzt
siehe: http://helfrich.biz/pix/float_omg3.jpg

Leider führt das zu einem neuen Prob. Wenn ich die Seite nun einpflege habe ich eine sehr große Lücke und kann mir nicht erklären woran das liegt.

Auffällig ist, dass es mit dem Content erst los geht nach dem linken Kasten "Einsatz und Wetter":


Alle anderen Seiten werden normal ohne diesen Abstand angezeigt.

[rancor]

Edit: geht doch nicht

Gelöst durch:
<div style='clear:all;'>

War jedoch geraten :/

Danke, wäre ohne dich nicht darauf gekommen.
Ein virtuelles Bier an dich.

[rancor]

Ich check das nicht, auf dem folgendem Bild ist zu erkennen, dass er den ersten Datensatz (Bild + Text) schön wie gewollt oben hinsetzt, der zweite (identische) Datensatz wird weiter unten platziert

warum?

#content img {
float:left;
}

Code: Alles auswählen

   <img src="/FWP/bilder/thumbs/s_000_0490.JPG" width='150' height='180' alt="" />
          1Wenn Sie gerne gut essen ....
          <div style="clear:both;"></div>

[Herr Zog]

Lässt sich wohl nicht ohne weiteres sagen. Lad es mal irgendwo hoch oder paste CSS+HTML der gesamten Seite.

[zeeno]

Sieht aus als würde die 2. News nicht mehr neben das Menü "passen". Versuch mal mit der Größe rumzuspielen. Ein Beispiel online wäre natürlich sehr hilfreich wie schon gesagt.

[rancor]

Hi Leute,

also ich habe nun schon an allem 'rumgespielt, am erfolgreichsten war dann mein letzter Versuch (das Bild über diesem Post).

Hab hier mal die Files:
http://helfrich.biz/stuff/css_float.rar
Es geht um den #Content Bereich ab Zeile 175 - 185 in: design.css

FYI: Alles andere wird perfekt angezeigt wie: Impressum, Gästebuch usw. nur eben dieser spezielle Inhalt nicht: siehe index.html ab Zeile 109: <div id='content'>

Danke

[Herr Zog]

Du kannst nach dem Schema

#content>div>#einsatz-1,#einsatz-2...

nen div um alle "einsatz-*" divs legen mit float:left;
Sollte funktionieren.

[rancor]

Dank dir,

ich schau mal ob's hinhaut.

[Herr Zog]

Ach was ich noch sagen wollte: Dein Code sieht furchtbar aus. Tabellen nutzt man nicht fürs Layouten, du solltest einheitliche Zeichen verwenden, also nicht zwischen " und ' wechseln (benutz ").
Viele HTML Kommentare kannste dir durch Codeeinrückung sparen, kommentiere lieber dein CSS (wozu ist da nen padding, warum so und so breit, was macht das float und clear hier?) damit du das später noch checkst, wenn du mal was änderst.

[rancor]

Danke. Werde sowieso noch überarbeiten müssen und dann werd ich auch noch mehr kommentieren und formatieren/einrücken. CSS habe ich allerdings wirklich nur oberflächlich kommentiert.

Dass man Tabellen nicht zum Stylen benutzt ist mir bewusst, darum geht es ja in diesem Thread, ich hätte ja das Problem überhaupt nicht wenn ich Tabellen verwenden würde. Das Problem ist nun gelöst, hat dann nach etlichem rumprobieren geklappt ... endlich
Und die Tabelle die noch vorhanden ist versuche ich auch zu ersetzen.