agrossm: Text wie in Word bei "TABS" darstellen

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

  1. @@agrossm:

    nuqneH

    Zitat 1388

    • Tips für Fragende

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  2. 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

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. @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!

      --
      sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
  3. 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

    1. <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

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische
    2. 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

    3. @@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'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)