Thema: List Style und Bild links überlappen

Hi,

sobald ich in einem Beitrag das Bild nach links ausrichte und ein List Style daneben auf die rechte Seite setze, überlappen die list style images das Bild.

Das sieht sehr bescheiden aus. ICh würde gerne wissen, mit welchem CSS Befehl ich den list style inkl Bullet NEBEN das Bild bekomme.

Sodass dies nicht überlappt.

Grüße.
David

Zitat von Der Platzwart

Grundsätzlich bekommt man Abstand nach links mit "padding-left: XYpx;" hin.

Hi,

damit man mir folgen kann, hier ein Auszug des Codes:

Code:

##### DAS STYLESHEET
p img { margin: 5px 10px 0 0;float:left;border:none;}

li {margin-left:0px;}
ul {margin-left:0;padding-left:15px;}

##### HTML/QUELLCODE

<table class="contentpaneopen">



<tr>
<td valign="top">
<p><img src="/cms/images/stories/bildvorlage.jpg" border="0" alt="Bildvorlage" title="Bildvorlage" align="left" />Unser Beitrag zum <strong>Umweltschutz </strong>ist für sie bestimmt. Denn nicht nur die Bundesregierung gibt gezielte Anstöße, sparsamer mit Ressourcen umzugehen und Schadstoffe weitgehend zu vermeiden. Eine wichtige Initiative ist dabei die neue <strong>Energie-Einsparverordnung (EnEV)</strong>, Sie richtet sich an Bauherren, Eigentümer und Betreiber von Zentralheizungen, Brauchwasser-Anlagen und Einzelgeräten. Hier einige wichtige Auszüge aus dem Verordnungstext, die deutlich machen, dass auch Betreiber von Kleinfeuerungsanlagen zukünftig in die Pflicht genommen werden. Neben den Informationen zu dieser Energie-Einsparverordnung (EnEV) bieten wir ihnen noch folgende Informationen zum Umweltschutz an:</p>
<p> </p>
<ul>

<li>Energie-Einsparverordnung EnEV</li>
<li>Wassersparmaßnahmen</li>
<li>Querschnittsanpassung</li>
<li>Schornsteinsanierung</li>
<li>Öl-/Gas-Brenner-Wartung</li>
<li>Brennwerttechnik</li>
<li>Regenwasserverwertung</li>
<li>Kundendienst</li>
</ul>

<p> </p>

</td>
</tr>

</table>
<span class="article_separator">&nbsp;</span>
	</div>
	<div id="footer"></div>
</div></div>

Übrigends kannst du mit padding nur den Innenabstand bestimmen. Per Margin hatte ich das schon versucht. Deswegen ergab dies ja keine Lösung.

Grüße,
David

Hi,

die images und der content liegen in einem div. Das System macht daraus scheinbar sehr gerne Tabellen im Quellcode.

Ich kann zwar dem Bild entsprechend das Margin/Padding geben, doch dann bekomme ich ein Problem der anderen Art.

Ich hatte die fixe Idee, auf der Startseite zwei Bilder als Teaser zu hinterlegen, die entsprechend nach KLick auf das Bild in ein Beitrag verlinken.

Würde ich also dem css *p img* ein Padding/Margin mitgeben, verschiebt sich automatisch auch der Teaser (rechts) im zweispaltigen Bloglayout.

Somit stimmt dann der Abstand nicht mehr und ich muss es anders versuchen.

Welche Möglichkeit habe ich? Sollte ich eventuell das <p> in der Index HTML entfernen? Kann es sein, dass das System die <p> class automatisch bei Text vergibt? So könnte ich dann nämlich die Teaser in ein Modul packen und es ausserhalb des <p> Tags positionieren.

Oder würdet ihr in dem Fall einen anderen Lösungsweg vorschlagen?

Grüße,
David Odenthal

HTML-Code:

li {
 list-style-position: inside;
}