[ résolu] Lien qui contamine les autres éléments

Bonjour,
J’essaie de me lancer dans la création d’un site pour notre club photo… J’ai trouvé chez les américains un tuto sur la mise en page sur 3 colonnes fluides. J’y ai apporté mon petit grain de sel et je coince depuis plus de 15 jours.
Avant d’avoir recours à l’aide du forum, j’ai potassé autant que j’ai pu ; J’ai lu et relu tout ce qui traîne sur le forum, sur Alsacréations et Openweb… Je n’arrive toujours pas à voir où j’ai fait une erreur… Or il doit y en avoir une puisque le lien posé sur la dernière image du « menuvertical » déborde sur tout ce qui suit dans IE. C’est [#]là que vous trouverez l’objet de mes affres…
J’ai pensé à un problème de boites ; mais j’ai éliminé tous les padding pour ne laisser qu’une bordure de 10px à gauche dans mes « a link »…. Normalement mes images tiennent dans ces boites.. la plus grande fait 159px de large ! [159 + 10 < 170 (non ?)]
Si quelqu’un pouvait me mettre sur la voie, cela me permettrait sûrement de faire un grand bond en avant…
PS ; J’ai bêtement recopié le « Mozilla fixe »…sans en comprendre le fonctionnement. Quand je l’enlève ça n’arrange rien sur IE et ça casse tout sur Mozilla…mais c’est une question pour la deuxième semaine...

J'ai monté sur mes pages perso le résultat et voici un extrait de ma page CSS

#innerbody {
	margin: 0px;
	width: 100%;
}

#leftcol {
	width: 170px; bgcolor: #000000;					
	margin-left: -170px; 			
	float: left;
	position: relative;
	z-index: 10;
}



#centercol {
	float: left;
	position: relative;
	width: 100%;
	z-index: 12;
}

#centercontent {
	border: solid 1px #a4a4a4;
	padding: 10px;
	margin: 0px 15px 0px 10px;
}

#footer {
	clear: both;
	position: relative;
	z-index: 13;
	border: solid 1px #A4A4A4;
	color: #ffff66;

	padding: 8px; background-color: rgb(0, 102, 102);
}

/* fixes for mozilla */
#page > #innerbody { border-bottom: 1px solid transparent; }
#leftcol { margin-right: 1px; }
#rightcol { margin-left: 1px; }
#centercol { margin: 0 -8px 0 -2px; }

.verticalmenu {
	width: 170px; 
	margin-top: 20px;
}
 
.verticalmenu ul { 
 list-style: none; 
 padding: 0px; 
 margin: 0px; 
}

.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {
	padding: 0px;
	display: block; width: 160px; height: 50px;
	
	border-left: 10px solid #000000;
	
}


.verticalmenu a:hover {
	border-left: 10px solid #334392;
}

Modifié par Haddok (19 Sep 2005 - 19:40)

Le problème ne vient pas de la feuille de style, mais du code HTML du menu, qui est mal formé :

                                      <ul>
						<li><a href="#"><img src="images/logos/boutclub.jpg" alt="le club" border: 0px; </a></li>
                                                <li><a href="#"><img src="images/logos/boutacti.jpg" alt="activités" border: 0px; </a></li>
                                                <li><a href="#"><img src="images/logos/boutprog.jpg" alt="le programme" border: 0px; </a></li>      
                                                <li><a href="#"><img src="images/logos/boutgale.jpg" alt="galerie des membres" border: 0px; </a></li>
                                 <li><a href="#"><img src="images/logos/boutlien.jpg" alt="liens" border: 0px; </a></li>
                                            <li><a href="#"><img src="images/logos/boutcont.jpg" alt="contact" border: 0px;  </a></li>		
                                     </ul> 

Dans le code recopié ci-dessus, les balise <img> ne sont pas fermées.
Il faudrait écrire :

<img src="bouton_machin.jpg" alt="machin" style="border: 0px">

à la place de

<img src="images/logos/machin.jpg" alt="machin" border: 0px; 

Il y a deux erreurs dans ce code : la balise img n'est pas fermée (pas de ">" à la fin, même si en HTML dans certains cas c'est optionnel, il est déconseillé de ne pas fermer) et le code CSS "border: 0px;" qui aparaît directement dans la balise, au lieu d'être la valeur d'un attribut style.

Pour éviter ce genre d'erreur, je ne puis que te conseiller d'utiliser un validateur de code HTML comme le validateur du W3C (voir le résultat sur la page qui nous interesse )
ou validome. Le résultat sur la même page y est d'ailleurs plus explicite, et en français.
Modifié par Lanza (19 Sep 2005 - 17:38)

Merci Lanza; J'en suis encore malheureusement à ce genre d'erreurs...et en travaillant seul, c'est très dur à voir.
Il va falloir que je me penche sérieusement sur les validateurs. Je ne pensais nécessaire de les utiliser qu'en fin de parcours...et j'en suis encore loin !