Text wie in Word bei "TABS" darstellen

[agrossm]

Hallo,

ich habe Liste mit 2 Zeilen. In der ersten Zeile steht ein kurzer Text (10Zeichen). In der zweiten Zeile steht ein langer Text (20Zeichen).

Ich möchte hinter beiden Texten einen dritten TExt mit 10 Zeichen einfügen. Damit das ganze vernünftig aus sieht soll der 3. TExt in Zeile 1 und 2 an der selben Position beginnen (unmabhängg davon wie lang der vorherige Text ist).

Bei word verschiebt man dafür einfach die "Tabs", wie kann ich das in HTML-CSS realisieren. Hab schon einiges ausprobiert (z.B. über ne Tabelle, oder über Positions).

danke für eure Hilfe

-agrossm-

www.agrossm.de

[Gunnar Bittersmann]

@@agrossm:

nuqneH

Zitat 1388

• Tips für Fragende

Qapla'

[Beat]

ich habe Liste mit 2 Zeilen. In der ersten Zeile steht ein kurzer Text (10Zeichen). In der zweiten Zeile steht ein langer Text (20Zeichen).

Bis hierher habe ich verstanden.

Ich möchte hinter beiden Texten einen dritten TExt mit 10 Zeichen einfügen. Damit das ganze vernünftig aus sieht soll der 3. TExt in Zeile 1 und 2 an der selben Position beginnen (unmabhängg davon wie lang der vorherige Text ist).

Es ist schon einer Errungenschaft, wenn der Autor seine Sätze so formuliert, dass er sie nach einem Jahr noch versteht.

Bei word verschiebt man dafür einfach die "Tabs", wie kann ich das in HTML-CSS realisieren. Hab schon einiges ausprobiert (z.B. über ne Tabelle, oder über Positions).

Wenn du das willst

@erste Zeile         @dritte Zeile
@zweite lange Zeile  @mit Fortsetzung

So hast du die 1. und 2. Zeile zu gruppieren und die Gruppe links zu floaten.

mfg Beat

[Deus Figendi]

@erste Zeile         @dritte Zeile
@zweite lange Zeile  @mit Fortsetzung

Bei dir hab ich aber auch ein Problem damit zu ermitteln ob "mit Fortsetzung" zur zweiten oder dritten "Zeile" gehört.
Aber ich denke du hast die Fragestellung richtig verstanden (wenngleich das echt hart ist):
@1111111111             @33333
@22222222222222222222    33333
und das hast du mit Tabellen nicht hinbekommen? o.0
naja etwa so:

<ul class="leftfloat bigwidth">  
 <li>11111 1111</li>  
 <li>22222 222222 2222 22</li>  
</ul>  
<ul class="smallwidth">  
 <li>3333 333 3</li>  
</ul><nextElement class="clearleft"></nextElement>

.leftfloat { float:left; }  
.bigwidth { width:22em; }  
.smallwidth { width:12em; }  
.clearleft { clear:left; }

Wie Beat schon schrob.

Am Besten ist aber wahrscheinlich wenn du ein Bild malst!

[MrMurphy]

Hallo,

eine direkte Tabulator-Funktion gibt es unter html / css nicht. Um Text trotzdem strukturiert und barriefrei (bzw. darauf vorbereitet) darzustellen sehe ich zur Zeit drei Möglichkeiten:

a) eine Tabelle

b) der PRE-Tag (<pre>)
Innerhalb des PRE-Tags werden alle Buchstaben und Leerzeichen mit dem gleichen Abstand dargestellt und mehrfache Leerzeichen auch als solche übernommen. Infos dazu auf:

http://de.selfhtml.org/html/text/praeformatiert.htm@title=http://de.selfhtml.org/html/text/praeformatiert.htm

c) mittels formatierter Span-Tags, beschrieben z.B. auf

http://www.existenznachweis.de/css/257/tabulator

Um das deutlicher darzustellen habe den Text mal auf drei Zeilen mit vier Spalten erweitert:

<span style="width:50px;display:block;float:left;">  
Herr</span><span style="width:80px;display:block;float:left;">  
Meier</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45678<br />  
  
<span style="width:50px;display:block;float:left;">  
Frau</span><span style="width:80px;display:block;float:left;">  
Welke</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45677<br />  
  
