Liste und Float: list-marker ausrichten mit margin/padding

[Stefan]

Hallo,

ich habe ein Problem mit einer Liste:

<img style="float: left;" />
<p>Text</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Ich habe links ein Bild das umflossen wird. Nun soll daneben eine Liste hin. Leider passiert hier folgendes: Die List-Marker (Punkte) sind im Bild drin.
Margin und padding haben keine Auswirkung, weder bei ul noch bei li, bis zu dem Punkt, an dem der Wert größer ist als das Bild. Der Text ist bündig mit dem des p-Elements, dass soll aber nicht sein. Wenn ich dem li zum Beispiel ein padding-left gebe, gehen die Punkte weiter nach links und der Text nicht weiter nach rechts. Das ändert sich wenn ich "list-style-position: inside" mache, aber dann fängt der Text nach einem Zeilenumbruch unter dem Punkt an und nicht bündig mit dem Text der ersten Zeile.

Hat da irgendjemand eine Idee? Ich weiß da absolut nicht weiter.

Viele Grüße,
Stefan

[Thomas Luethi]

Hallo,

<img style="float: left;" />
<p>Text</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Was meint der Validator zu Deinem XHTML?
In den Strict-Varianten darf AFAIK ein IMG-Tag nicht
"im luftleeren Raum" schweben, also nicht ein direktes
Kind von BODY sein.

Ich würde mal versuchen, das Bild in ein P-Element
zu verpacken und alle CSS-Angaben (Breite, float) auf
dieses P-Element anzuwenden:

<p style="float:left; width:..px; margin-right:..px;"><img src="..." alt="..." width=".." height=".." /></p>

Abgesehen davon haben die Browser etwas eigene Vorstellungen
von der Listen-Gestaltung mit CSS und der Position des
Listen-Symbols (Bullet), siehe:
http://www.subotnik.net/style/list-box-test.html

HTH, mfg
Thomas

[Stefan]

Hallo,

<img style="float: left;" />
<p>Text</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Was meint der Validator zu Deinem XHTML?
In den Strict-Varianten darf AFAIK ein IMG-Tag nicht
"im luftleeren Raum" schweben, also nicht ein direktes
Kind von BODY sein.

Ich würde mal versuchen, das Bild in ein P-Element
zu verpacken und alle CSS-Angaben (Breite, float) auf
dieses P-Element anzuwenden:

<p style="float:left; width:..px; margin-right:..px;"><img src="..." alt="..." width=".." height=".." /></p>

Abgesehen davon haben die Browser etwas eigene Vorstellungen
von der Listen-Gestaltung mit CSS und der Position des
Listen-Symbols (Bullet), siehe:
http://www.subotnik.net/style/list-box-test.html

HTH, mfg
Thomas

Das Bild floatet in einem div, der Code ist nur ein Ausschnitt. Die Seite ist valid XHTML 1.1 nach W3C validator.

In FF3 funktioniert es leider genauso wenig wie im IE7. Und ich kriege es nichtmal für einen der beiden hin.

Das Bild in ein P zu setzen bringt leider nichts.
Noch irgendwelche Ideen? Ich hab schon viel ausprobiert, das quält mich schon seit Stunden.

Viele Grüße,
Stefan

[at]

Hallo.

In den Strict-Varianten darf AFAIK ein IMG-Tag nicht
"im luftleeren Raum" schweben, also nicht ein direktes
Kind von BODY sein.

Soweit klar, bis auf den Zusammenhang mit diesem Fall.

Abgesehen davon haben die Browser etwas eigene Vorstellungen
von der Listen-Gestaltung mit CSS und der Position des
Listen-Symbols (Bullet), siehe:
http://www.subotnik.net/style/list-box-test.html

Dort werden verglichen:

• "Internet Explorer 5 for Macintosh"
• "Netscape Navigator 6 / Mozilla"
• "Opera (version 5b1 for MacOS)"
  Da fehlt eigentlich nur noch Lynx.
  MfG, at

[Thomas Luethi]

Hallo,

In den Strict-Varianten darf AFAIK ein IMG-Tag nicht
"im luftleeren Raum" schweben, also nicht ein direktes
Kind von BODY sein.

Soweit klar, bis auf den Zusammenhang mit diesem Fall.

