Hur skulle ni koda följande

Jag skulle byggt upp det som en vanlig lista, det känns mest naturligt. Definitionslista känns inte riktigt rätt i ditt exempel.

<ul>
  <li>Start</li>
  ...
</ul>

Lista

mv icaaq

Man kan göra såhär också:

<p>
 <a href="/">Start</a> |
 <a href="/golfresor/">Golfresor</a> |
 ...
</p>

Samt lägga in några <span>s om det behövs för CSSen... Man måste tänka på användarvänlighet också. ;) Om denna "lista" har många korta länkar så blir det mycket att scrolla om man har CSS avstängt.

Dock skulle jag i det här fallet använda en <ul>.

<edit>Ur semantisk synvinkel är en <ul> rätt. Det är ju en lista.</edit>

Tack för svaren! Det jag hade lite problem med var |-tecknen mellan menyvalen. Om jag vill ha annorlunda formatering på dessa utan att blanda in en massa skräp som t.ex. span-taggar så måste de ju särskiljas på något vis, och det kan jag ju göra med en definitionslista.

<dl id="topmenu">
	<dt>START</dt>
	<dd>|</dd>
	<dt>GOLFRESOR</dt>
	<dd>|</dd>
	<dt>FÖRETAGSGOLF</dt>
</dl>

Då kan jag enkelt kontrollera |-tecknen (vad heter de egentligen?) separat, men då blir det ju inte direkt semantiskt korrekt. Man kan ju förstås använda en vanlig lista och koppla en klass till de listelement som innehåller |-tecknen, men jag ville ha en så ren lösning som möjligt.

Jag kanske gör det för svårt för mig. zcorpans lösning är väl egentligen semantiskt korrekt den också.

Hej.

Du kan du lösa enkelt med en border-right på din li.

Eller har dina pipelines någon särskild betydelse?

mv icaaq

En border-right skulle inte fungera eftersom jag inte vill ha någon avdelare till höger om det sista menyvalet, och då blir jag tvungen att skapa en klass för att ta bort ramen från det sista menyvalet. :)

En definitionslista är semantiskt helt fel, eftersom det knappast är en definitionslista.

Du kan lägga till dina "|" med CSS.

#menu li:before {
  content: " | ";
}
#menu li:first-child:before {
  content: "";
}

Men det fungerar inte med IE.

Om du vill ha border så kan du göra på liknande sätt.

#menu li {border-left: thin solid;}
#menu li:first-child {border-left: none;}

Vilket inte heller verkar få önskad effekt med IE... Om du vill att det ska se likadant ut med IE får du helt enkelt ge det första elementet en klass... :l

Kom ihåg också att <div> och <span> är semantiskt neutrala, så du kan gott klottra ner din meny med <span>ar om du vill, utan att ändra på innehållets betydelse. (Valet av <div> eller <span> har med omgivningen att göra. <div> är ett block-element, vilket betyder att den skapar "radbrytning" före och efter, vilket kan påverka utseendet även om CSS är av.)

<edit>Exempel kan vi hämta från Hixies weblog.

<h1><span class="domain"><!--
--><span class="subdomain">log_e</span><!--
--><span class="dot">.</span><!--
--><span class="hixie">hixie</span><!--
--><span class="dot">.</span><!--
--><span class="ch"><span class="c">c</span>h</span><!--
--></span></h1>

Det ovan är semantiskt samma sak som

<h1>log<sub>e</sub>.hixie.ch</h1>

Hixie har lagt till <span>arna endast för att hänga upp stilregler på.
</edit>

zcorpan skrev:

Men det fungerar inte med IE.

Och är därför ganska värdellöst. :) Nä, det får nog bli en vanlig ul.

zcorpan skrev:

Kom ihåg också att <div> och <span> är semantiskt neutrala, så du kan gott klottra ner din meny med <span>ar om du vill, utan att ändra på innehållets betydelse.

Visst kan jag det, men jag tar hellre en något semantiskt inkorrekt sida än en sida nerlusad med skräpkod.

Hur kan du föredra nånting som är semantiskt inkorrekt?

