Problem mit Bildausrichtung

[elmi42-melle]

Moin ihr Lieben,
wenn ich mehrere Bilder aus der Mediendatenbank einfüge, so setzen die sich nicht untereinander, sondern versetzt nebeneinander.
Siehe hier: http://elmi42.homelinux.net/"

Sicherlich kann ich das auch ohne Prgrammierkenntnisse verbessern. Die Frage bleibt nur wie

Alles Liebe,
Michael

[garvinhicking]

Hi!

Ja, das ist definitiv ein Floating-Problem. Da die CSs-Klassen für ein Bild mit Kommentar jeweils margin/padding setzen addiert sich das für alle floatenden Folgebilder.

Du kannst eines links und eines rechts setzen, aber mehrerebilder mit kommentar nebeneinander sind so ohne weitreichender CSS-Änderungen nicht möglich - da weiß ich leider auch nicht, wie/ob man das überhaupt erreichen könnte. Vielleicht eine Frage für die CSS-Gurus hier

Grüße,
Garvin

[elmi42-melle]

Moin,

ich habe ja nunmal keinerlei Plan vom Programmieren, dennoch habe ich sicherheitshalber einige wichtige Bücher über CSS, HTML usw..

Meine Lösung bisher:
In der style.css habe ich unter IMMAGE comments, den Befehl clear eingefügt,

Code: Select all

.serendipity_imageComment_left {
    float: left;
    clear: left;
}

.serendipity_imageComment_right {
    float: right;
    clear: right;
}

Im Text zum Bild füge dann am Ende ein

Code: Select all

<br clear=all>

an.

Es wäre natürlich schöner wenn der letzte Code bereits im style.css eingefügt würde, aber ich habe keinen Plan wo ich das machen soll.

Jedenfalls werden nun meine Bilder (die links ausgerichtet waren, aber sich "überschnitten" hatten, untereinander gezeigt und der dazugehörige Text daneben angezeigt.

Liebe Grüße,
Michael

[yellowled]

ich habe ja nunmal keinerlei Plan vom Programmieren, dennoch habe ich sicherheitshalber einige wichtige Bücher über CSS, HTML usw..

HTML und CSS sind übrigens beides streng genommen keine Programmiersprachen.

Grundsätzlich steht alles, was man zum Thema floats und clearing wissen muss in Float: Die Theorie.

Im Text zum Bild füge dann am Ende ein

Code: Select all

<br clear=all>

an.

Igitt Zum einen funktioniert das nicht, weil es "clear=all" gar nicht gibt bzw. es veraltet ist. Richtig wäre, wenn überhaupt:

Code: Select all

<br style="clear: both;" />

... aber selbst das ist meines Erachtens unschön, da es ein Inline-Style ist, und die sind irgendwie generell unschön

Es wäre natürlich schöner wenn der letzte Code bereits im style.css eingefügt würde, aber ich habe keinen Plan wo ich das machen soll.

Code: Select all

.serendipity_entryFooter { clear: both; }

müsste tun. Alternativ könnte man Easy Clearing verwenden, aber das sollte hier eigentlich nicht nötig sein.

YL

[garvinhicking]

Hi!

Ich fürchte ein footer-clearing würde hier nicht helfen, denn es geht ja um nebeneinander positionierte bilder die verrutschen.

Der Footer würde nur dafür sorgen, dass die bilder nicht aus dem footer rausragen; das unschöne Treppenbauen würde beibehalten.

Man müsste also schon irgendwie ein automatisches clearing nach jedem bilder-container machen...!?

Grüße,
Garvin

[yellowled]

Ich fürchte ein footer-clearing würde hier nicht helfen, denn es geht ja um nebeneinander positionierte bilder die verrutschen.

Stümpt. Mift.

Ich versuche (zu zivileren Uhrzeiten und in Ruhe) mal, das im Testblog zu reproduzieren und mir etwas auszudenken.

YL

[yellowled]

Ich versuche (zu zivileren Uhrzeiten und in Ruhe) mal, das im Testblog zu reproduzieren und mir etwas auszudenken.

So. Nochmal von vorne

Es ist richtig, dass das clear: both; im entryFooter hier nicht das eigentliche Problem löst. Aber es hilft, andere Probleme zu vermeiden, insofern kann es nicht schaden

Das eigentliche Problem offenbart sich, wenn man wie ich versucht, das Beispiel zu reproduzieren. Siehe:

http://yellowled.de/s9y/forum/floatedimages.png

Das ist im Prinzip Michaels Beispiel mit seiner »Lösung«, allerdings in Bulletproof blau und mit erheblich kürzeren Sätzen im Text »daneben«. Dass es bei Michael »funktioniert« ist also nackter Zufall. Sorry

Um das gewünschte Ergebnis zu erreichen, müsste man schlicht ganz anderen Code verwenden - man müsste jeweils das gefloatete Bild und den dazugehörigen Text in z.B. ein div verpacken und diesem div dann das clearing zuweisen. Etwa so:

Code: Select all

<div><div class="serendipity_imageComment_left" style="width: 32px"><div class="serendipity_imageComment_img"><!-- s9ymdb:10 --><img width="32" height="32"  src="/serendipity/uploads/icons/plugin.png" alt="" /></div><div class="serendipity_imageComment_txt">Bild 1</div></div><p>Lorem ipsum dolor sit amet, …</p></div><div style="clear: left;"><div class="serendipity_imageComment_left" style="width: 32px"><div class="serendipity_imageComment_img"><!-- s9ymdb:8 --><img width="32" height="32"  src="/serendipity/uploads/icons/image.png" alt="" /></div><div class="serendipity_imageComment_txt">Bild 2</div></div><p>Maecenas placerat purus …</p></div><div style="clear: left;"><div class="serendipity_imageComment_left" style="width: 32px"><div class="serendipity_imageComment_img"><!-- s9ymdb:6 --><img width="32" height="32"  src="/serendipity/uploads/icons/blog.png" alt="" /></div><div class="serendipity_imageComment_txt">Bild 3</div></div><p>Nunc eros lectus …</p></div>

Dann sieht das so aus: http://yellowled.de/s9y/forum/floatedcorrect.png, und zwar unabhängig von der Länge des nebenstehenden Textes.

Wesentlich anders geht es meines derzeitigen Erachtens (whoa, schon wieder fast zwei Uhr morgens!) leider nicht.

YL