Hvordan laver jeg en Poll bar med CSS?

Ala?

<p><b>Poll<br></b></p>
<table border="1" width="195" cellspacing="0" bordercolordark="#4cb24c" bordercolorlight="#4cb24c">
    <tr>
        <td width="185" height="144">
            <p>&nbsp;</p>
        </td>
    </tr>
</table>

I CSS:
.linie {
    color:#4cb24c;
    width:100px;
    height:4px;
}

og i dit html:

<hr class="linie">

Prøv med div i stedet:

<div class="streg">&nbsp;</div>

Og så klassen:

.streg {
  width: 100px;
  height: 4px;
  background-color: #4cb24c;
  padding:0px;
  margin: 0px;
  }

Lordhead har fat i noget af det rigtige, men baren må kun være 4 px høj og så skal den positioneres umiddelbart efter tekst på samme niveau.
I dit eksempel er den mindst 10px høj og skifter linje

heh.. så prøv at fjerne &nbsp; :)

Eller tilføj dette i din klasse:

.streg {
  width: 100px;
  height: 4px;
  background-color: #4cb24c;
  padding:0px;
  margin: 0px;
  /* Dette! */ font-size: 1px;
  }

Er i gang med at kode Newz.dk om så den bliver XHTML 1.1 kompatibel, og vi får fjernet de skide tables!! ;)
Således har jeg sammensat deres poll:

<div class="poll_item">
    Nej, spam skal bekæmpes på andre måder. <span>(2349)</span>
    <div class="poll_item_bg">
        <div class="poll_item_overlay" style="width: 70%"></div>
    </div>
</div>
<div class="poll_item">
    Nej, e-mail bør altid være gratis. <span>(1893)</span>
    <div class="poll_item_bg">
        <div class="poll_item_overlay" style="width: 50%"></div>
    </div>
</div>



.poll_item_bg {
    background-color: white;
    color: black;
    border: 1px solid black;
    height: 4px;
    overflow: hidden;
}

.poll_item_overlay {
    background-color: #BAB6A6;
    color: black;
    height: 4px;
}

//hermandsen

Lige nøjagtigt billeder må da stadig gerne have width og height i selve taggen, ikke? Så kan du eventuelt bruge noget lige som på http://sandbox.adsl.dk/vote/

Koden er ganske simpel: <img src='pix.png' width='400' height='10' alt='Score: 40'> og billedet er bare en enkelt sort pixel.

Jeg synes faktisk at det er rart at have et fornuftigt sted at angive tallet for folk, der ikke kan eller gider se billeder.

Husk din næstvigtigste bruger er blind og kan ikke se en tom farvet <div> eller et billede.

>>sandbox
Med min metode kan du lettere angive tingene i procent, da det bare er style-attributten's width-egenskab der skal sættes til antal procent! ;)
Ikke noget med at huske på hvor lang sådan en søjle må være, og så er det 100% CSS orienteret!! *mums* :)

//hermandsen

hermandsen:
Ja, det er naturligvis en fordel at kunne sætte som procent i stedet.

Jeg ser dog ikke nogen reel forskel i om man skriver et tal i den ene eller den anden attributværdi. Og som jeg nævnte, kan jeg godt lide at gøre siderne så gode som muligt for blinde brugere (som f.eks. GoogleBot.) Det er dog ikke så vigtigt her, da det nok ikke er enkelte poll-resultater, der skal skaffe god ranking hos Google, men bare som et princip.

Men skidt, her er en anden udgave:

img.poll {
  height: 4px;
}

<img class='poll' src='pix.png' style='width: 50%' alt='50%'>