meny

Hejsan!
Jag håller på att försöka snickra ihop en meny i css, men har stött på ett problem. Det är som så att jag vill ha en bild över varje text, se bifogad bild för att förstå. Själva menyn ska vara kopplad till en xml som bara läser ut länkarna som står i den, gör om dem till en meny som liknar den jag bifogade.
Alltså XML filen innehåller, namnet på länken (t.ex. startsida som på bilden), länk dit den ska gå (t.ex. default.aspx) osv.
Problemet är alltså inte hur jag skapar eller kopplar en xml fil utan hur jag formaterar en css meny till den som liknar den på bilden.
Vet du inte hur du löser båda problemen, ge mig då ett svar på det du kan så ger du mig ytterligare en pusselbit på vägen.

Jag förstår inte riktigt vad du är ute efter...
Ska bilden som visas över länktexten ändras vid hover, active, osv eller förbli den samma?

Bilden ska bara ligga där statisk..
menyn ska fungera på samma sätt som en listmeny,
<ul>
<li><a href="#">Startsida</a></li>
</ul>

med #meny li{list-style-image: url(symbol.gif);} får jag ju en bild i listan fast då sitter den på vänster sida, jag vill helt enkelt att min bild ska ovanför texten istället för på sidan av den.

så inom varje li tag vill jag att bilden ska visas och allt jag behöver ändra är url:en och texten, jag har väldigt svårt för att förklara saker så ni får ursäkta om jag skriver en aning kryptiskt.

Bilden ska visserligen ändras vid hover osv, men det kan jag fixa själv.. problemet ligger i att få bilden över.

ul li {padding-top:XXpx;background:url(bg.gif) no-repeat} ?

Okkido skrev:

ul li {padding-top:XXpx;background:url(bg.gif) no-repeat} ?

Hur menar du? jag får inte din kod att fungera... testat att byta ut url och pixlarna m.m. jag får den bara att visa en "vanlig" lista

Det är svårt att svara på din fråga eftersom den är ganska svävande.
Det är ganska stor skillnad på att göra en meny som fungerar med bakgrundsbild och hover, som du nämnde att din skulle göra, fast inte... Och en meny där bara texten ska hovra.
Sedan var det ju bilden du frågade efter och där ska Okkidos fungera, men du behöver förmodligen lägga till en del för att få bort "listan"
Du kan ju testa lite med en gammal meny jag har med egna värden. Har inte tagit med hover-classerna.

#menu {display:block; height:115px; min-height:115px;}
#menu ul {margin:0; padding:0; list-style-type:none; }
#menu li {display:block; float:left; margin-right:1px; width:105px; border:1px solid #000;}

Om det ska vara olika bilder i menyn får man lista upp dem så här kanske annars får man peta in den i den förra.

#menu li.lista1 {background: #B0C4DE url(bilder/litensv.jpg) no-repeat;}

hmm, har suttit och testat här en del nu men får det inte att fungera.
Det som händer är att height inte fungerar samt att texten i menyn då hamnar över bilden som om det vore en helt vanlig bakrund. Kolla den bifogade filen hur jag vill att det ska se ut. en bild, med en text över.
Är det en stor skillnad är det lika bra att jag nämner det, menyn ska använda sig av hover samt active... vid hover ska bilden ändras till en annan bild med en annan färg, vid active ska vi ha samma bild som vid hover.

Om jag inte minns helt åt skogen var det på den här jag tittade när jag skulle göra menyn, verkar som det är vad du söker efter? Den nedre av dem.
http://www.cssplay.co.uk/menus/flickerfree_mk3.html

tack, det verkar fungera men jag har ett problem.
jag kan bara använda mig utav en länk med samma id i <a> taggen..
<li class="list1t"><a id="item1t" href="#">Meny 1</a></li>
hur löser jag så att jag kan använda mig utav samma id i flera olika <a> taggar för det känns väldigt onödigt att göra flera olika id med samma innehåll i min css fil...

edit.. kom på hur man skulle göra-