genauer Abstand in Liste?

[Christoph]

Hallo Ihrs

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

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..
Für eine kleine Hilfe wäre ich sehr dankbar!

Liebe Grüße

Christoph

[Helmut Weber]

Hallo Christoph,

im Prinzip möchtest Du ja, das die zweite Zeile gegenüber der ersten Zeile eingerückt ist. Schau Dir mal folgenden Link an:
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#text_indent

Gruß
Helmut Weber

[Thomas Luethi]

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

[MudGuard]

Hi,

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

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..
Für eine kleine Hilfe wäre ich sehr dankbar!

So würde ich das lösen:

dt { clear:both; float:left; }
dd { margin-left:8em; }

dt:before { content:'\B7 '; font-weight:bold; padding-right:1em; }
/* ggf. entsprechendes Bildchen verwenden oder, wenn es auch in CSS-mäßig rückständigen Browsern (z.B. IE) funktionieren soll, als img-Element oder Zeichen direkt in alle dt einbinden */

<dl>
  <dt>eins:</dt>
  <dd>kurzer Text</dd>

<dt>zwei:</dt>
  <dd>
    Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne, daß er ihnen eine Geschichte erzählen möge. Da fing der Vater an:
    Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne, daß er ihnen eine Geschichte erzählen möge. Da fing der Vater an:
  </dd>

<dt>drei mit langem Titel:</dt>
  <dd>kurzer Text</dd>
</dl>

cu,
Andreas