Abstand zu folgendem Text in gleicher Zeile.

[Karl der Käfer]

Guten Morgen,

2 Angaben sollen so formatiert werden, dass sie den gleichen Abstand zu ihren Beschriftungen haben:

Alter:     30 Jahre
Größe:     180 cm

und nicht so:

Alter:30 Jahre
Haarfarbe:180 cm

Mit width und min-width funktiniert es nicht.
Oder ist hier eine Tabelle von Nöten ?

Vielen Dank

[Cheatah]

Hi,

Oder ist hier eine Tabelle von Nöten ?

es sind tabellarische Daten, d.h. eine Tabelle ist in jedem Fall zu rechtfertigen, egal ob man nun mit anderen Strukturen ebenfalls zum Ziel kommt.

Cheatah

[Thomas Luethi]

Hallo,

Alter:     30 Jahre
Größe:     180 cm
Mit width und min-width funktiniert es nicht.

Auf was willst Du die anwenden?
Geht AFAIK nur fuer Block-Elemente oder Elemente,
die zu Blocks gemacht wurden.
Und min-width kann der MS IE bis heute nicht.

Versuch mal folgendes:
span { display:block; width:10em; }

Oder ist hier eine Tabelle von Nöten ?

Sie waere hier IMHO durchaus erlaubt (tabellarische Daten).

Alternativ waere auch eine Definitionsliste sehr sinnvoll.
Die kannst Du wunderbar mit CSS gestalten,
indem Du ihre Elemente (dt, dd) formatierst.

Versuch mal folgendes:

<dl>
  <dt>Alter:</dt>
    <dd>30 Jahre</dd>
  <dt>Haarfarbe:</dt>
    <dd>180 cm</dd>
</dl>

dt { width:10em; float:left; clear:both; }
dd { width:10em; float:left; }

Gruesse,

Thomas

[wahsaga]

hi,

Versuch mal folgendes:
span { display:block; width:10em; }

wobei du hier durch display:block doch einen umbruch nach dem span erzeugen würdest, oder? also müsste m.e. noch zusätzlich gefloatet werden, damit der nachfolgende text in der gleichen zeile steht ...

gruss,
wahsaga

[Thomas Luethi]

Hallo,

span { display:block; width:10em; }

wobei du hier durch display:block doch einen umbruch nach dem span erzeugen würdest, oder? also müsste m.e. noch zusätzlich gefloatet werden, damit der nachfolgende text in der gleichen zeile steht ...

Du hast natuerlich recht.

Das Beispiel mit dem Span habe ich nicht getestet - das kommt davon.

Die Definitionsliste dagegen habe ich erfolgreich getestet.
Dort habe ich auch an das floaten gedacht...

Gruesse,

Thomas

[Karl der Käfer]

Hallo,

Alternativ waere auch eine Definitionsliste sehr sinnvoll.
Die kannst Du wunderbar mit CSS gestalten,
indem Du ihre Elemente (dt, dd) formatierst.

Das ist ja höchstinteressant. Was ist das denn? ;)
Sehe ich zum ersten Mal. Hast Du mal das Link zu Definitionslisten in Selfhtml oder woanders?

Vielen Dank

Werde die Ratschläge auf jeden Fall mal ausprobieren.

Gruß Karl

[wahsaga]

hi,

Das ist ja höchstinteressant. Was ist das denn? ;)
Sehe ich zum ersten Mal. Hast Du mal das Link zu Definitionslisten in Selfhtml oder woanders?

die solltest du über die quickbar eigentlich locker selber finden können - die tag-namen kennst du ja jetzt ...

aber na gut ... http://selfhtml.teamone.de/html/text/listen.htm#definition

gruss,
wahsaga

[Karl der Käfer]

Danke!

Gruß Karl

[Thomas Luethi]

Hallo,

Sehe ich zum ersten Mal.

Man lernt nie aus... ;-)

Hast Du mal das Link zu Definitionslisten in Selfhtml oder woanders?

http://selfhtml.teamone.de/html/text/listen.htm#definition
http://www.w3.org/TR/html401/struct/lists.html#h-10.3

Werde die Ratschläge auf jeden Fall mal ausprobieren.

Tue das!
Das mit der Def.liste ist getestet.
Du musst halt noch die Breite anpassen, je nachdem,
wieviele Buchstaben der laengste Eintrag hat.
Wenn Du die Einheit "em" nimmst, ist das ganze auch skalierbar,
d.h. der Benutzer kann die Schriftgroesse anpassen, ohne
dass das Dein Layout zerstoert.
http://selfhtml.teamone.de/css/formate/wertzuweisung.htm#numerische

Gruesse,

Thomas

[Ingo Turski]

Hi,

Das mit der Def.liste ist getestet.

wirklich? wenn ich Deine Angaben

dt { width:10em; float:left; clear:both; }
dd { width:10em; float:left; }

so eingebe, paßt es nicht nur im Mozilla, nicht im IE und auch nicht im Opera.
Nach der Devise: "weniger ist mehr" einfach die Definition für dd weglassen, dann geht's überall.

freundliche Grüße
Ingo

[Thomas Luethi]

Hallo,

Das mit der Def.liste ist getestet.
wirklich?

Um ehrlich zu sein, hatte ich nur kurz in Mozilla (1.2.1) geguckt,
ob mein (frisch drauflos getipptes) Beispiel funktioniert.
Und dort sah es aus, wie erwartet.
Aber Du hast recht, in MS IE (hier 5.0) und Opera (5.12 und 7.1)
funktioniert es so nicht.

Nach der Devise: "weniger ist mehr" einfach die Definition für dd weglassen, dann geht's überall.

Ja, zumindest im MS IE, und immer noch in Mozilla.
Opera 5.12 und 7.1 koennen es nicht; sie zeigen
es halt immer noch im "klassischen" DL-Layout an:
Alter:
  30 Jahre
Haarfarbe:
  180 cm
(komische Haarfarbe, uebrigens!)

---

Seltsam ist, was die Browser anzeigen, wenn man die
Grenzen der Bloecke mal anzeigen laesst:

dt { width:10em; float:left; clear:both; border:1px dotted green; }
dd { border:1px dashed red;}

MS IE und Mozilla zeigen Ueberlappungen, wobei aber
der Inhalt von DD erst dort anfaengt, wo DT fertig ist.
Wenn man die Border weglaesst, ist die Loesung also
fuer MS IE (zumindest 5.0) und Mozilla brauchbar:
dt { width:10em; float:left; clear:both; }

Also, ich nehme meine Aussage zurueck, dass die
Definitionsliste mit CSS wunderbar formatiert werden koenne.
Es gibt offenbar noch einige Tuecken mit den real
existierenden Browsern...

Gruesse,

Thomas

[Ingo Turski]

Hi,

Nach der Devise: "weniger ist mehr" einfach die Definition für dd weglassen, dann geht's überall.

Ja, zumindest im MS IE, und immer noch in Mozilla.
Opera 5.12 und 7.1 koennen es nicht; sie zeigen

also Opera 7.11 zeigt es dann auch wie gewünscht an. Und damit sind doch eigentlich die wichtigsten Browser bedient, oder?
Und wenn ich Rahmen drum setze, sind sich IE 6, Mozilla 1.4b und Opera 7.11 zumindest auch ziemlich einig.

freundliche Grüße
Ingo