Page 1 of 1
Problem mit Bildausrichtung
Posted: Sat Feb 09, 2008 8:45 pm
by 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
Re: Problem mit Bildausrichtung
Posted: Sun Feb 10, 2008 12:17 pm
by 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
Soweit meine "Lösung"
Posted: Sun Feb 10, 2008 2:04 pm
by 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
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
Re: Soweit meine "Lösung"
Posted: Sun Feb 10, 2008 5:00 pm
by yellowled
elmi42-melle wrote: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.
elmi42-melle wrote:Im Text zum Bild füge dann am Ende ein
an.
Igitt
Zum einen funktioniert das nicht, weil es "clear=all" gar nicht gibt bzw. es veraltet ist. Richtig wäre, wenn überhaupt:
... aber selbst das ist meines Erachtens unschön, da es ein Inline-Style ist, und die sind irgendwie generell unschön
elmi42-melle wrote: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
Re: Soweit meine "Lösung"
Posted: Sun Feb 10, 2008 5:42 pm
by 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
Re: Soweit meine "Lösung"
Posted: Sun Feb 10, 2008 11:29 pm
by yellowled
garvinhicking wrote: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
Re: Soweit meine "Lösung"
Posted: Mon Feb 11, 2008 2:08 am
by yellowled
yellowled wrote: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
