Hoe resultaten uitlijnen

[kleautviool]

Beetje vage titel, maar mijn situatie is als volgt.
Voor een poll ben ik bezig met een pagina om de resultaten weer te geven.
Deze wil ik op de volgende manier presenteren:

HTML:

<ul>
    <li><span class="optie">Optie 1</span><span class="pollbalk" style="width: ??px;"><span class="totaal">(?? stemmen)</span></li>
    <li><span class="optie">Optie 2</span><span class="pollbalk" style="width: ??px;"><span class="totaal">(?? stemmen)</span></li>
    <li><span class="optie">Optie 3 enz...</li>
</ul>

Het lijkt mij netter om deze gegevens op een soortgelijke manier als deze te presenteren dan in een tabel (correct me if im wrong). Alleen nu komt het probleem.
Aangezien de breedte van de span met de class pollbalk variabel is, zouden het totaal aantal stemmen niet mooi uitgelijnd worden. Als bijvoorbeeld de eerste balk 15px breed is en de 2e 30px dan staan de totale stemmen schots en scheef.
Nu heb ik al geprobeerd om die laatste span (totaal) relatief te positioneren op 50px van links vandaan, maar dat hielp niet.

Het lastige is dat ik ook geen blocklevel element om die span heen kan zetten, en dan dat blocklevel element een breedte geven. Want als ik dat doe, krijg ik witmarges ((Logisch) Ook als ik de margin op 0 zet) en dat ziet er helemaal niet uit.

Ik heb ook al geprobeerd om in die pollbalkspan een afbeelding te plaatsen, maar ook dat heeft geen nut, omdat ik een inline-element geen breedte mee kan geven

Nu is mijn vraag of er toch een mogelijkheid is, om deze gegevens op deze manier te presenteren, of zal ik hier toch een tabel voor moeten gebruiken?

Ps. Het is (voor mij) geen optie om dit met 3 divjes naast elkaar in een container op te lossen. Dan gebruik ik nog liever een tabel

[Verwijderd]

Waarom zou je tabulaire gegevens in een lijst willen zetten ipv gewoon een tabel gebruiken? Wat is er mis met een tabel?

code:

<table>
<tr>
  <td class="optie">Optie 1</td>
  <td class="pollbalk">
    <img src="http://www.motorai.nl/images/red.gif" width=15 height=9>
  </td>
  <td class="totaal">(15 stemmen)</td>
</tr>
<tr>
  <td class="optie">Optie 2</td>
  <td class="pollbalk">
    <img src="http://www.motorai.nl/images/red.gif" width=30 height=9>
  </td>
  <td class="totaal">(30 stemmen)</td>
</tr>
<tr>
  <td class="optie">Optie 3</td>
  <td class="pollbalk">
    <img src="http://www.motorai.nl/images/red.gif" width=45 height=9>
  </td>
  <td class="totaal">(45 stemmen)</td>
</tr>
</table>

[ Voor 72% gewijzigd door Verwijderd op 28-06-2004 12:56 ]

[BtM909]

Ik vind het persoonlijk mooier om aantal stemmen onder je balk te zetten, maar twee opmerkingen:

1. je pollbalk span's sluit je niet af? (wellicht type-foute)
2. float: right voor je .totaal classes should do the trick

[Verwijderd]

Tabel dunkt me. Er zijn genoeg semantisch attributen, elementen e.d. daarin om de relatie aan te geven. Denk aan TH (element), SCOPE (attribuut) etc.

Wat waarschijnlijk ook wel een mogelijkheid is:

code:

ul li span{
 display:block;
 float:left;
 width:200px;
}

Wat je eigenlijk wil is:

code:

ul li span{
 display:table-cell; /* of display:inline-block; wellicht */
}

[BtM909]

Verwijderd schreef op 28 juni 2004 @ 12:47:
Wat je eigenlijk wil is:

code:

ul li span{
 display:table-cell; /* of display:inline-block; wellicht */
}

Precies, maar dat werkt toch niet goed binnen IE

[Verwijderd]

Zie het verschil in voorlopende tekst. "Wat je eigenlijk wil:" ... en dus niet mogelijk is. Alhoewel IE wel "ondersteuning" heeft voor 'display:inline-block' op 'display:inline' elementen. Wat er op neer komt dat IE 'width' op SPAN ondersteund.