|
|||
Liste und Bild mit Float: wie?
Wie man sieht, kleben die Pfeile (list-style-image) im Bild und beachten den margin vom Bild garnicht. Wie geht das noch zu korrigieren, hat irgendein Spezialist eine Ahnung? Geändert von Martu (30.06.2009 um 10:43 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
Naja jetzt sind keine Symbole am Bild mehr da. Ich frage mich erstaunt wieso Code:
.staniliste li {margin-left:30px; margin-top:20px; list-style:none; background-image:url(list.gif); background-repeat:no-repeat; padding-left:18px;} |
|
|||
Bin mir zwar nicht sicher, aber vielleicht hilft dir das weiter:
http://xhtmlforum.de/55856-listen-pr...-position.html |
|
||||
Auf diesem Link wird die ul durch Erzeugen eines neuen Block Formatting Contexts komplett neben das Bild gestellt. Das kann man allerdings auch viel einfacher haben (und vor allem sauberer!), indem man ul einfach margin-left passend zur Breite des Bildes gibt.
In beiden Fällen sieht das Resultat allerdings nicht aus wie auf der Grafik, sondern auch die Punkte unterhalb des Bildes sind genauso weit nach rechts eingerückt wie die neben dem Bild. Für ein Resultat wie auf dem Bild müsste eine andere Lösung her.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Die Sache mit Floats ist folgende: Nicht die Blockelemente, die einem Float folgen, stellen sich neben diesen, sondern nur ihre Inline-Inhalte (also auch Text). Bei einer Liste ist es genauso: Verhält sich der Browser korrekt, reichen die auf einen Left-Float folgenden li trotzdem bis zum linken Rand, nur ihre Inhalte weichen diesem nach rechts aus. Bei Listen tritt noch der Sonderfall ein, dass das Listensymbol je nach Browser entweder mit dem Inhalt nach rechts "mitgeht" oder nicht.
Sollen nun die li dem Float komplett ausweichen, ist der Ansatz des neuen Block Formatting Contexts schon richtig, und was mir im konkreten Fall spontan einfällt: Code:
ul { list-style: none; } li { background: url(symbol.png) no-repeat 0 .5em; padding: 0 0 1em 20px; overflow: auto; display: block; /* Opera 8 */ } * html li { overflow: visible; height: 1px; }
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (30.06.2009 um 13:43 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bilder im div mit float positionieren | henmey | CSS | 4 | 25.01.2009 02:53 |
Abstand zwischen Bild und Float-Element | pinguino | CSS | 4 | 21.08.2008 18:55 |
verschachtelungsproblem mit float left | Holger (HMR) | CSS | 6 | 01.09.2005 18:19 |
Zeilenumbruch bei horizontal nebeneinanderliegenden divs | GrafZahl | Knowledge Base | 10 | 16.07.2004 17:13 |