Problème d'affichage menu Venise (alsacreations)

Bonjour, je viens d'essayer d'appliquer sur mon site (www.histoiredumaghreb.com) le menu proposé ici (http://www.alsacreations.com/static/modelesmenus/g08.htm). Mais, j'ai un petit problème, car le menu se décale légèrement à droite de l'image en background. J'ai beau essayé avec les paddings je ne fais qu'empirer la situation ou la restaurer. Pouvez-vous m'aider? Merci d'avance.
Voici mon code html :

<div id="colonne1">
	<div id="menu1">
			<ul>
				<li><a href="http://www.histoiredumaghreb.com/Les-Rustumides-ou-Rostemides">Rustumides</a></li>
				<li><a href="http://www.histoiredumaghreb.com/Les-Idrissides">Idrissides</a></li>
				<li><a href="http://www.histoiredumaghreb.com/Les-Aghlabides">Aghlabides</a></li>
				<li><a href="http://www.histoiredumaghreb.com/Le-Maghreb-fatimide-909-969">Fatimides</a></li>
				<li><a href="http://www.histoiredumaghreb.com/Les-Almoravides-1056-1147">Almoravides</a></li>
			</ul>
		</div>
	</div>

Et voic mon code css :

#menu1 {
            
                /** La couleur du background est definie a noire car on a choisi une image de fond fonc?e */
                background: #000 url(koutoubia.jpg) no-repeat;
                
                /** on retire les puces **/
                list-style: none;
                
                /** on supprime le padding et les margin par defaut, on rajoute un padding en haut et en bas **/
                padding: 40px 0px 20px 0px;
                margin: 0px;
                width: 126px;
				text-align: center;

             }
             
             
            #menu1 li {
               margin: 5px;
              }
             
             #menu1 li a {
            
                /** pour que le lien prenne toute la largeur **/
                display: block;

                font-size: 1em;
                font-family: verdana;
                font-weight: bold;
                text-decoration: none;

                /** par defaut, ecrit en noir sur fond blanc, les liens restent toujours visible */
                color: #000;
                background: #fff;
                
                
                /* ces propri?t?s permettent l'effet de transparence sur la plupart des navigateurs
                cependant, si un navigateur ne les prend pas en compte, ils n'auront aucun effet mais le menu restera lisible
                */
                opacity: 0.7;
                filter: alpha(opacity:70);
                -khtml-opacity: 0.7;
                -moz-opacity: 0.7;
                
                /* note: la valeur 0.7 peut être ajust?e en fonction de l'image de fond
               plus la valeur est faible, mois le texte est visible */
             }
             
             #menu1 li a:hover {
                    opacity: 1;
                    filter: alpha(opacity:100);
                    -khtml-opacity: 1;
                    -moz-opacity: 1;
                    
                    
                    /* sans image le background redevient noir, et le lien blanc, toujours lisible ! */
                    background: transparent;
                    color: #fff;
              }

div#colonne1 {
    float: left;
    width: 16%;
    margin-right: 10px;
}

Bonjour,
Il faut créer une règle #menu1 ul pour passer les marges internes et externes de l'élément ul à 0. J'ai testé avec Firebug sur ton site, ça fonctionne.
Modifié par audrasjb (20 Jul 2012 - 12:09)

Merci pour ton aide. Donc si je comprends bien je dois rajouter ce code css :

#menu1 ul {
padding: 40px 0px 20 px; /** par exemple**/
margin: 0px;
}

Mais, sans toucher au padding de #menu1 qui est à présent ainsi :

#menu1 {
            
                /** La couleur du background est definie a noire car on a choisi une image de fond fonc?e */
                background: #000 url(koutoubia.jpg) no-repeat;
                
                /** on retire les puces **/
                list-style: none;
                
                /** on supprime le padding et les margin par defaut, on rajoute un padding en haut et en bas **/
                padding: 40px 0px 20px 0px;
                margin: 0px;
                width: 126px;
				text-align: center;

             }

Merci à toi ça a très bien marché.

Bonjour,

-khtml- c'est super vieux quand même. Je sais plus de quand date ces menus mais tu peux tranquillement enlever toutes les lignes avec ce préfixe ...