Thomas Luethi: genauer Abstand in Liste?

Beitrag lesen

Hallo,

Ich habe eine Liste:
und das ganze soll genau so aussehen: <img src="http://www.cgdesign.de/selfforum.gif" border="0" alt="">

Von der Logik her ist das fuer mich eine Definitionsliste (<DL>)
<dl>
  <dt>Vorschau</dt>
  <dd>Zeigt Ihnen ...</dd>
  <!-- u.s.w. -->
</dl>

Ein Beispiel zur Formatierung einer DL findest Du unter
http://www.w3.org/TR/REC-CSS2/visuren.html#compact
Weiss allerdings nicht, ob "die Browser" das auch so umsetzen.

Ansonsten musst Du halt mit float und so rumspielen.
dt { clear:left; float:left; width:15em; }
dd { float:left; width:20em; }
oder so...
Evtl. brauche beide noch ein display:block;

Wenn Du das Bullet unbedingt willst, mach es als <IMG>-Tag ins <DT> rein.
Wenn es nur Zierde ist, kannst Du es natuerlich auch mit CSS
als generierten Inhalt (mit :before) einblenden.

Richtig zuverlaessig kriegst Du Dein Wunsch-Layout wohl nur mit
einer dreispaltigen Tabelle hin. Aber das ist natuerlich nicht die
"saubere" Loesung.

Wer kann mir helfen? Ich komme wirklich nicht weiter, ich brauch eigentlich nur den Abstand zwischen "Vorschau" und "zeigt Ihnen.. usw... das andere ist ja kein Problem, nur hänge ich da irgendwie... mit css und padding-left gehts auch nicht so toll..

Mit der Formatierung von Aufzaehlungslisten (<UL>, <OL>) ist es so eine Sache,
siehe http://www.subotnik.net/style/list-box-test.html
und weitere Quellen
http://www.google.com/search?q=lists+css+margin
http://www.google.com/search?q=listen+css+margin
Jeder Browser hat so seine eigenen Ideen, wo das Aufzaehlungszeichen
(Bullet) sei, und was mit den Margins/Paddings ist...

Gruesse,

Thomas