Gefloatetes Bild und Liste im Fließtext

[ph!L]

Hallo Zusammen,

ich habe folgendes Problem: Ich habe bei einem Projekt eine Seite mit Fließtext. Innerhalb dieses Fließtextes kommt eine Liste vor. Über "Bild hinzufügen" unter dem TinyMCE habe ich ein Bild eingefügt, dieses auf links floaten gestellt. Nun fließt der Text auch schön um das Bild herum, nur die Liste berührt das Bild (Siehe Anhang)

Quelltext:

<div class="ce_text block">
<div class="image_container float_left"  style="float:left; width: 110px">
<a href="tl_files/Artikel/Buecher-und-Studien/2008/Bilder/Buch_Projektabwicklung-in-der-Bauwirtschaft.jpg" rel="lightbox" title="Projektabwicklung in der Bauwirtschaft">
<img src="system/html/Buch_Projektabwicklung-in-der-Bauwirtschaft-9d37209e.jpg" width="100" height="156" alt="Projektabwicklung in der Bauwirtschaft" />
</a>
</div>

<p>Dabei werden neue lebenszyklusorientierte Projektabwicklungsformen vorgestellt. Im Fokus stehen vor allem die PPP-Projektabwicklungsmodelle für die Stadt- und Immobilienentwicklung, für den Unterhalt von Strassen- und Kanalnetzen, Infrastrukturen (Strassen, Kläranlagen, etc.) und Hochbauten (Schulen, Vollzugsanstalten, etc.).</p>

<h4>Ferner werden folgende Analysemodelle vorgestellt:</h4>
<ul>
<li>Generisch-axiomatisches Anforderungsmanagement</li>
<li>Nutzwertanalyse zur systematischen Wahl der Projektabwicklungsform</li>
<li>Wirtschaftlichkeitsanalysemodell zur Bewertung von PPP-Projekten mit investivem sowie nicht investivem Charakter.</li>
</ul>
</div>

und hier mein CSS für das Bild. Die Liste wird nicht formatiert.

#main .image_container {
	margin:15px 0 0;
	border:1px solid #ccc;
}

#main .image_container.float_left {
	margin-top:15px;
	margin-right:10px;
	margin-bottom:10px;
}
#main .image_container.float_right {
	margin:15px 0 10px 10px;
}

#main .image_container img {
	padding:5px 5px 0;
}

#main .image_container .caption {
	padding:5px;
	background-color:#ddd;
}

Nun habe ich keinerlei Idee, wie ich eine Regel formulieren kann, die das verhindert. Für den BE Benutzer muss das natürlich alles automatisiert ablaufen, der kann nicht um jede Liste noch eine Klasse rummachen oder so.

Bin wirklich ratlos, habt ihr vielleicht eine Idee?

Danke und Gruß,

[Elvador]

Das Ganze ist auf die Listenpunkte zurückzuführen.
Ich gehe davon aus, dass du die Standardeinstellung

list-style-position: outside;

nicht verändert hast?

Dann würde ich auf das über eine allgemeine Abstandsformatierung (wenn du "ul" auswählst padding, bei "li" margin) oder eben das obige in "inside" abwandeln. Fürs passende einfach ausprobieren.

Ich hoffe das hilft weiter?

[ph!L]

Vielen Dank für deine Antwort,

an "inside" hatte ich auch schon gedacht, dies hat ja allerdings den Effekt, dass bei einer neuen Zeile des Listenpunktes, dieser nicht mehr listentypisch formatiert ist. Die zweite Zeile würde dann nämlich direkt unter dem Listenpunkt beginnen. Daher ist das nur ein nicht 100% funktionierender Kompromiss.

Ich habe die Tage etwas danach gegoogelt und festgestellt, dass viele Leute dieses Problem, aber niemand eine wirkliche Lösung hat. Das einzig funktionierende wäre ein margin zur Seite des Bildes, aber dann würde das natürlich jede Liste machen und die flexibilität ist dahin.

Werde mir wohl kurzzeitig mit list-style-position: inside; helfen, aber eine wirkliche Lösung ist das nicht :-(

[neueplaneten]

  * html ul, * html ol, * html dl { position:relative; } /*Background Bug IE 5.x / IE 6*/

  ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; /*Optional Schick*/ background:#f2f2f2;border:1px solid #ccc; }

  ul { list-style-type:disc; }
  ul ul { list-style-type:circle; margin-bottom:0; }

  ol { list-style-type:decimal; }
  ol ol { list-style-type:lower-latin; margin-bottom:0; }

  li { margin-left:0.8em; line-height:1.5em; }

  dt { font-weight:bold; }
  dd { margin:0 0 1em 0.8em; }

[ph!L]

  * html ul, * html ol, * html dl { position:relative; } /*Background Bug IE 5.x / IE 6*/

  ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; /*Optional Schick*/ background:#f2f2f2;border:1px solid #ccc; }

  ul { list-style-type:disc; }
  ul ul { list-style-type:circle; margin-bottom:0; }

  ol { list-style-type:decimal; }
  ol ol { list-style-type:lower-latin; margin-bottom:0; }

  li { margin-left:0.8em; line-height:1.5em; }

  dt { font-weight:bold; }
  dd { margin:0 0 1em 0.8em; }

ähm... was ist das für code? was sollte ich richtig formatieren??

[neueplaneten]

Setz mal nen link, dann kann ich das mit Firebug mal live probieren. Mit dem Code rückst Du die Liste etwas nach innen, ohne dabei list-style:inside; zu setzen.

[neueplaneten]

AW: link zum float problem

ich hab jetzt übrigens gerade herausgefunden, dass es funktioniert wie gewünscht wenn ich dem <ul> ein umgebendes <div style="overflow: hidden"> gebe. Hast du eine Idee wie ich das im TinyMCE entsprechend eingeben kann?

Danke und Gruß

---------------------------

Es gibt 2 Methoden um floats zu benenden.

1. .clearfix-Hack (Google mal)
2. overflow

.floatbox{
overflow:hidden
}

Ich kenne das von Joomla noch, nicht wechseln deshalb, aber mit TL und Tiny geht das auch. Du kannst in TinyMCE als Dropdown-Felder CSS-Klassen anlegen. Die Methode habe ich bereits gesehen, musste Sie aber bis jetzt noch nicht umsetzen.

https://community.contao.org/de/show...nd-styleselect

https://contao.org/tinymce-anpassen.html

[ph!L]

Okay, wir machen das hier mal für die Allgemeinheit weiter ;-)

Die Lösung ist also besagtes <div style="overflow: hidden;">

Ich werde mal entsprechend probieren den TinyMCE so einzurichten. Wie man die Klasse einrichtet weiß ich, aber das würden die Redakteure sicher nicht checken, deshalb werde ich den TinyMCE so einrichten, dass er automatisch das div um alle Listen macht.

Danke soweit!

[neueplaneten]

Wie man die Klasse einrichtet weiß ich, aber das würden die Redakteure sicher nicht checken, deshalb werde ich den TinyMCE so einrichten, dass er automatisch das div um alle Listen macht.

Wenn Du das kannst, sollte Automatisierungen, dann bitte mal ne Anleitung dokumentieren und entweder hier posten oder mir schicken.

Danke...Du sagst es, das checken die Redakteure nicht...