Bilder einbinden

[carpe]

Ich habe immer noch Probleme, Bilder in meine Beiträge korrekt formatiert einzubinden. Momentan bekomme ich es im obersten Beitrag nicht hin, nach den ersten 4 Bildern den Text in einer neuen Zeile auszugeben. Und warum die zweite Bildreihe versetzt angeordnet wird wiess ich ehrlich gesagt auch nicht. Kann da mal jemand reinschauen?
www.frank-knauber.de

Ich habe lediglich Textile plugin für die Textformatierung installiert.

[yellowled]

Momentan bekomme ich es im obersten Beitrag nicht hin, nach den ersten 4 Bildern den Text in einer neuen Zeile auszugeben.

Wann immer Du Bilder nebeneinander anordnest oder Bilder neben Text anordnest, weist Du mindestens einem, hier 4 Bildern die CSS-Eigenschaft float zu – genauer gesagt übernimmt das die Mediendatenbank für Dich, indem sie den Bildern eine CSS-Klasse zuweist, welche die Eigenschaft float erhält.

float bewirkt, dass das Element, dem es zugewiesen wird (hier: die 4 Bilder) von allen folgenden Elementen (hier: das folgende Bild, beim letzten Bild der folgende Text) in eine vorgegebene Richtung (float: left; oder float: right;) umflossen wird, sofern dafür im Layout Platz ist. Das hier zu beobachtende Verhalten ist also zunächst einmal technisch korrekt.

Um das zu verhindern, muss Du entweder dafür sorgen, dass die nebeneinander angeordneten Bilder die volle Breite der Inhaltsspalte ausfüllen, oder Du musst dem auf eine Bildergruppe folgenden Element mitteilen, dass es den Fluss unterbrechen soll. Das nennt man "floats clearen". Dafür gibt es verschiedene Techniken, die einfachste und sauberste ist es, dem clearenden Element (hier: der auf die Bilderreihe folgende Textabsatz) die CSS-Eigenschaft clear: both; zuzuweisen.

Nun ist es aber mit Textile nicht ganz trivial, das zu erreichen. Man kann zwar Textile mit HTML mischen, aber eben nicht dem – in Textile automatisch erzeugten – <p>-Element eine Klasse zuweisen. Daher würde ich hier eine andere Vorgehensweise empfehlen. Setze folgendes in Deine style.css:

Code: Select all

.reihe {
    float: left;
    width: 100%;
}

Für eine solche Bilderreihe schreibst Du im Eintragseditor:

Code: Select all

<div class="reihe">

</div>

und fügst Deine Bilder zwischen diese Tags in die Leerzeile ein.

Und warum die zweite Bildreihe versetzt angeordnet wird wiess ich ehrlich gesagt auch nicht.

Weil zwischen den Bildern (genauer: zwischen den die einzelnen Bilder umschließenden <a>-Elementen) jeweils noch ein <br>, also ein (unerwünschter) Zeilenumbruch, steht.

Auch das ist technisch korrektes Verhalten. Ich nehme an, im Eintragseditor sieht der entsprechende Abschnitt so aus, dass jeder Bildlink auf einer eigenen Zeile steht? Textile konvertiert Zeilenumbrüche wie folgt:

* steht zwischen zwei Zeilen (Textile-)Text eine Leerzeile, erzeugt Textile Absätze (<p>…</p>)
* steht zwischen zwei Zeilen (Textile-)Text keine Leerzeile, erzeugt Textile einen Zeilenumbruch (<br>)

Ich nehme mal nicht an, dass Du Textile-Syntax nutzt, um Bilder einzufügen, sondern den Button „Mediendatenbank“ im Eintragseditor. Dieser erzeugt in etwa sowas:

Code: Select all

<a class="serendipity_image_link"  href='/serendipity/uploads/foo.JPG'><!-- s9ymdb:2 --><img class="serendipity_image_left" width="150" height="113"  src="/serendipity/uploads/foo.serendipityThumb.JPG"  alt="" /></a>
<a class="serendipity_image_link"  href='/serendipity/uploads/foo.JPG'><!-- s9ymdb:2 --><img class="serendipity_image_left" width="150" height="113"  src="/serendipity/uploads/foo.serendipityThumb.JPG"  alt="" /></a>

Wenn Du dafür sorgst, dass mehrere Links im Eintragseditor in einer Zeile stehen, sollten sie sich wieder gleichmäßig anordnen.

YL

[carpe]

Perfekt. Danke Matthias.
Jetzt müsste man sich so einen Codeschnipsel nur noch im Editor auf einen Button legen können.*g* Bis zum nächsten Eintrag habe ich das garantiert wieder aus dem Sinn.

Wenn Du dafür sorgst, dass mehrere Links im Eintragseditor in einer Zeile stehen, sollten sie sich wieder gleichmäßig anordnen.

Mir wird das immer so unübersichtlich im Editor, wenn ich die Bilderlinks aneinanderklatsche. Möchte ich dann doch nochmals ein BIld löschen oder verschieben muss man immer lange Linkanfang und Ende suchen.

[yellowled]

Jetzt müsste man sich so einen Codeschnipsel nur noch im Editor auf einen Button legen können.*g*

Dann schau Dir mal das Plugin „Sonderzeichen/Erweiterte Buttons für Non-WYSIWYG“, insbesondere dessen Option „Custom HTML-Tags“ an.

Mir wird das immer so unübersichtlich im Editor, wenn ich die Bilderlinks aneinanderklatsche. Möchte ich dann doch nochmals ein BIld löschen oder verschieben muss man immer lange Linkanfang und Ende suchen.

Es gibt einen (relativ dreckigen) CSS-Trick dagegen, der dann allerdings nur greift, wenn Du diese Umbrüche innerhalb des reihe-<div>s hast:

Code: Select all

.reihe br {
    display: none;
    height: 0;
    visibility: hidden;
}

Hat halt den Nachteil, dass Du innerhalb des reihe-<div>s auch keine beabsichtigten Umbrüche mehr setzen kannst.

YL