[CSS] lists, tekst uitlijning

[gizmo9003]

Ik zit met css een beetje te klungelen om het volgende voor elkaar te krijgen, het gaat om een list.

code:

- 27-05-2008          Dit en dit onderwerp....
- 31-05-2008          Zus en zo onderwerp...

Dus een mooie manier, om na de datum eerst een witruimte te krijgen, en dan pas de tekst van het onderwerp. Ik heb een ranzige manier bedacht, met een transparant plaatje met een bepaalde breedte, maar het kan vast ook mooier?

[OkkE]

Elke regel is een LI, binnen de LI zit een element met de datum (SPAN bijvoorbeeld) en een element met de titel (een P of A). Beide elementen links floaten en het element met de datum een width geven.

[gizmo9003]

OkkE schreef op woensdag 02 april 2008 @ 10:15:
Elke regel is een LI, binnen de LI zit een element met de datum (SPAN bijvoorbeeld) en een element met de titel (een P of A). Beide elementen links floaten en het element met de datum een width geven.

Dat ik daar zelf niet op ben gekomen Bedankt!

[Verwijderd]

Dit past volgens mij (correct me if i'm wrong) beter in een dl:

HTML:

<dl>
    <dt>27-05-2008</dt>
    <dd>Dit en dit onderwerp....</dd>

    <dt>31-05-2008</dt>
    <dd>Zus en zo onderwerp....</dd>
</dl>

Cascading Stylesheet:

dt {
    float:left;
    width:100px;
    height:20px;
}

[Verwijderd]

Verwijderd schreef op woensdag 02 april 2008 @ 11:47:
Dit past volgens mij (correct me if i'm wrong) beter in een dl:

Is niet echt een goed of fout, meer een kwestie van smaak, denk ik.

Cascading Stylesheet:

dt {
    float:left;
    clear:left;
    width:100px;
    height:20px;
}

clear:left is denk ik nog nodig om naar de volgende regel te springen.

[OkkE]

Over het algemeen is het meer een kwestie van smaak inderdaad. Helaas kan ik het artikel niet meer vinden, maar een nadeel aan DL is dat screen readers het uitspreken als:

code:

inhoud-van-dt = inhoud-van-dd

In het geval van nieuws, zou je dan bijvoorbeeld krijgen; "2 april 2004 is Opnieuw ophef over cartoon"

[ Voor 3% gewijzigd door OkkE op 02-04-2008 12:20 ]

[Verwijderd]

Verwijderd schreef op woensdag 02 april 2008 @ 12:06:
[...]

Is niet echt een goed of fout, meer een kwestie van smaak, denk ik.

Cascading Stylesheet:

dt {
    float:left;
    clear:left;
    width:100px;
    height:20px;
}

clear:left is denk ik nog nodig om naar de volgende regel te springen.

de dd float niet, dus hoeft ook niet gecleared te worden

[Marcj]

OkkE schreef op woensdag 02 april 2008 @ 12:20:
Over het algemeen is het meer een kwestie van smaak inderdaad. Helaas kan ik het artikel niet meer vinden, maar een nadeel aan DL is dat screen readers het uitspreken als:

code:

inhoud-van-dt = inhoud-van-dd

In het geval van nieuws, zou je dan bijvoorbeeld krijgen; "2 april 2004 is Opnieuw ophef over cartoon"

Inderdaad. Een <dl> is ook een definition list en daar is hier geen sprake van. Ik zou dit toch echt gewoon in een lijst zetten met een <span> voor de datum.

[Blaise]

Het gaat misschien wat ver, maar je zou ook naar hatom kunnen kijken, een microformat voor opeenvolgende blogs / artikelen.

[Verwijderd]

wat is er mis met een tabel? dit heeft niets meer met definition lists te maken (wat definieer je?)

tabellen bijten echt niet hoor, ze zijn ook ooit wel nuttig

[OkkE]

Ik vind een nieuwsoverzicht (datum en titel) geen informatie dat echt tabulaire data is, maar er iets wel iets voor te zeggen om het toch te doen. Zou het zelf ook niet met een UL doen trouwens, maar waarschijnlijk een <p> met de datum in een <span> of misschien 2 <p>'s.

Vaak doe ik het zo, dat ik eerst alle data in een HTML document zet zonder CSS, en daar de meest logische "opmaak" voor kies, pas daarna de CSS toevoegen. Indien ik dan elementen tekort kom om het ontwerp na te maken, voeg ik elementen toe (bijv. een <span> of een <div>).

Zo komt een nieuwsoverzicht er bij mij vaak toch zo uit te zien:

HTML:

<div class="newsitem">
   <p class="newsdate">02 apr 2008</p>
   <h3><a href="/">Nieuwsbericht titel</a></h3>
</div>

<!-- OF -->

<div class="newsitem">
   <h3>
      <span class="newsdate">02 apr 2008</span>
      <a href="/">Nieuwsbericht titel</a>
   </h3>
</div>

[ Voor 3% gewijzigd door OkkE op 03-04-2008 13:52 ]