[HTML/CSS] Semantisch correct gebruik van lists in tekst

[Reveller]

Stel, ik schrijf de volgende paragraaf:

code:

Als je gaat vissen, zijn er een aantal zaken waar je van tevoren goed over na 
moet denken. Vergeet niet de volgende zaken mee te nemen:

* hengel                * radio           * visvoer
* eten en drinken       * paraplu         * vishaakjes

Zonder deze zaken kun je het wel vergeten om er een succesvol dagje vissen van 
te maken. We wensen je een goede vangst!

Wat is dan een semantisch correcte indeling hiervan?

code:

<p>Als je gaat vissen ... mee te nemen</p>
<p>
  <ul>
    <li>hengel</li>
    <li>eten en drinken</li>
  </ul>
  <ul>
    <li>radio</li>
    ...
  </ul>
</p>
<p>Zonder deze zaken ... goede vangst!</p>

of

code:

<p>Als je gaat vissen ... mee te nemen
  <ul>
    <li>hengel</li>
    <li>eten en drinken</li>
  </ul>
  <ul>
    <li>radio</li>
    ...
  </ul>
Zonder deze zaken ... goede vangst!</p>

of

code:

<p>Als je gaat vissen ... mee te nemen</p>
<ul>
  <li>hengel</li>
  <li>eten en drinken</li>
</ul>
<ul>
  <li>radio</li>
    ...
</ul>
<p>Zonder deze zaken ... goede vangst!</p>

Zijn er bepaalde regels hiervoor of is het arbitrair? Zelf voel ik het meeste voor manier 2, omdat het eigenlijk 1 paragraaf (stuk tekst over hetzelfde onderwerp) is. Maar er zijn ook voldoende argumenten te geven voor de overige manieren. Wat vind jij?

[crisp]

zo:

HTML:

<p>Als je gaat vissen ... mee te nemen</p>
<ul>
  <li>hengel</li>
  <li>eten en drinken</li>
  <li>radio</li>
    ...
</ul>
<p>Zonder deze zaken ... goede vangst!</p>

1 & 2 zijn sowieso invalid aangezien je een ul niet in een p mag nesten

[Creesch]

ik zou zelf voor de 3e optie gaan puur omdat de tekst wel uit 3 delen bestaat en alleen het onderste en bovenste deel echt paragraven zijn

[Sappie]

wat crisp zegt.

[Reveller]

Dank jullie Ik heb nu alleen een probleem met het stylen ervan. Neem het volgende voorbeeld:

code:

<style>
p {margin-top: 0; clear: both;}
ul {margin: 0 25px 15px 12px; padding: 0; float: left;}
</style>

<p>Lorem ipsum dolor sit amet.</p>

<ul>
  <li>eerste
  <li>tweede
</ul>
<ul>
  <li>derde
</ul>
<ul>
  <li>vierde
</ul>

<p>Lorem ipsum dolor sit amet.</p>

Dit ziet er in FF uit zoals verwacht:



Maar in IE zijn er twee zaken voud:



1. De marge tussen de lists en de onderste paragraaf is veel groter dan bij FF
2. pas wanneer ik de ul padding op 50 zet, verschijnen er dots voor de li's?

Ik ben nu al bijna twee dagen aan het prutsen om een dergerlijke pagina er in FF en IE gelijk uit te laten zien. Zo kan ik de afstand tussen ul en p in IE gelijk aan die in FF krijgen, door de float: left uit de ul te gooien. Maar dan heb ik 3 lists onder ipv naast elkaar. Ik heb zojuist bijna de moed opgegeven, door maar wat IE CSS statements in mijn pagina te gooien; maar dat wil je eigenlijk ook niet. Kan iemand mij op weg helpen?

[ Voor 16% gewijzigd door Reveller op 21-01-2006 16:06 ]

[Juup]

Mag ik even off-topic zeuren?

Als je gaat vissen, zijn er een aantal zaken waar je van tevoren goed over na
moet denken. Vergeet niet de volgende zaken mee te nemen:

Er is één aantal zaken.

[Verwijderd]

Ja. Je maakt er 3 lists van terwijl het maar 1 lijst is. Je hebt dus één ul nodig, waarbinnen je alle li elementen zet. Die laat je bijvoorbeeld allemaal floaten, en je zorgt door de breedtes en padding dat er zoveel rijtjes naast elkaar staan als je wilt.

Verder heb je het ul element en ook het li element, die elk hun eigen margin en padding kunnen hebben. Ga daar wat mee proberen totdat je iets hebt wat werkt. En misschien wil je ook iets met de list-style-position doen. Dat is niet nodig, maar is een optie die je hebt.

[MTWZZ]

Reveller schreef op zaterdag 21 januari 2006 @ 16:04:
knip

Mja dat is wat FF <> IE gebagger.

De oplossing is niet helemaal netjes maar:
http://dev.barad-dur.nl/got/ul.html

[ Voor 35% gewijzigd door MTWZZ op 21-01-2006 16:21 ]

[Reveller]

Juup schreef op zaterdag 21 januari 2006 @ 16:09:
Er is één aantal zaken.

Beide formuleringen zijn goed. Aangenomen dat "een aantal" (enkelvoud), het onderwerp is, heb jij gelijk. Echter, als je de nadruk legt op "zaken" (meervoud), dan is ook mijn formulering officieel niet fout (althans - zo heb ik het ooit bij nederlands geleerd)

MTWZZ schreef op zaterdag 21 januari 2006 @ 16:12:
Probeer eens dit toe te voegen:

Cascading Stylesheet:

ul {
    list-style-position: outside;
}

Dat zal niets uithalen, omdat de default waarde van list-style-position, outside is (toch even geprobeerd en het haalde idd niets uit )

Verwijderd schreef op zaterdag 21 januari 2006 @ 16:10:
Ja. Je maakt er 3 lists van terwijl het maar 1 lijst is. Je hebt dus één ul nodig, waarbinnen je alle li elementen zet. Die laat je bijvoorbeeld allemaal floaten, en je zorgt door de breedtes en padding dat er zoveel rijtjes naast elkaar staan als je wilt.

Je hebt gelijk in de zin dat het eigenlijk 1 lijst is, maar is dit niet ontzettend veel meer werk gaan verzetten voor slechts een kleine winst?

MTWZZ schreef op zaterdag 21 januari 2006 @ 16:12:
De oplossing is niet helemaal netjes maar:
http://dev.barad-dur.nl/got/ul.html

Dank je, maar hierbij zit er nog steeds wel een marge tussen de ul en de onderste paragraaf bij IE (en niet bij FF).

[ Voor 40% gewijzigd door Reveller op 21-01-2006 16:27 ]

[apokalypse]

Juup schreef op zaterdag 21 januari 2006 @ 16:09:
Mag ik even off-topic zeuren?


[...]

Er is één aantal zaken.

zeg dan meteen... "Maar in IE zijn er twee zaken voud": => fout

[-Lars-]

Zoals Cheetah al zei, heb je hier een enkele lijst, dus zou je ook een enkel ul- of ol-element moeten gebruiken. Zie bijvoorbeeld http://www.alistapart.com/articles/multicolumnlists voor een aantal mogelijkheden. (De auteur geeft al aan dat je hoe dan ook offers moet doen, dus check eerst even alle methoden.)