Liste der Anhänge anzeigen (Anzahl: 1)
Gefloatetes Bild und Liste im Fließtext
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:
HTML-Code:
<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.
Code:
#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ß,
Solltest Du schon richtig formatieren
Code:
* 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; }