<span style="width:50px;display:block;float:left;">  
Herr</span><span style="width:80px;display:block;float:left;">  
Schmidt</span><span style="width:50px;display:block;float:left;">  
Tel.</span>0123/45678<br />

Deutlich übersichtlicher wird es natürlich, wenn die Formatierung mittels CSS ausgelagert wird, außerdem kann die Spaltenbreite dann zentraler definiert werden. Damit das Beispiel einfach kopiert werden kann habe ich den Quelltext für eine komplette Seite erstellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
span{  
	display: block;  
	float: left;  
}  
#anrede{  
	width: 60px;  
}  
#name{  
	width: 150px;  
}  
#telefon{  
	width: 50px;  
}  
</style>  
</head>  
<body>  
<span id="anrede">Herr</span>  
<span id="name">Meier</span>  
<span id="telefon">Tel.</span>  
0123789/333-67<br />  
  
<span id="anrede">Frau</span>  
<span id="name">Welke</span>  
<span id="telefon">Tel.</span>  
0123789/333-68<br />  
  
<span id="anrede">Herr</span>  
<span id="name">Schmidt</span>  
<span id="telefon">Tel.</span>  
0123789/333-69<br />  
</body>  
</html>

Die Spalten können natürlich noch weiter formatiert werden, z. B. durch Hintergrundfarben.

Gruss

MrMurphy

[Beat]

<span id="murphy">Hicks</span>
<span id="murphy">Rülps</span>
<span id="murphy">Gulp</span>

Kurier mal deinen Rausch aus und überstrapazier nicht deine Glaskugel.

mfg Beat

[MrMurphy]

Hallo,

ich habe grade gesehen, das mein letzes Beispiel nicht korrekt ist. Statt "id" sollte man besser "class" nehmen, da eine "id" eindeutig sein soll und im html-Quellcode deshalb nur einmal vorkommen darf. Das Beispiel sollte deshalb besser so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
span{  
	display: block;  
	float: left;  
}  
.anrede{  
	width: 60px;  
}  
.name{  
	width: 140px;  
}  
.telefon{  
	width: 50px;  
}  
</style>  
</head>  
<body>  
<span class="anrede">Herr</span>  
<span class="name">Meier</span>  
<span class="telefon">Tel.</span>  
0123789/333-67<br />  
  
<span class="anrede">Frau</span>  
<span class="name">Welke</span>  
<span class="telefon">Tel.</span>  
0123789/333-68<br />  
  
<span class="anrede">Herr</span>  
<span class="name">Schmidt</span>  
<span class="telefon">Tel.</span>  
0123789/333-69<br />  
  
</body>  
</html>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

a) eine Tabelle

Für tabellarische Daten, ja. Das von dir angegebene Beispiel sind solche, da gilt, was Cheatah sagte.

b) der PRE-Tag (<pre>)
Innerhalb des PRE-Tags […]

Da gilt, was Jens Meiert sagte. Du meinst: innerhalb des 'pre'-Elements

[…] werden alle Buchstaben und Leerzeichen mit dem gleichen Abstand dargestellt

Und das kann man so auch nicht sagen. 'pre { font-family: sans-serif }' und aus ist mit dicktengleicher Schrift (bei vernünftiger Browsereinstellung).

und mehrfache Leerzeichen auch als solche übernommen.

Auch diese Einstellung des Browserstylesheets lässt sich überschreiben.

c) mittels formatierter Span-Tags […] Um das deutlicher darzustellen habe den Text mal auf drei Zeilen mit vier Spalten erweitert:

„Zeilen“ und „Spalten“ macht deutlich, dass es sich hier um eine Tabelle handelt, s.o.

<span style="width:50px;display:block;float:left;">

Verwende nie Inline-Styles, denn

Deutlich übersichtlicher wird es natürlich, wenn die Formatierung mittels CSS ausgelagert wird

Du sagst es.

BTW, 'display: block' ist überflüssig, das wird durch 'float: left' sowieso gesetzt. Für ältere IEs wäre 'display: inline' gegen doubled float-margin bug u.a. zu setzen.

<span id="anrede">Herr</span>
<span id="name">Meier</span>
<span id="telefon">Tel.</span>
0123789/333-67<br />

Sinnvoll ließen sich hier Klassennamen von Mikroformaten nutzen.

Qapla'