Der zitierte Quelltext im Ausgangsposting liess mich vermuten,
dass das IMG "im luftleeren Raum" schwebte, was aber offenbar
nicht der Fall ist.

http://www.subotnik.net/style/list-box-test.html

Dort werden verglichen:

• "Internet Explorer 5 for Macintosh"
• "Netscape Navigator 6 / Mozilla"
• "Opera (version 5b1 for MacOS)"
  Da fehlt eigentlich nur noch Lynx.

Und Netscape 4, das grosse Sorgenkind aller Webdesigner! ;-)

Du hast recht, die Seite ist punkto Browser leicht veraltet...
Aber sie zeigt schön, dass die Darstellung von Listen stark
vom Browser abhängt und dass man mit margin und padding von
UL und LI herumspielen kann bzw. alle 4 Werte definieren sollte,
wenn man für eine UL eine bestimmte Darstellung unbedingt will
oder sonstige Darstellungs-Probleme bei Listen hat.

Soweit ich bei einer kurzen Überprüfung feststelle, verhält sich
der MS IE 6.0 Win auf der Seite so, wie es für den MS IE 5.0 Mac
beschrieben ist.
Und Firefox 3.0 sowie Opera 9.26 zeigen die Seite so, wie es
dort für "Mozilla" beschrieben ist.

Freundliche Grüsse
Thomas

[at]

Hallo.

Der zitierte Quelltext im Ausgangsposting liess mich vermuten,
dass das IMG "im luftleeren Raum" schwebte, was aber offenbar
nicht der Fall ist.

Das hatte der Fragesteller ja auch schon klargestellt. Insofern war mein Nachhaken natürlich überflüssig.

Du hast recht, die Seite ist punkto Browser leicht veraltet...

Das meinte ich.

Aber sie zeigt schön, dass die Darstellung von Listen stark
vom Browser abhängt und dass man mit margin und padding von
UL und LI herumspielen kann bzw. alle 4 Werte definieren sollte,
wenn man für eine UL eine bestimmte Darstellung unbedingt will
oder sonstige Darstellungs-Probleme bei Listen hat.

Das stimmt natürlich nach wie vor.

Soweit ich bei einer kurzen Überprüfung feststelle, verhält sich
der MS IE 6.0 Win auf der Seite so, wie es für den MS IE 5.0 Mac
beschrieben ist.

Das hatte ich nicht ausprobiert, finde ich aber wirklich interessant, da ja die Mac-Version des IE als ein wahrer Exot gilt.

Und Firefox 3.0 sowie Opera 9.26 zeigen die Seite so, wie es
dort für "Mozilla" beschrieben ist.

Das kann ich auch für den aktuellen Opera bestätigen. Das war auch so etwas wie der Auslöse meiner Kritik.
MfG, at

[Daniel Richter]

Hallo,

ich habe ein Problem mit einer Liste:

<img style="float: left;" />
<p>Text</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Jaja, das ist ein altbekanntes Problem. Daher habe ich dazu mal einen Artikel auf einer Webseite untergebracht.

mfg. Daniel

[Stefan]

Hallo,

ich habe ein Problem mit einer Liste:

<img style="float: left;" />
<p>Text</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Jaja, das ist ein altbekanntes Problem. Daher habe ich dazu mal einen Artikel auf einer Webseite untergebracht.

mfg. Daniel

Hallo Daniel,

ich hab mir die Lösung auf deiner Homepage angeschaut, eine tolle Idee, sie hat bloß einen Haken:
Wenn das umfloatete Element zu Ende ist, geht die Liste nicht nach links, sondern bleibt dort. Ich habe ein fast gute Lösung gefunden: "position: relative; left 1.1em;". Dann wird das Element nach rechts verschoben. Ist nicht wirklich gut, da natürlich nach Bildende er zuweit links ist und rechts womöglich über was drüber kommt, aber es geht einigermaßen.
Für eine Lösung die komplett funktioniert wäre ich wirklich dankbar.

Viele Grüße,
Stefan

[Daniel Richter]

Hallo,

ich hab mir die Lösung auf deiner Homepage angeschaut, eine tolle Idee, sie hat bloß einen Haken:
Wenn das umfloatete Element zu Ende ist, geht die Liste nicht nach links, sondern bleibt dort.

