Toon posts:

[xhtml+css] opmaak van een faq

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hallo allemaal,

Ik wil een faq gaan maken maar me daarbij wel zoveel mogelijk aan de webstandards houden.
De bedoeling is dat het er ongeveer zo uit komt te zien.

1.Dit is de eerste vraag.
Antwoord op de eerste vraag
2.Dit is de tweede vraag.
Antwoord op de tweede vraag


De meeste correcte manier is volgens mij met een definition list. Alleen heb ik dan het probleem dat ie niet automatisch nummert net als bij een ordered list.

Weet iemand een goede (liefst semantisch correcte) oplossing? Ik maak liever geen gebruik van tabellen. :P

Verwijderd

in css aangeven dat ie wel nummert
ik geloof dat je dan ook wel voor bepaalde browsers display: list-item; expliciet aan moest geven

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 19-05 17:13

RM-rf

1 2 3 4 5 7 6 8 9

je zou met CSS2-properties 'counter' en counter-increment kunnen werken:
http://www.w3.org/TR/REC-CSS2/generate.html#counters

echter, explorer ondersteund dat niet, en daarmee heb je dan naar ik aanneem in de publieke toepassing een probleem,
effectief kun je het mogelijk toepassen door een 'lelijke structuur van:
code:
1
2
3
4
<ol>
  <li><dl><dt>Lelijke oplossing</dt>
        <dd>als het werkelijk niet anders kan</dd></dl></i>
</ol>

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

code:
1
2
3
4
5
6
<ol>
  <li>Dit is de eerste vraag.<br />
  Antwoord op de eerste vraag</li>
  <li>Dit is de tweede vraag.<br />
  Antwoord op de tweede vraag</li>
</ol>

Zo dan?

Verwijderd

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
dl {
    list-style-type: decimal;
}
dd {
    display: list-item;
}
</style>
</head>

<body>
<dl>
  <dt>item1</dt>
  <dd>def 1</dd>
  <dd>def 1a;</dd>
  <dt>item2</dt>
  <dd>def2</dd>
  <dt>item3</dt>
  <dd>def3</dd>
</dl>
</body>
</html>

alleen je wilt de dt's nummeren geloof ik he
doe dan
code:
1
2
3
4
5
<ol>
  <li><dl><dt/><dd/></dl></li>
  <li><dl><dt/><dd/></dl></li>
  <li><dl><dt/><dd/></dl></li>
</ol>

Verwijderd

HTML:
1
2
3
4
5
6
7
8
9
10
11
<h1>Frequently Asked Questions</h1>
<ol>
   <li>
      <h2>Dit is de eerste vraag.</h2>
      <p>Antwoord op de eerste vraag.</p>
   </li>
   <li>
      <h2>Dit is de tweede vraag.</h2>
      <p>Antwoord op de tweede vraag.</p>
   </li>
</ol>

Dit lijkt me in dit geval veel netter dan een oplossing met een definition list. Je hebt een prima scheiding, je geeft de verhouding tussen vraag en antwoord ook prima aan, wat in de suggestie van André niet zo is.

Verwijderd

Topicstarter
Jah cheatahs oplossing is de beste denk ik. Dat ik daar zelf niet op kon komen.
Jammer trouwens dat die counter niet in IE werkt trouwens. Maarja dat komen we natuurlijk wel vaker tegen.

In ieder geval harstikke bedankt jongens!

  • YouKnow
  • Registratie: Maart 2002
  • Niet online
Verwijderd schreef op donderdag 02 december 2004 @ 10:49:
1.Dit is de eerste vraag.
Antwoord op de eerste vraag
2.Dit is de tweede vraag.
Antwoord op de tweede vraag
Waarom op die manier, en niet zoals (ook in veel GoT FAQs)

Vraag 1 (met link, anchor)
Vraag 2
Vraag ...

Antwoord 1
Antwoord 2
Antwoord ...

Het grote voordeel is dat je vaak meer overzicht hebt, en niet voorbij elk antwoord hoeft te scrollen.

Verwijderd

Dan kom je eerder terecht bij het volgende:

HTML:
1
2
3
4
5
6
7
8
9
10
11
<h1>Frequently Asked Questions</h1>
<ol>
   <li><a href="#q1">Dit is de eerste vraag</a></li>
   <li><a href="#q2">Dit is de tweede vraag</a></li>
</ol>

<h2 id="q1">Dit is de eerste vraag.</h2>
<p>Antwoord op de eerste vraag.</p>

<h2 id="q2">Dit is de tweede vraag.</h2>
<p>Antwoord op de tweede vraag.</p>

  • YouKnow
  • Registratie: Maart 2002
  • Niet online
Ja precies :)

Ik denk dat dat een betere opzet van je FAQ wordt, in ieder geval gebruiksvriendelijker.

[ Voor 79% gewijzigd door YouKnow op 02-12-2004 12:00 ]


Verwijderd

Die van Cheatah wordt wel meer gebruikt. Ik ben hem in ieder geval vaker zo tegengekomen en het is prima bruikbaar.

En XHTML...
Pagina: 1