Jag har börjat läsa en del om semantiskt korrekt XHTML [...]. Jag vill gärna lära mig mer

zcorpan skrev:

Hur kan du föredra nånting som är semantiskt inkorrekt?

Som sagt, jag tar hellre en något semantiskt inkorrekt sida än en sida nerlusad med skräpkod

zcorpan skrev:

Men det fungerar inte med IE.

Och är därför ganska värdellöst.

Isf är XHTML också ganska värdelöst, för det fungerar inte heller med IE. (OK, HTML-kompatibel XHTML "fungerar", men det beror på att det tolkas som HTML. Om man resonerar så har Netscape 4 också stöd för XHTML, men i själva verket saknar den stöd för XML som XHTML bygger på.)

Jag ser många saker i HTML och CSS som jag anser är väldigt värdefullt och användbart, men som tyvärr inte fungerar med IE.

Hej.

Jag anser inte att pipelines ( | ) har någon semantisk betydelse, utan du är mer ute efter en utseendemässig avdelare som separerar dina menyalternativ. Då ska du göra det i din css.

Och varför behöver du lusa ner din sida med skräpkod?

http://member.webforum.nu/1029/skarre.htm

mv icaaq

zcorpan skrev:

Jag ser många saker i HTML och CSS som jag anser är väldigt värdefullt och användbart, men som tyvärr inte fungerar med IE.

Det handlar ju naturligtvis om att använda kod som stöds av de webbläsare vars användare man vänder sig till. Var man drar gränsen är ju upp till var och en, men de flesta är säkert överens om att IE är en webbläsare man bör ta hänsyn till. Men det är klart, du kanske hellre bygger dina sidor med W3C allra senaste taggar och css, oavsett om de stöds av någon webbläsare överhuvudtaget. ;)

icaaq skrev:

Och varför behöver du lusa ner din sida med skräpkod?

Jag ville ha en så ren kod som möjligt, helst utan några klasser eller id:s på individuella listrader, men det funkade inte i det här fallet. Koden du postade var ju precis det jag talade om i ett tidigare inlägg. :)

Skarre skrev:

[...] och då blir jag tvungen att skapa en klass för att ta bort ramen från det sista menyvalet

Jag tror dock att det är den vägen som är den rätta.

Självfallet måste man ta hänsyn till IE, med tanke på att så många använder den webbläsaren.

Jag kodar enligt HTML 4 och CSS 2, där båda har varit W3C rekommendation sedan 1998. Jag tycker det verkar helt rimligt att följa det, med tanke på att de flesta användaragenter som används idag har relativt bra stöd för dem.

Om någon webbläsare, vilken det än må vara (alla har buggar), inte beter sig som det var tänkt får man gå runt problemet (använda "workarounds"). I det här fallet fick vi använda en extra class pga IE's dåliga stöd för CSS.

icaaq skrev:

Jag anser inte att pipelines ( | ) har någon semantisk betydelse

Varför inte? Om man använder dem i ett vanligt stycke som i mitt första exempel har de visst betydelse. Om vi tog bort dem skulle vi inte ha så mycket som separerade menyvalen.

Att däremot lägga till pipelines eller andra tecken i en <ul> är förstås felaktigt, då menyvalen redan är separerade.

Varför inte? Om man använder dem i ett vanligt stycke som i mitt första exempel har de visst betydelse. Om vi tog bort dem skulle vi inte ha så mycket som separerade menyvalen.

Visst, i ditt fall så ha de betydelse. Jag tänkte i användadet av en <ul>.

mv icaaq

Jag lyckas inte ta bort all padding och margin och undrar om någon kan förklara varför. Det ser inte rätt ut i vare sig IE eller FF.

Jag bifogar html-filen och en bild som visar problemet.

http://member.webforum.nu/1826/listproblem.gif

http://member.webforum.nu/1826/test.htm

Testa att ta bort display: inline; och sätt dit en float: left;

mv icaaq

Det är ett mellanslag mellan dem. Antingen gör du som icaaq föreslog, eller så tar du bort mellanslagen i koden mellan li-elementen.

<ul id="topmenu">
	 <li>START</li
	><li>GOLFRESOR</li>
</ul>

:)