[CSS] weirdness...

[Mx. Alba]

Het gaat om deze site: http://forum-integration.info/

En dan met name om de <div id="menu">. Daarin staan uiteraard een stel links, allemaal met display:block. Het effect dat ik graag wil bereiken is dat die link over de hele breedte van de div actief is. Het vreemde is dat dat alleen werkt als in <div id="menu"> een andere geneste div zit, zoals bijvoorbeeld <div id="cntr"> die ik eigenlijk alleen maar op de hoofdpagina erin wil zetten. Als "bugfix" heb ik die geneste div dus maar op alle pagina's erin staan, die bij alle pagina's behalve de hoofdpagina leeg is...

Is dit nou een bug of een feature? En als het een bug is, is het dan een bug dat hij zonder geneste div niet het gewenste gedrag heeft, of juist dat hij met die geneste div wel het gewenste gedrag heeft? En vertonen in de huidige setup andere browsers dan IE6 ook het gewenste gedrag?

Relevante code:

Cascading Stylesheet:

div#menu {
  position: absolute;
  top: 5.5em;
  left: 0px;
  width: 9em;
  margin: 0px;
  padding: 0px;
  padding-bottom: 0.5em;
  text-align: left;
}
div#cntr {
  position: absolute;
  bottom: -2.5em;
  left: 1em;
  height: 1.5em;
  width: 8em;
  margin: 0px;
  padding: 0px;
}

HTML:

<div id="menu">
  <!-- linkjes -->
  <div id="cntr">
    <!-- counter; alleen op hoofdpagina te zien -->
  </div>
</div>

[WillyF]

probeer eens aan je css toe te voegen:

code:

div#menu a {
    display: block;
    width: 9em;
}

de links krijgen nu (als het goed is) dezelfde breedte als je div menu

[ Voor 8% gewijzigd door WillyF op 13-03-2004 17:29 ]

[Verwijderd]

Nu het toch gaat over semantiek in diverse topics. Een menu doe je meestal met een lijst. Het is tenslotte een lijst links waar we over praten (detail: XHTML 2.0 ondersteund dit idee, door een nieuwe list container te introduceren, het NL element).

Zie hier voor uitwerking: http://alistapart.com/articles/taminglists/

[Mx. Alba]

WillyF schreef op 13 maart 2004 @ 17:27:
probeer eens aan je css toe te voegen:

code:

div#menu a {
    display: block;
    width: 9em;
}

de links krijgen nu (als het goed is) dezelfde breedte als je div menu

Thx, maar dat lost het probleem niet op. De hele breedte verandert wel van kleur, maar slechts de tekst reageert op mouse-over en mouse-click zoals een link dat doet, terwijl ik dus zou willen dat dat over de hele breedte gebeurt.

Verwijderd schreef op 13 maart 2004 @ 17:29:
Nu het toch gaat over semantiek in diverse topics. Een menu doe je meestal met een lijst. Het is tenslotte een lijst links waar we over praten (detail: XHTML 2.0 ondersteund dit idee, door een nieuwe list container te introduceren, het NL element).

Zie hier voor uitwerking: http://alistapart.com/articles/taminglists/

Ook thx, maar het menu als een lijst neerzetten interesseert me niet zo. Immers, in een text-browser (voor blinden, of voor Google) die geen CSS snappen, krijg je namelijk in dat geval gewoon een bulletlist, wat ik ongewenst vindt. Ik wil dat in geval van CSS-breakage de links van het menu gewoon op een regel komen te staan (of meerdere regels als het schermpje niet breed genoeg is).

[Verwijderd]

Mx. Alba schreef op 13 maart 2004 @ 18:30:
Ook thx, maar het menu als een lijst neerzetten interesseert me niet zo. Immers, in een text-browser (voor blinden, of voor Google) die geen CSS snappen, krijg je namelijk in dat geval gewoon een bulletlist, wat ik ongewenst vindt. Ik wil dat in geval van CSS-breakage de links van het menu gewoon op een regel komen te staan (of meerdere regels als het schermpje niet breed genoeg is).

Mag ik vragen waarom je dat ongewenst vindt? Zorg je er wel voor dat er, naast de spaties, scheidende tekens tussen de links staan? Anders krijg je dit effect:

code:

Home About me Contact 
i.p.b.
Home | About me | Contact

Dit kun je doen door de scheidende tekens in (bijvoorbeeld) een SPAN te zetten en die met CSS op display:none te zetten.

[Verwijderd]

Ook thx, maar het menu als een lijst neerzetten interesseert me niet zo. Immers, in een text-browser (voor blinden, of voor Google) die geen CSS snappen, krijg je namelijk in dat geval gewoon een bulletlist, wat ik ongewenst vindt.

En hoezo is dat ongewenst? Dit soort dingen worden namelijk juist aangeraden door het WAI (Web Accessibility Initiative - http://www.w3.org/WAI/ ). Het is zelfs een van de richtlijnen van WCAG 1.0.

(Hierboven wordt een andere methode genoemd om aan de richtlijnen te voldoen, maar imo is het gebruiken van een lijst beter, geeft ook meer stijl mogelijkheden door het extra block-level element )

[ Voor 19% gewijzigd door Verwijderd op 13-03-2004 18:42 ]

[Johnny]

Niet-CSS browsers zijn ook vaak diegene in mobiele apparaten waar het scherm niet zo breed is. Met een verticale lijst ontstaan er dan geen horizontale scrollbars, in met een horizontale, zoals jij dat wilt wel.

[Mx. Alba]

Goed, u heeft mij met u allen overtuigd, ik ga het gebruik van een lijst voor mijn linkjes researchen