Stimmt, das habe ich bisher noch gar nicht bedacht. Nun dachte ich gerade daran, die genannten Hacks auf die <li>s anzuwenden, aber dann scheint er die Listenpunkte nicht mehr anzuzeigen :-(

Ich habe ein fast gute Lösung gefunden: "position: relative; left 1.1em;".

Hm, also bei mir erscheint dann ein Scrollblaken, sofern das entsprechende Element keine Breite < 100%-1.1em zugewiesen bekommt.

Für eine Lösung die komplett funktioniert wäre ich wirklich dankbar.

Nur mal eine Idee:

  
<style>  
ul {  
 list-style-position:inline;  
}  
  
li div {  
 margin-left: 2em;  
}  
  
</style>  
  
<navi>  
<img />  
<ul>  
 <li><div>Text</div></li>  
 <li><div>Text</div></li>  
 <li><div>Text</div></li>  
</ul>  

mfg. Daniel

[Stefan]

Ich habe ein fast gute Lösung gefunden: "position: relative; left 1.1em;".

Hm, also bei mir erscheint dann ein Scrollblaken, sofern das entsprechende Element keine Breite < 100%-1.1em zugewiesen bekommt.

Das Teil hat bei mir zufällig eine geringere Breite, deswegen habe ich wohl kein Scrollbalken.

Für eine Lösung die komplett funktioniert wäre ich wirklich dankbar.

Nur mal eine Idee:

<style>
ul {
list-style-position:inline;
}

li div {
margin-left: 2em;
}

</style>

<navi>
<img />
<ul>
<li><div>Text</div></li>
<li><div>Text</div></li>
<li><div>Text</div></li>
</ul>

  
Dann habe ich die Punkte aber in der Zeile. Das ist keine Lösung. Ich glaube, dieses Element (ul) ist so schlecht, man kann sich besser was selber bauen mit div.  
  
Viele Grüße,  
Stefan

[Daniel Richter]

Hallo,

Ich glaube, dieses Element (ul) ist so schlecht

Ein HTML-Element ist niemals schlecht, nur weil es Probleme mit der Darstellung gibt.

man kann sich besser was selber bauen mit div.

Dann geht aber die Bedeutung (Sematik) verloren, was sehr schade wäre. Wenn du was selber bauen solltest, solltest du vielleicht mal Definitionslisten verwenden. Prinzipiell sind das ja auch nur normale Listen, wo du den Index selbst festelegen und somit auch selbst formatieren kannst. Ich denke mit

dt {  
 float: left;  
 …  
}

und

  
<img />  
<dl>  
<dt>1</dt>  
<dd>Eintrag 1</dd>  
<dt>2</dt>  
<dd>Eintrag 2</dd>  
…  

sollte dein Vorhaben umsetzbar sein.

mfg. Daniel

[at]

Hallo.

man kann sich besser was selber bauen mit div.
Dann geht aber die Bedeutung (Sematik) verloren, was sehr schade wäre. Wenn du was selber bauen solltest, solltest du vielleicht mal Definitionslisten verwenden.

Warum nicht weiterhin eine <ul>? Man kann die Listenpunktzeichen ja auch einfach abschalten, mittels ::before ein Zeichen nach Wahl vor die <li> setzen und einen im <li> befindlichen <p> entsprechend ausrichten.
MfG, at

[Daniel Richter]

Hallo,

man kann sich besser was selber bauen mit div.
Dann geht aber die Bedeutung (Sematik) verloren, was sehr schade wäre. Wenn du was selber bauen solltest, solltest du vielleicht mal Definitionslisten verwenden.

Warum nicht weiterhin eine <ul>? Man kann die Listenpunktzeichen ja auch einfach abschalten, mittels ::before ein Zeichen nach Wahl vor die <li> setzen und einen im <li> befindlichen <p> entsprechend ausrichten.

OK, das wär auch möglich. Allerdings ist die Browserunterstützung für ":before", vor allem im Zusammenhang mit countern, noch nicht so besonders gut.

Ansonsten wär das in der Tat ein guter Lösungsansatz, da sich die generischen Elemente ja auch in vollem Umfang formatieren lassen.

mfg. Daniel