Zum Inhalt springen

Liste rechts neben dem Bild -> Keine Einrückung

Erstellt am 21. November 2008 · 8 Antworten · letzte Antwort am 10. August 2009

Tags: HTML & CSS, Frage

Sheriff ·

hallo,

hab ein Problem und zwar,

wenn ein Bild links steht und von einem Fließtext rechts umflossen wird und rechts neben dem Bild eine Liste vorkommt, ist diese nicht eingerückt und Bullets sind im Bild beim Firefox 3, beim IE 7 liegen sie wohl hinter dem Bild.

Hat vielleciht jemand schon mal dieses Problem gehabt und vielleicht lösen können?

Habe schon zich Klassen via css angesprochen und rumprobiert, aber ich finde keine Lösung für dieses Problem. #angry#
Würde mich über Tipps freuen!
Vielen Dank schon mal im Voraus.

Thomas

just2b ·

Hallo,

dein CSS ist schlichtweg falsch. aus dem text geht nicht wirklich hervor bei welchem Browser es passt und bei welchem nicht.

und nein, du brauchst jetzt nicht dein css posten, url reicht

georg

Sheriff ·

danke für die info, aber es funzt nicht, normale Listen im Bodytext werden dadurch angesprochen, aber nicht die Listen die neben dem Bild sind und es umfließen. habe auch schon diverse Klassen bezüglich des textpics-image usw. angesprochen, aber nicht eine ist dafür verantwortlich.
😢

MEller ·

Ich kann das sehr gut reproduzieren. Text mit Bild Bildposition "Im Text links"

Ich habe einmal um jedes der Elemente einen Rahmen von 1px gemacht. Dann sieht man, dass die Elemente <p> und <ul> "unter" dem Bild bis an den linken Rand gehen.
Eine Lösung habe ich nicht finden können. Leider geht das nicht:

.csc-textpic-text ul li {
  border:1px solid red;
  margin-left: x;
}

Wobei x die Bildbreite plus den gewünschten Rand sein müßte. Mit X=320 entsteht ein Rand. Das hat auch den Nachteil, dass der Rand auch da ist wenn die Aufzählung um das Bild umbrechen soll, wie es "Im Text links" eigentlich verlangt. Und Bilder müssen ja nicht 300px breit sein...

Wenn Text mit Bild und "Neben dem Text links" verwendet wird, kann man ich mit

.csc-textpic-text ul li {
  border:1px solid red;
  margin-left:2em;
}

helfen.

Mich wundert dass das keinem anderen aufgefallen ist.

Ich verwende Typo3 V4.2.6 mit den default css styles.

hwt ·

Hallo,

ich sitze auch gerade an dem Problem.

Dass die Listenpunkte bei "(Bild) Neben dem Text links" hinter dem Bild liegen, hängt damit damit zusammen, dass standardmäßig die Aufzählungspunkte "outside" platziert werden. Hier hilft eine entsprechende margin-left-Angabe. Das ist aber eigentlich so ok.

Dass die Listen bei "(Bild) Im Text links" nicht umgebrochen werden, kann ich auch bestätigen, aber habe ebenfalls keine Lösung dafür.

Bei "(Bild) Im Text rechts" hingegen hat die Liste eine Breite von 100% und geht hinter dem Bild weiter, sodass hier die Liste das Bild umfließt.

Mein Problem ist derzeit, dass bei "(Bild) Im Text links" die Liste mit dem List-Style "inside" angezeigt wird, obwohl es dafür gar keine css-Formatierung gibt. Standardmäßig sollte "list-style" ja "outside" sein. Damit habe ich als Ergebnis dann zuviel Abstand da die Aufzählungspunkte in diesem Fall noch weiter rechts stehen. Bei allen anderen Umfließungen ist die Darstellung auch "outside".

Hat jemand noch einen Rat oder eine Idee dazu?

Grüße!

etux ·

Der Abstand zwischen Bild und Text (inklusive Listen) wird durch ein seitlicher Margin bei dem Bild bestimmt, wenn der Text das Bild umfliessen soll. Wenn das Bild nach links floatet, dann bekommt es also ein margin-right: xx.