[CSS] problème marges avec menu

Problème : Les menus s'affichent correctement mais j'ai une marge entre les menus (droite et gauche) et les bords gauche des blocs. Hors aucune marge n'a été déclaré . J'ai affiché volontairement les contours des blocs pour que vous visualisiez le problème.



J'ai essayé un tas de chose mais rien y fait! j'espère que vous réussirez à trouver mon problème..

Code d'un des 2 menu :

	<div class="blocGauche">


	<style type="text/css">

			body{ font: 13px Rockwell;}			

			
			ul.menugauche li  	{
 	                      list-style-type: none; float: left; 
                               line-height: 2em;}

			ul.menugauche li a	{line-height: 2em;
			}

			.menugauche a {
				width: 110px; 
				float: left;
				text-align: middle;
				text-decoration: none;
				color: red;
				margin-top: 5px;
				background-color:black;
					
			}
			
			.menugauche a:hover {
				color: yellow;
				text-decoration: underline;
				
			}
				
			.menugauche a:active {
				color: white;
			}
			
		</style>
<strong>
<ul class="menugauche">
<li><a href="">Accueil</a></li>
<li><a href="">Ca va se passer</a></li>
<li><a href="">Ca s'est pass&#233</a></li>
<li><a href="">Petite enfance</a></li>
<li><a href="">Enfance</a></li>
<li><a href="">Jeunesse</a></li>
<li><a href="">D&#233veloppement social</a></li>
<li><a href="">Ludoth&#232que</a></li>
</ul>
</strong>

	</div>

merci d'avance

Au fait si quelqu'un peut me renseigner sur les a qu'il faut nécessairement mettre car je débute et je ne sais pas à quoi ils correspondent... ex: .menugauche a {...}

C'est les margin/padding par défaut pour les ul & li.
Rajoute ça dans ton CSS :

ul, li {
  margin: 0px;
  padding: 0px;
}

Sa marche c trop bien je te remerçie grandement

mé ce code en fait est faux non ? car j'ai fait des margin:0; et padding:0; à l'intérieur et cela ne marchait pas ???

	ul.menugauche li  { 	list-style-type: none; 		 	                          float: left;			                          	line-height: 2em;
					  }

			ul.menugauche li a { line-height: 2em;}

enfin merci c trop cool

emilizz a écrit :
Problème :

Bonjour à toi aussi et bienvenue sur ce forum.

Sans vouloir répéter inlassablement les mêmes choses, as-tu pensé à faire une Recherche avant de poster, ou même passer un petit moment sur l'Aide du forum ?

A noter que nous avons également créé des messages en post-it affichés en haut des forum.
Tu y aurais trouvé une Méthodologie à suivre dans le salon "CSS et mise en forme".
Elle t'aurait indiqué comment résoudre ton problème.

emilizz a écrit :
mé ce code en fait est faux non ? car j'ai fait des margin:0; et padding:0; à l'intérieur et cela ne marchait pas ???

PS : ton code est illisible, merci de l'indenter un minimum ... cependant, il n'y a rien de "faux" (les propriétés sont correctes), cela dépend de ce que tu veux obtenir avec.
Mettre des marges (margin/padding) à zéro sur <li>, comme tu le fais, est inutile. Elles sont nulles par défaut.
Par contre ce n'est pas le cas de <ul> qui a des espaces par défaut comme te l'a expliqué Florent et comme le décrit l'un des points de la Méthodologie à suivre.

En fait j'ai téléchargé un grand nombre de tutoriels et j'ai posté ici car j'en avais marre de ne pas trouver de solution..

Cependant pour cela je reste perplexe :

a écrit :
A noter que nous avons également créé des messages en post-it affichés en haut des forum.
Tu y aurais trouvé une Méthodologie à suivre dans le salon "CSS et mise en forme".
Elle t'aurait indiqué comment résoudre ton problème.

Certes j'aurais certainement trouvé une méthodologie pour rechercher sur le forum mais je n'aurais peut-être pas trouvais la réponse qu'il me fallait...

(j'ai testé maintenant est il me met aucun résultat.. )

Et pour :

a écrit :
ton code est illisible, merci de l'indenter un minimum ...

Excuse moi mais sur mon support il est incrémenté seulement les tab ne marchant pas dans les fenêtres de post dès l'instant ou je désire enlever un morceau de code tout par en c.... (tu auras certainement compris)

Enfin je suis désolé de dire cela mais il existe des accueils + sympa

emilizz a écrit :
Problème...

Il existe aussi des entrées plus généreuses en politesse
Modifié le 07 Jan 2005 - 20:23

oué je crois que je vais banir ce mot mdr

emilizz a écrit :

Enfin je suis désolé de dire cela mais il existe des accueils + sympa

Oui.


Mais pas ici


Je plaisante bien sûr, bienvenue sur ce Forum. Raphaël parlait je pense du point 4 de la méthodologie (problèmes de décalages?) qui pointe sur un billet du blog fort complet me semble-t'il

emilizz a écrit :
Enfin je suis désolé de dire cela mais il existe des accueils + sympa

Oui désolé j'étais un peu pressé alors j'ai dû me contenter de t'indiquer le chemin général.

Le point précis est effectivement l'étape 4 de la Méthodologie, qui conduit à ce billet.

Au sein de ce billet, tu trouveras la partie "Suppression de toutes les marges" qui dit ceci :

Methodologie a écrit :
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.

Le meilleur moyen d'identifier un problème de marges sur certains éléments et de... supprimer toutes les marges de tous les éléments.

Le principe est d'utiliser le sélecteur universel (*), qui s'appliquera à toutes les balises, et d'y mettre les marges à zéro :

* {margin: 0; padding: 0;}

Commencez votre feuille de style par cette déclaration. Si les décalages involontaires disparaissent, vous aurez détecté un problème de marges par défaut. A vous ensuite d'isoler l'élément qui provoque ce décalage.

Notez qu'une discussion sur l'usage de ce sélecteur universel a été ouverte sur le forum Alsa.

Bonne continuation

PS : au fait, si ton problème est réglé, je t'invite à éditer le titre de ton sujet pour y ajouter un [Résolu], comme cela est spécifié dans les Règles du forum; cela facilitera beaucoup les recherches futures. Merci d'avance

et en supprimant les puces de LI ça marche pas ?

ul { list-style-type: none;
}

nan cela ne marche pas si tu enlève les puces... j'ai essayé