Rubrik med 'lista'

[Jompan]

Jag försöker skapa en meny genom <ul> och <li> men stöter på följande problem:

- Hur får jag texten att lägga sig längre till vänster?

- Hur får jag hoverfunktionen att bli gul i hela bakomliggande fältet, och inte bara över texten?

- Hur gör jag för att markera även 'border' mellan raderna och inte bara som en ram runt om?

 

 

<style>

#meny {
background: white;
margin-left: 10px;
margin-right: 10px;
}		

#meny ul {
margin: 0 auto;
font-color: #000;
list-style:none;
border-width: 1px;
border: solid #ccc;
}

#meny li { 
line-height:20px; 
}

#meny li a {
text-decoration:none;
font-family:Tahoma, "Franklin Gothic Medium", Georgia;
font-variant: small-caps;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
color: green;
}

#meny li a:hover {
color: blue; 
background: yellow;
}

</style>

<div id="meny">

<ul> 
   <li><a href="index.php">Index</a></li> 
   <li><a href="mitten.php">Mitten</a> 
   <li><a href="arkiv.php">Arkiv</a> 
   <li><a href="kontakt">Kontakt</a> 
    </ul>

</div>

 

// Jompan

[Jonas__B]

Ändra padding på ul och li elementen för att ändra marginalen.

 

Chrome har även en inbyggd defaultstil på ul som heter -webkit-padding-start som kan ställa till i det i vissa fall.

 

 

#menu ul {
padding:0;
margin:0; 
list-style:outside none
}
/* margin: 0 auto; auto  (dvs centrering) kommer inte fungera då du inte satt någon fast bredd på menyn */

#menu li{
margin:0; 
padding:0; 
border-top:1px solid red /* en avdelare mellan alla li-element*/
} 
#menu li:first-child{
border:0 !important
} /* men ta bort det från den första i listan*/

#menu li a{
display:block; 
padding:10px
} /* display:block för att fylla li men länkelementet - med fördel sätter du padding på länkelementen.*/

#menu li a:hover {background-color:yellow}

that should do the trick

[Jompan]

Funkar perfekt.

Tack för hjälpen.

 

// Jompan