Hjälp med listor!

Använd background-image istället för list-style-image; det sistnämnda har historiskt sett varit mindre plattformsoberoende.

Att den ena lägger sig under beror på att du har för lite horisontellt utrymme för att alla ska få plats på en rad.

det har inget med dina margins att göra då?

hmm läste fel i css:en

prova ta bort float?

#meny_a{
list-style-image:url(bilder/analyser.png);
float:left;
}

#meny_b{
list-style-image:url(bilder/bilder.png);
float:left;
}

#meny_x{
list-style-image:url(bilder/xhtml.png);
float:left;
}

#meny_m{
list-style-image:url(bilder/multimedia.png);
float:left;
}

vad händer om du tar bort float ur bilderna? för nu sätter du väl att alla bilder ska alignas till vänster?

Det är inte så konstigt eftersom dina li-element är tomma. Ett tomt flutet element tar som standard upp 0 pixlar + paddings.

Ett riktigt sätt är att ha img-taggar inuti dina listor. Eftersom en bild har en bredd och en höjd så anpassas det automatiskt och allt är frid och fröjd.

Det andra sättet som OCKSÅ är riktigt, speciellt om du använder bilder som representerar ett textinnehåll, är att lämna ursprungstexten i dina LI-element och dölja den genom ett negativt textindrag. Detta har den (stora) fördelen att dina menylänkar faktiskt betyder något för sökmotorer.

I det andra fallet behöver du ange bredd och höjd för varje listelement beroende på hur stor bild du vill använda.

Varför vill du länka in bilder genom CSS?

Både din lärares tanke och din egen iakttagelse stämmer.

Om det är en lista med bilder så ska dessa bilder representeras av ett img-element. Det säger sig ju mer eller mindre självt. Ett bra exempel på detta är ett bildgalleri, vilket är en förskönande term för en lista med bilder.

Om det istället är en tillsnyggad meny man vill skapa där varje menyval representeras av en egen bild, så är CSS-lösningen praktisk. Jag skulle vilja påstå att den inte är korrekt varje gång; ibland är det faktiskt just en lista med bilder man är ute efter och inte en meny där varje menyval visas som en grafisk bild. Jag förstår att detta kanske låter som ordvrängeri, men skillnaden är större än man först kan ana.

Om du vill skapa en meny rekommenderar jag att du börjar med att göra en textbaserad version av din lista i HTML:

<ul id="fiskmeny">
    <li id="fisk_1">Torsk</li>
    <li id="fisk_2">Sej</li>
    <li id="fisk_3">Kolja</li>
    <li id="fisk_4">Piggvar</li>
</ul>

Styla dina element till den bredd och höjd du vill ha (jag antar att du vill att alla element ska ha samma höjd):

#fiskmeny li {height:30px;}
#fisk_1 {width:100px;}
#fisk_2 {width:90px;}
#fisk_3 {width:100px;}
#fisk_4 {width:120px;}

För att de ska lägga sig sida vid sida kan du till exempel använda float:left:

#fiskmeny li {height:30px; float:left;}

Sätt margin:0; padding:0; på ul-elementet och display:block; på de li som inte ska ha prickar. Om du floatar element så är display:block; underförstått och du behöver inte använda det.

Ja där tycker jag att du ska köra med CSS. Jag tycker dock att du ska ha med de faktiska orden i din lista! Du kan "gömma" textinnehåll i listan genom att sätta ett stort negativt indrag på varje li i menyn, text-indent:-99999px; exempelvis