Zeichenorientiert ausrichten
Michael
- html
Hallo zusammen,
Ich möchte z.B. eine Fußball-Tabelle erstellen. In dieser müssen die Torverhältnisse Doppelpunktgerecht untereinander stehen
52:5
30:28
9:27
Bisher habe ich dies mit <table> gelöst, in dem ich die geschossenen Tore jeweils rechtsbündig in eine Zelle, den ":" zentriert in eine schmale Zelle, so wie die erhaltenen Tore linksbündig in eine Zelle gebracht habe. Dies erscheint mir jedoch recht aufwendig. Auch die <Pre>-Blickfunktion mit Leerstellen gefällt mir nicht. Gibt es eine Funktion, die über <div> Doppelpunktgerecht übereinander ausrichten lässt. Die in SelfHTML präsentierte Lösung ignorieren fast alle Browser, was dort auch erwähnt wird.
Hallo,
52:5
30:28
9:27Gibt es eine Funktion, die über <div> Doppelpunktgerecht übereinander ausrichten lässt.
Ja, mit CSS
p.li {line-height:1.2em;margin:0;width:10em;text-align:right}
p.re {line-height:1.2em;margin-top:-1.2em;margin-left:10em}
<p class=li>2</p>
<p class=re>:2</p>
<p class=li>15</p>
<p class=re>:20</p>
Kalle
Ja, mit CSS
p.li {line-height:1.2em;margin:0;width:10em;text-align:right}
p.re {line-height:1.2em;margin-top:-1.2em;margin-left:10em}<p class=li>2</p>
<p class=re>:2</p><p class=li>15</p>
<p class=re>:20</p>
Danke Kalle,
das ist eine alternative Lösung. Ich werde mal damit experimentieren und dann sehen, ob diese vieleicht besser ist, als meine bisherige.
Moin
p.li {line-height:1.2em;margin:0;width:10em;text-align:right}
p.re {line-height:1.2em;margin-top:-1.2em;margin-left:10em}<p class=li>2</p>
<p class=re>:2</p><p class=li>15</p>
<p class=re>:20</p>
die Variante eine zusammengehörende Angabe auf 2 Absätze zu verteilen und die künstlich wieder aneinanderzufügen erachte ich als sehr aufwändig und semantisch incorrect.
Wenn du das schon nicht mit Tabellen lösen willst dann nimm span.
Gruß
rfb
Nabend,
Wenn du das schon nicht mit Tabellen lösen willst dann nimm span.
Gerne, wenn du mir zeigst, wie man span eine Breite geben kann und darin den Text rechtsbündig ausrichtet. Und danach in der Zeile weitermacht.
Kalle
Moin
CSS:
im Prinzip wie mit p (also auch display:block), nur semantisch sinnvoller (denn ohen CSS wird es nicht über mehrere Absätze verteilt)
Gruß
rfb
Hallo Michael,
Ich möchte z.B. eine Fußball-Tabelle erstellen.
Du hast also tabellarische Daten.
Bisher habe ich dies mit <table> gelöst, in dem ich die geschossenen Tore jeweils rechtsbündig in eine Zelle, den ":" zentriert in eine schmale Zelle, so wie die erhaltenen Tore linksbündig in eine Zelle gebracht habe.
Deine bisherige Lösung erscheint mir sinnvoll und dem Problem angemessen.
Dies erscheint mir jedoch recht aufwendig.
Lass Doch ein Skript den Routinekram erledigen.
Alle anderen von Dir erwähnten Lösungen gefallen mir nicht. Bleib bei der Tabelle.
Freundliche Grüße
Vinzenz
Tach.
Die in SelfHTML präsentierte Lösung ignorieren fast alle Browser, was dort auch erwähnt wird.
Welche Lösung schlägt SELFHTML denn vor? Ich hab gerade ein bißchen gesucht, bin allerdings nicht fündig geworden. Vermutlich drehte es sich in dem Beispiel nicht um Fußball oder Tabellen. ;)