CSS- Meny - Varför lista?

När man skapar en meny med CSS är ju det vanligaste att man använder sig av listor. Varför egentligen? Man kan väl precis lika gärna göra så här:

<a class="meny" href="sida1.html">Sida 1</a>
<a class="meny" href="sida2.html">Sida 2</a>
<a class="meny" href="sida3.html">Sida 3</a>

 och sen lite css:

a.meny, a.meny:link, a.meny:visited 
{ display:block; width:150px; height:30px; osv. }

Då slipper man ju problem med olika marginaler och sånt... Vad är listorna BRA för?

Själva <ul> blocket fungerar ju som en container som hjälper till vid positionering. Vill du slippa listor så blir man kanske tvungen att lägga in en extra <div> om man vill få mer kontroll och koden blir då mindre semantisk,
För det är väl egentligen för semantikens skull man kör med listor till menyer.
Dessutom visar ju webläsarna listor på ett ganska prydligt sätt om man skulle koppla bort stilmallen.

Mmmm... Just det. Fast det är ju förstås ganska vanligt med en div runt listorna oxå...

Fast utan css blir det ju stor skillnad förstås!

En fråga till: Om man använder listor och vill göra det ännu mer "semantiskt" borde man inte kunna lägga till:

<dd>förklaring förklaring</dd>

och sen sätta: display:none på den, liksom?

Man slipper ju egentligen en div runt listan eftersom <ul> är ett blockelement.

Vill man ha med definitioner av länkarna i listan borde man ju kunna använda <dd>.
Men då måste man lägga allt i en <dl>.

<dl>
	<dt><a href="#">Bilder</a></dt>
	<dd>Bilder från Mallorca</dd>
	<dt><a href="#">Insekter</a></dt>
	<dd>Insekter från Mallorca</dd>
	<dt><a href="#">Viner</a></dt>
	<dd>Viner från Mallorca</dd>
	<dt><a href="#">Kryddor</a></dt>
	<dd>Kryddor från Mallorca</dd>
</dl>

Har inte testat att stajla en sån lista, men det borde inte vara svårare än en <ul> lista.

Ja! Eller hur? Tick Tack för hjälpen!

Jo, jag har testat att stajla en dl-lista! Samma grej! Fast man slipper "none:a" punkterna!

Ska testa <dd> grejen. Borde va en OK idé. Återkommer!

P.S :e Gillade för övrigt exemplen skarpt! Kryddor och Insekter från Mallorca?? :e D.S

Vore det inte bättre med TITLE-attribut på länkarna?

<ul id="menu">
  <li><a href="#" title="Bilder från Mallorca">Bilder</a></li>
  ...
</ul>

Jo! Title måste man såklart ha! Men hur är det? Skulle det inte bli tydligare för dem som surfar med typ: "text" om man la till <dd>? Bara en tanke...

Re: CSS- Meny - Varför lista?

Nipon skrev:

När man skapar en meny med CSS är ju det vanligaste att man använder sig av listor. Varför egentligen?

Hmm...

Jag har alltid haft för mig att det beror på att nån kom på den brillianta idén att man rent semantiskt kan betrakta en meny som en lista med länkar ;)

Nipon skrev:

Jo! Title måste man såklart ha! Men hur är det? Skulle det inte bli tydligare för dem som surfar med typ: "text" om man la till <dd>? Bara en tanke...

Om du hade tänkt dölja <dd> med CSS tycker jag att du borde använda TITLE istället. Om du däremot tänkt ha det synligt hela tiden, även med CSS på, så funkar det utmärkt.

TITLE

This attribute offers advisory information about the element for which it is set.

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3
DD

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.3

Om du anger display:none; så kommer informationen inte visas eller läsas. TITLE-attributet visas i de flesta webbläsare som en "tooltip", och skärmläsare/pratande webbläsare kan konfigureras för att läsa upp TITLE-attribut.

Dock bör man inte gömma väsentlig information i ett TITLE-attribut, eftersom det finns risk för att användaren inte kan ta del av den informationen.

Okej! Tack allihopa!

Men är jag helt ute och cyklar när jag tänker att display: none skulle funka? Tar inte text-surfning bort css'n? Man kan ju ha title oxå, väl?

Fördelen skulle ju vara att man då kunde ha en schysstare beskrivning för dem utan CSS... För i title brukar det ju vara bra att hålla sig till ngt lite kortare.

En definitionslista är inte vad du ska använda dig av i en meny på en sajt, såvida inte varje menyalternativ behöver en beskrivande text. Men då finns ju som redan skrivits title-attributet till a-elementet. När jag skapar en meny så använder jag mig av en oordnad lista och lite CSS, och använder title-attributet för att beskriva vad länken leder till:

<ul>
  <li><a href="#" title="Menyalternativ #1">alt #1</a></li>
  <li><a href="#" title="Menyalternativ #2">alt #2</a></li>
</ul>

Att använda sig av en display:none på en definitionslistas definitionsbeskrivning (dd-elementet) är inte heller att föredra. Använd det som är enklast för ditt syfte - en oordnad lista med title-attribut på a-elementen. :)

Jag brukar använda <ul> :) - det här var bara en fundering, liksom. Men, men! Även Einstein kom väl på dumheter ibland... ;)

Tack, tack!

Utan nya idéer skulle ingenting förändras här i världen... ;)

Så sant så sant
OT:
... och i xhtml2 kommer vi att lära oss att skriva menyer med den nya listtypen <nl> (Navigation List) samtidigt som vi kommer att lära oss att lägga href="URL" direkt som attribut till <li>. Vi kommer alltså på sikt kunna slippa den där extra <a>-taggen helt...

<nl>
  <li href="fee.html">Fee</li>
  <li href="fie.html">Fie</li>
  <li href="foe.html">Foe</li>
  <li href="fum.html">Fum</li>
</nl>

När nu det blir ;)

Va fiffigt! Då blir ju allt så mycket lättare - för våra barnbarn! :h

jarvklo, nice, kommer man kunna göra listorna vågräta också på något annat sätt än att behöva krångla med float?

Har inte kollat så noga (än) eftersom specen fortfarande inte är fastställd... Förmodar (hoppas innerligt) att nästnästa generation webbläsare (eller så) tar fart och ger oss både CSS3 och xhtml 2 samtidigt - och i så fall bör det finnas lite mer möjligheter (även om det just nu känns, precis som Nipon säger, ganska långt borta...)

Men oavsett vad - när "majoriteten" av webbläsarna därute stödjer display:table, display:table-cell m.fl (dvs om antingen MSIE skulle börja göra det eller om MSIE plötsligt skulle tappa marknaden helt) kommer vi nog att se lite färre "floats" ;)

... och det känns väl inte heller direkt nära i tiden om man skall vara ärlig :(

Men iallafall - jag skrev ju "Off Topic" :e