---
title: "Hur skulle ni koda följande"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/120695-hur-skulle-ni-koda-följande"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Skarre"
published: "2005-01-21T15:02:53.000Z"
updated: "2005-01-24T18:29:50.000Z"
replies: 21
views: 698
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/120695-hur-skulle-ni-koda-följande"
---

# Hur skulle ni koda följande

_Sida 1 av 2._

## #1 — Skarre, 2005-01-21T15:02Z

Jag har börjat läsa en del om semantiskt korrekt XHTML, och har sett att många menyer är uppbyggda av listor av olika slag. Jag vill gärna lära mig mer och undrar därför om någon kan ge förslag på hur man skulle kunna bygga upp en vanlig enkel textmeny som i exemplet nedan, med semantiskt korrekt XHTML.

```
START   |   GOLFRESOR   |   FÖRETAGSGOLF   |   PROFILPRODUKTER   |   BILDGALLERI   |   KONTAKT
```

Lista? Definitionslista? Vad är "rätt"?

RED: stavfel

Permalänk: https://www.webforum.nu/p/120695

## #2 — Gislaved, 2005-01-21T15:18Z

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>
```

Permalänk: https://www.webforum.nu/p/1534052

## #3 — icaaq, 2005-01-21T15:31Z

[Lista](http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/)

mv icaaq

Permalänk: https://www.webforum.nu/p/1534057

## #4 — zcorpan, 2005-01-21T16:39Z

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\>

Permalänk: https://www.webforum.nu/p/1534082

## #5 — Skarre, 2005-01-21T18:15Z

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å.

Permalänk: https://www.webforum.nu/p/1534158

## #6 — icaaq, 2005-01-21T18:23Z

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

Permalänk: https://www.webforum.nu/p/1534166

## #7 — Skarre, 2005-01-21T18:27Z

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. :)

Permalänk: https://www.webforum.nu/p/1534169

## #8 — zcorpan, 2005-01-21T19:25Z

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\<sub\>e\</sub\>\</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\>

Permalänk: https://www.webforum.nu/p/1534224

## #9 — Skarre, 2005-01-21T19:31Z

> **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.

Permalänk: https://www.webforum.nu/p/1534230

## #10 — zcorpan, 2005-01-21T19:47Z

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

Permalänk: https://www.webforum.nu/p/1534238

## #11 — Skarre, 2005-01-21T19:52Z

> **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

Permalänk: https://www.webforum.nu/p/1534243

## #12 — zcorpan, 2005-01-21T19:55Z

> > **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.

Permalänk: https://www.webforum.nu/p/1534246

## #13 — icaaq, 2005-01-21T22:36Z

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

Permalänk: https://www.webforum.nu/p/1534341

## #14 — Skarre, 2005-01-22T00:00Z

> **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.

Permalänk: https://www.webforum.nu/p/1534374

## #15 — zcorpan, 2005-01-22T00:52Z

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.

Permalänk: https://www.webforum.nu/p/1534384

## #16 — zcorpan, 2005-01-22T01:08Z

> **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.

Permalänk: https://www.webforum.nu/p/1534386

## #17 — icaaq, 2005-01-22T05:32Z

> 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

Permalänk: https://www.webforum.nu/p/1534403

## #18 — Skarre, 2005-01-24T10:21Z

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>

Permalänk: https://www.webforum.nu/p/1535389

## #19 — icaaq, 2005-01-24T11:10Z

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

mv icaaq

Permalänk: https://www.webforum.nu/p/1538382

## #20 — zcorpan, 2005-01-24T16:59Z

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>
```

 :)

Permalänk: https://www.webforum.nu/p/1538576

---

Tråden på webben: https://www.webforum.nu/amne/html-css/120695-hur-skulle-ni-koda-följande  
Nästa sida: https://www.webforum.nu/amne/html-css/120695-hur-skulle-ni-koda-följande/page2.md