Lave vurderingsbar

Det er vel fordi, 10-tallet fylder mere end cellerne er brede. Så gør alle celler lidt bredere eller skrifttypen mindre.
Eller har jeg misforstået?

Nej, men jeg vil gerne undgå den hvide boks til sidst, og hvis jeg laver skriften mindre bliver baggrunden også mindre!

Du kan jo give boksene en fast bredde og højde vha. width og height.
Hvad er det, der gør, at du ikke bare kan slette boksen yderst til højre?

JEg bliver nødt til, at der ikke er en højre streg på, ellers vil overgangene blive grimme. Så ville jeg bare lave en boks mere hvor jeg satte en venstre streg for at afslutte det, men så gik stregen ikke helt op! Jeg bruger allerede width og height, men det virker vist ikke med span, men du kan jo selv se resulatet nu :)

Følgende stylesheet bruges:

.vurdering {
    background-color: #66CC00;
    height: 14px;
    width: 14px;
    border-top: 1 solid #000000;
    border-right: 1 none #000000;
    border-bottom: 1 solid #000000;
    border-left: 1 solid #000000;

}
.vurderingfra {
    background-color: #CC9900;
    height: 14px;
    width: 14px;
    border-top: 1px solid #000000;
    border-right: 1px none #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    font-size: x-small;

}
.vurderingsidste {
    background-color: white;
    height: 14px;
    width: 14px;
    border-top: 1px none #000000;
    border-right: 1px none #000000;
    border-bottom: 1px none #000000;
    border-left: 1px solid #000000;

}

Til følgende HTML-kode

<p><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">&nbsp;</span><span class="vurdering">8</span><span class="vurderingfra">&nbsp;</span><span class="vurderingfra">&nbsp;</span><span class="vurderingsidste">&nbsp;</span></p>

<ole>

Ren CSS kan du ikke lave den i ... du er nødt til at bruge HTML også  ;o)

Hvorfor ikke bare lave den med en tabel? Det ville da være langt det letteste - og så er det jo præcis den slags, de er gode til. Bedre end noget andet HTML-element.

/mvh
</bole>

Enig med olebole. Dit misbrug af spans er heller ikke særlig kønt...

Jamen, I har da fuldstændig ret, og jeg har forsøgt at lave den om nu. Desværre er jeg stadig ved at finde ud af, hvordan jeg får vandrette streger inde i selve tabellen. Det er i hvert fald ikke sådan, som jeg har gjort i øjeblikket. Stylesheetet ligger stadig på ovennævnte adresse, hvis nogle af jer har forslag.

Altså ... det, jeg ser nu, er stort set perfekt ud  :)
Måske lige:
  text-align: center;
i klassen 'vurdering' ville pynte, når der kun står ét tal i cellen. Ellers ser det zq pænt ud - og koden er jo _noget_ simplere  ;o)

Jeg ved godt, der mange steder hersker en slags semi-religiøs forestilling om, tabeller er dårlige og yt. Det er ingenlunde tilfældet!
W3C har ikke depricated dem ... og har tydeligvis ingen planer om det foreløbig. De er langt federe til nogen ting - men i de tilfælde, hvor andre elementer er bedre egnet, bør man selvfølgelig ikke vælge tabeller.
Men at tabeller skulle være yt, er blot et misforstået modelune.
Så brug du dem bare  ;o)
/mvh

Det var nu egentlig også en tanketorskk, at jeg ikke brugte tabeller. Det er jo meget lettere :) Smid lige et svar olebole.

... et svar  :)