Hejsan!
Jag har lite problem med min meny, vill att den ska ligga på en rad men det blir bara fel.
Det jag söker är en meny på en rad med "hoover" funktion.
För det har jag två bilder med lite olika skuggor (meny1.gif och meny2a.gif).
Antingen bilder med text i (två för varje knapp) eller som det jag har nu där det är samma bakgrundsbilder för alla knappar i menyn och texten kommer från listan "<li>"
Så för att förklara lite så kan vi först se hur menyn ser ut:
Jag har skapat två exempel.
I den övre ser vi att "inline" ger menyn på en rad, precis som jag vill men jag vill att varje knapp är 121x29 px stor precis som i den undre varianten.
Dessutom att texten ligger centrerad i varje knapp.
Såhär ser index-filen ut:
<div id="meny2">
<li><a href="sida1.php" >Hem</a></li>
<li><a href="sida2.php">Val 1</a></li>
<li><a href="sida3.php">Val 2</a></li>
<li><a href="sida4.php">Övrigt</a></li>
</div>
<br><br><br><br><br><br><br>
<div id="meny">
<li><a href="sida1.php">Hem</a></li>
<li><a href="sida2.php">Val 1</a></li>
<li><a href="sida3.php">Val 2</a></li>
<li><a href="sida4.php">Övrigt</a></li>
</div>
och min css kod:
#meny{
width: 600px;
margin: 0px;
padding: 0;
list-style-type:none;
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
line-height: 29px;
}
#meny li{display: inline; list-style-type: none;}
#meny a{
width: 121px;
display: block;
width: auto;
height: 29px;
background: transparent url(func_pics/meny1.gif) no-repeat;
text-decoration: none;
/*padding: 5px 0 5px 10px;*/
}
#meny a:link{color: #000;}
#meny a:visited{color:#000;}
#meny a:hover{background: transparent url(func_pics/meny2a.gif) no-repeat;}
#meny a#current{color:#333;}
/* ___________________________________________*/
#meny2{
width: 600px;
margin: 0px;
padding: 0;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
line-height: 29px;
}
#meny2 li{display: inline; list-style-type: none;}
#meny2 a{
width: 100%;
height: 29px;
background: transparent url(func_pics/meny1.gif) no-repeat;
text-decoration: none;
}
(som ni ser saknar den övre menyn (meny2) hoover funktionen med bilder men det är inte så relevant).
När jag la in:
#meny li{display: inline; list-style-type: none;
för meny2 (den övre på bilden) så la sig allt på en rad men då sabbar man möjligheten att sätta rätt storlek på bakgrundsbilderna.
Vad gör jag för fel?
Jättetack på förhand!
Mvh
jocke
