Häng med på insidan av Wilson

Det är många som stöter på problem när man ska bygga en horisontell meny med flikar där varje flik ska vara dynamisk i bredd. Lösningen för många blir då att sätta en fast bredd på fliken eller så gör man en bakgrundsbild för varje menyval. Båda lösningarna leder till problem när man ska implementera menyn med ett CMS system där användaren kan behöva ändra texten på menyvalet.  Men det går att lösa med några rader css /xhtml och två bilder. Vi börjar med strukturen av meny, vi använder en Icke-numrerad lista för menystrukturen: <ul id=”menu”> <li class="active">a href="#" title=""><span>Start</span></a></li> <li><a href="#" title=""><span>Företaget</span></a></li> <li><a href="#" title=""><span>Länkar</span></a></li> <li><a href="#" title=""><span>Kontakt</span></a></li> </ul> Det är inget konstigt med denna kod förutom att jag har lagt till en span tagg runt innehållet i varje länk. Varför får du reda på senare. Jag har också satt id på listan till ”menu”. Nu till CSS koden: #menu { height:55px; width:780px; } ul#menu { list-style:none; margin:0; padding:0; } ul#menu li { float:left; margin:10px 0 0 10px; } ul#menu li a { background:url("menu_left.gif") left top no-repeat; display:block; float:left; height:40px; line-height:40px; padding:0 0 0 10px; color:#c8d0db; } ul#menu li a:hover, #header #menu ul li.active a { background:url("menu_left_hover.gif") left top no-repeat; height:41px; color:#333; } ul#menu li a span { height:40px; padding:0 10px 0 0; display:block; float:left; background:url("menu_right.gif") right no-repeat; } ul#menu li a:hover span, ul#menu li.active a span { height:41px; padding:0 10px 0 0; display:block; float:left; background:url("menu_right_hover.gif") right no-repeat; } Då ska jag försöka förklara vad jag har gjort Förutom all vanlig css kod med float, height och liknande så har a taggen en bakgrundsbild som ser ut så här: Denna kommer ligga som bakgrund i hela a taggen. Viktigt är att man sätter att bakgrunden ska börja från vänster. I span taggen sätter jag en bakgrundsbild som ser ut så här: Sätt att bakgrunden ska börja från höger och att den inte repeteras. Detta kommer ge följande resultat: Med hjälp av bilden så förstår ni säkert hur det fungerar. Slutresultatet ser ni nedanför.