Positionierung von 2 Elementen innerhalb von <li>...</li>

[gnu1742]

Huhu,

Ich kämpfe seit einiger Zeit mit einem Problem und bin wahrscheinlich einfach
nur zu dusselig
a) die Lösung selbst rauszukriegen
b) die Lösung in diesem (oder einem anderen) Forum rauszufinden.

Folgendes:
Ich habe eine <ol>-Liste. In dieser besteht jeder <li>...</li> Inhalt
aus 2 Dingen: einem Namen und einer Zahl (es handelt sich um eine
Rangliste). Die Namen und die Zahlen sollen jeweils untereinander stehen,
also es soll ungefähr so aussehen:

1. XXXX      123
2. XXXX      123

(Idealerweise sollten die Namen links- und die Zahlen rechtsbündig
ausgerichtet sein, ist aber kein muss)

Den Namen und die Zahl jeweils in ein <div> verpacken klappt nicht,
da zwischen den beiden umgebrochen wird, auf jeweils einen <span>
kann ich keine Breite definieren...

Vielleicht kann mir jemand helfen, Dankbarkeit ist garantiert:)
(Und wenn die Frage schon 1742-mal gestellt wurde, bitte nicht
hauen. Wer mir dann den Link auf die Lösung gibt kriegt auch
ein Stück Kuchen von mir)

besten Dank vorneweg

gnu

[Stefan Bechtold]

Erstell eine Tabelle mit 3 Spalten ...

1. Spalte = Das kleine Symbol :o)
2. Spalte = xxxx
3. Spalte = 123

hmm, so schwer? *g*
Falls du PHP oder ähnliches verwenden kannst, schreib dir eine funktion makelist($icon, $first, $second) oder so :o)

Sachen gibts ;o)

Gruß
Stefan

[gnu1742]

Erstell eine Tabelle mit 3 Spalten ...

1. Spalte = Das kleine Symbol :o)
2. Spalte = xxxx
3. Spalte = 123

hmm, so schwer? *g*
Falls du PHP oder ähnliches verwenden kannst, schreib dir eine funktion
makelist($icon, $first, $second) oder so :o)

An die Tabelle hab ich auch gedacht, möchte sie jedoch vermeiden
(dw. steht das ja auch im CSS-Forum), zumal ich auch noch vorhabe,
die Seiten Sehbehindertengerecht zu machen.

Ausserdem ist es eine Frage der Ehre: In der Firma mecker ich
immer, wenn die Kollegen bei Web-Apps wilde Tabellen-in-Tabellen-
Konstrukte, nur um ein Wort an eine bestimmte Stelle zu bringen.
Wenn die jetzt auf meiner Web-Seite sehen, daß ich das selber
mache, lachen die sich tot:(

[Stefan Bechtold]

Tabellen sind nun mal das A-O um Objekte ideal anzuordnen, sorry wenn du da was gegen hast, aber es ist die ideallösung aus meiner sicht...

meine seiten sind übrigens immer durch verschachtelte tables gekennzeichnet... ;o) Das ist schon gut so *g*

Gruß
Stefan

[wahsaga]

hi,

Tabellen sind nun mal das A-O um Objekte ideal anzuordnen, sorry wenn du da was gegen hast, aber es ist die ideallösung aus meiner sicht...

nein, sind sie nicht. tabellen sind gedacht, um daten von gleicher struktur eben auch tabellarisch darzustellen. aber nicht, um von dir zum layouten missbraucht zu werden.

meine seiten sind übrigens immer durch verschachtelte tables gekennzeichnet... ;o) Das ist schon gut so *g*

nicht wirklich. modernes layout macht man mit css.

gruss,
wahsaga

[Thomas Luethi]

Hallo,

Erstell eine Tabelle mit 3 Spalten ...
An die Tabelle hab ich auch gedacht, möchte sie jedoch vermeiden
(dw. steht das ja auch im CSS-Forum), zumal ich auch noch vorhabe,
die Seiten Sehbehindertengerecht zu machen.

Das, was Du praesentieren willst, sind doch tabellarische Daten,
die Du in 3 Spalten anordnest: Rang, Name, Leistung (oder so).
Es ist in diesem Fall voellig legitim, das TABLE-Element zu brauchen.
Das steht auch so in den Zugaenglichkeitsrichtlinien für Web-Inhalte (WCAG):

http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#gl-table-markup
"Tabellen sollten verwendet werden, um tatsaechlich
tabellarische Daten ('Datentabellen') zu kennzeichnen."

