Impossible de coller mon menu à gauche. [Résolu]

Bonjour.

Je suis en train de faire un site http://largowin.com/masai/paul2.html et je n'arrive pas à comprendre pourquoi je suis incapable de coller mon menu composé d'image complètement sous la photo du réalisateur.

À défaut de pouvoir le placer complètement à gauche, je l'ai centré sous la photo du réalisateur en lui mettant une marge de 10px, mais ce n'est pas ça que je veux.

Voici les éléments de cette section:

#droite {
margin-top:110px;
margin-left: 450px;
}
/* Menu réalisateurs */

ul#menu {
margin:100px 0 0 10px;
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu li {
float: left;
}

ul#menu a, ul#film1 a {
float: left;
text-indent: -9999px;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
color: #000;
background: #fff;
}

li#film1 a, li#film2 a, li#film3 a, li#film4 a, li#film5 a, li#film6 a{
width:50px;
height:120px;
}

ul#menu a:hover {
background: #ccc;
}

li#film1 a:hover, li#film2 a:hover, li#film3 a:hover, li#film4 a:hover, li#film5 a:hover, li#film6 a:hover{
width:50px;
height:120px;
background-position: -80px 0px;
z-index:2000; 

}

li#film1 a, li#film1 a:hover{background-image:url(../images/vignette1.png);}

li#film2 a, li#film2 a:hover{background-image:url(../images/vignette2.png);}

li#film3 a, li#film3 a:hover{background-image:url(../images/vignette3.png);}

li#film4 a, li#film4 a:hover{background-image:url(../images/vignette1.png);}

li#film5 a, li#film5 a:hover{background-image:url(../images/vignette2.png);}

li#film6 a, li#film6 a:hover{background-image:url(../images/vignette3.png);}

Merci de votre aide.
Modifié par largowin (09 Feb 2008 - 12:35)

Pour un modérateur.

Personne n'a répondu pour mon problème. Est-ce que je devrais récrire ce message dans une autres section plus spécifique?

Bonjour,

Ça peut aller dans le salon CSS, effectivement.

Pour le décalage rencontré: c'est le padding-left de 40px par défaut pour les éléments ul (du moins avec une partie des navigateurs), et ton margin-left de 10px. Ce qui nous donne un décalage de 50px vers la droite en tout.

Merci d'avoir déplacé le sujet.

je ne connaissais pas ce padding-left par défaut. Auriez-vous un lien à me suggérer sur le sujet afin que je puisse l'enlever?

Merci.

Heu... ben pour le supprimer, il suffit de le remettre à zéro, vu que c'est une propriété CSS qui accepte cette valeur.

ul#menu {
	margin: 100px 0 0 0;
	padding: 0;
}

Pour information, la FAQ en parle: Comment corriger un espace à gauche d'une liste différent entre IE, Firefox et Opera ?

Ouin... Effectivement, c'était pas trop compliqué... Je vois toujours les choses come pires que ce qu'elles sont.

Merci pour le lien vers la FAQ.

Ce sujet est donc résolu