Eine solche Tabelle ist uebrigens IMHO auch ueberhaupt kein
Problem fuer Sehbehinderte u.s.w.; sie "transformiert geschmeidig".

<table summary="Rangliste ...">
<tr><th>Rang</th> <th>Name</th> <th>Zeit (Sekunden)</th></tr>
<tr><td>1.</td> <td>Primus Renner</td> <td>25.2</td></tr>
<tr><td>2.</td> <td>Secundus Laeufer</td> <td>27.5</td></tr>
<tr><td>3.</td> <td>Third Man</td> <td>27.9</td></tr>
<!-- u.s.w. -->
</table>

Ich behaupte, dass diese Tabelle selbst von einem primitiven Browser
(z.B. Lynx) wie folgt dargestellt/vorgelesen wird:

Rang Name Zeit (Sekunden)
1. Primus Renner 25.2
2. Secundus Laeufer 27.5
3. Third Man 27.9

(Fuer ganz schlechte/alte Browser soll es offenbar notwendig sein,
am Ende der letzten Zelle einer Zeile (oder sogar am Ende jeder Zelle?)
noch ein <br>-Tag einzubauen:
... <td>25.2<br></td></tr>
Das ist aber nur ein Geruecht, das ich irgendwo irgendwann aufgeschnappt habe...)

In den (englischen) Beschreibungen der Techniken zur Umsetzung der WCAG
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#gl-table-markup
http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables
steht, wie man Tabellen optimieren kann/soll fuer Vorlese-Programme u.s.w.

Ausserdem ist es eine Frage der Ehre: In der Firma mecker ich
immer, wenn die Kollegen bei Web-Apps wilde Tabellen-in-Tabellen-
Konstrukte, nur um ein Wort an eine bestimmte Stelle zu bringen.

Das ist nicht das gleiche. Verschachtelte Tabellen sind veraltet, das stimmt.
Aber Du hast ja nur eine einzelne Tabelle mit tabellarischen Daten - was soll
daran unehrenhaft sein?

Du kannst natuerlich weiterhin versuchen, mit CSS (Stichworte: display:block und float
oder meinetwegen sogar display:table-cell u.s.w.) eine Tabelle nachzubauen.
Die Browser werden Dich wahrscheinlich schnell eines besseren belehren.

Als einzig zuverlaessige Loesung ohne Tabellen kommt mir <pre> bzw.
font-family:courier,monospace in den Sinn, wie es im Thread auch schon
vorgeschlagen wurde. Wenn Du die Liste sowieso serverseitig generierst,
sollte es ja eine Kleinigkeit sein, die entsprechenden Leerzeichen
einzufuegen. (in PHP z.B. mit der Funktion str_pad() oder so...)

Hoffe, das hilft Dir weiter!
Gruesse,

Thomas

P.S. In manchen Sportarten kann es doch vorkommen, dass sich zwei
  Athleten einen Rang teilen (gleiche Punktzahl/Zeit u.s.w.).
  Wenn Du _das_ mit einer einfachen <OL> (und ggf. CSS-Countern) loesen kannst,
  so dass es in >90% der aktuell benutzen Browser funktioniert, bist Du sehr gut!

[Thomas Meinike]

Hallo,

Ich habe eine <ol>-Liste. In dieser besteht jeder <li>...</li> Inhalt
aus 2 Dingen: einem Namen und einer Zahl (es handelt sich um eine
Rangliste). Die Namen und die Zahlen sollen jeweils untereinander stehen,
also es soll ungefähr so aussehen:

1. XXXX      123
2. XXXX      123

(Idealerweise sollten die Namen links- und die Zahlen rechtsbündig
ausgerichtet sein, ist aber kein muss)

Den Namen und die Zahl jeweils in ein <div> verpacken klappt nicht,
da zwischen den beiden umgebrochen wird, auf jeweils einen <span>
kann ich keine Breite definieren...

Nimm doch einfach eine dicktengleiche Schriftart fuer li (also Courier (New) bzw. monospace). Mehrere Leerzeichen als   oder &#160; schreiben.

MfG, Thomas

[MudGuard]

Hi,

vielleicht hilft Dir ja </archiv/2003/9/56631/> weiter, das mit dem dl

cu,
Andreas

[gnu1742]

Danke mal an alle gutgemeinten Tipps.

Hab es mittlerweile gelöst, und zwar mit Hilfe von
'display:table-row' bzw. 'display:table-cell'
mit geeigneten <div>s

...
Zugegebenermassen: Ich hätte wirklich einfach eine Tabelle
nehmen können...aber ich wollte einfach nicht;-)