[RÉSOLU] Liste en float qui se déplace toute seule sur hover

Bonjour à tous.

Bon là, dans le titre, c'est pas nécessairement très clair mais avec un lien, ça devrait tout de suite le devenir.
Le voilà.

Alors, j'ai donc une liste non ordonnée avec un float:left. J'ai ensuite ajouté quelques petits effets sur le hover. Jusque-là tout fonctionne bien.
Le problème arrive quand on survole le dernier élément de la rangée (en l'occurrence Belgique, Danemark, Grèce, etc.).

En fait, je n'arrive pas à saisir d'où vient le problème et qu'est-ce qu'il se passe exactement au niveau du code pour que la liste réagisse comme ça.

Si quelqu'un a une idée, je suis preneur.

Merci de votre aide.
Modifié par Macxim (19 Dec 2011 - 00:38)

Salut,

Tes blocs pour placer les drapeaux prennent la totalité de la largeur du conteneur.
Et ils sont bien alignés.

Sur le hover, tu augmente la largeur de tes drapeaux. Donc, la somme des largeurs dépasse la largeur du conteneur. Comme tu as mis un float:left, les blocs suivant passent à la ligne.

Donc 2 solutions :
1. ne modifie pas la largeur des drapeaux sur le hover.
2. laisse de la marge dans le conteneur pour laisser faire le hover

Bonjour et merci FranckD pour ta réponse.

J'aimerais, si possible, conserver l'effet sur le hover.

Quand tu dis :

FranckD a écrit :
2. laisse de la marge dans le conteneur pour laisser faire le hover

Tu parles de quel conteneur exactement ? ul.countries ? ou les <li> ?
J'ai bien essayé d'augmenter la taille de l'ul, et j'ai même rajouté une margin: 5px sur les <li> mais ce fut sans succès.

EDIT: J'ai également enlevé le transform: scale(1.1); sur .countries li:hover mais j'ai toujours le même problème...
Modifié par Macxim (07 Dec 2011 - 21:27)

Salut à tous !

J'ai découvert que si je mettais un clear: both juste après le(s) dernier(s) <li> problématiques, j'arrivais à contourner mon problème et ma liste ne "danse" plus lors du hover.

Cependant, je ne pense pas que ce soit une solution très propre et très académique.
Un idée ?

Personne n'a vraiment aucune idée ?
Désolé de faire remonter le sujet comme ça mais je ne comprends vraiment pas ce qui ne va pas... J'ai bien envie de tout effacer et de reprendre du début.

EDIT : Si ça peut aider, voici la structure de ma liste, ainsi que la CSS correspondante.

<ul class="countries">
		<li>
		     <a href="http://www.touslescampings.fr/france/" >
			 <img class="flag" src="http://www.touslescampings.fr/wp-content/themes/touslescampings/images/flags/fr.png" alt="France" />
			 	      <div class="country-content">
			 	            <p class="country-name">France</p>
			 	            <p class="country-sub"></p>
			 	      </div>
		     </a>
		</li>
                
               <li></li>
               <li></li>
               <li>et ainsi de suite...</li>
</ul>

.countries{
    padding:0;
    margin: 0 auto;
    width: 630px;
}
.countries a{
	text-decoration: none;
}
.countries li{
    width: 145px;
    height: 145px;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    -moz-box-shadow: inset 2px 2px 30px 0px #c0c0c0;
    -webkit-box-shadow: inset 2px 2px 30px 0px #c0c0c0;
    -o-box-shadow: inset 2px 2px 30px 0px #c0c0c0;
    box-shadow: inset 2px 2px 30px 0px #c0c0c0;
    margin: 5px;
    border-bottom: 6px solid rgba(0, 87, 0, 1);
}

.countries li a{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.flag{
	height: 50px; width: 50px;
	margin-left: 50px;
	margin-top: 15px;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.country-name{
    font-size: 15px;
    color: rgba(0, 87, 0, 1);
    text-align: center;
}
.country-sub{
    text-align:center;
    font-size: 14px;
    color: rgba(0, 87, 0, 1);
    width: 100%;
    left: 0px;
}
.countries li:hover{
    background: url(images/black_linen_v2.png);
    border-bottom: none;
    z-index:999;
}

.countries li:hover .country-name{
    font-size: 15px;
    color: #fff;

}
.countries li:hover .country-sub{
    font-size: 18px;
    color: #fff;
}
   
.countries li:hover .flag {  
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);  
    -ms-transform: rotate(360deg);   
    -o-transform: rotate(360deg);   
    transform: rotate(360deg);  
}  

Modifié par Macxim (17 Dec 2011 - 01:16)

Salut

Le problème que tu rencontrais , est lié au "border-bottom" de tes "li", d'ailleurs il va falloir que je t'avertis que ton hover ne marchera pas sur quelques anciennes versions de IE qui sont toujours à l'usage dans ces temps, toute fois pour le problème, le float que tu as mis pour les 'li' oblige l'élément à se positionner au plus haut point possible dans son conteneur permettant de comprendre la largeur de l'élément, et au hover tu faits disparaitre le border-bottom et le dernier élément trouve la place en dessous pour se positionner, alors il a reprend, et une fois nous avons plus le hover la balise "li" reprend son border-bottom de 6px, l'élément est alors obligé de prendre le plus haut point à gauche de son conteneur -comme le float est à gauche- par conséquent il se retrouve dans la place que tu estime de normale.

Pour régler le problème je te propose deux chose:
1- Comme tu as le background du conteneur des "li" est en Blanc, tu peut définir la propriété border-bottom au niveau du hover comme suit:

border-bottom: 6px solid #fff;

2- Comme toi tu enlèves le border-bottom en cas du hover je t'invite à récupérer les 6px perdues, en les ajoutant au margin-bottom au hover de la balise "li" comme suit:

margin-bottom: 11px;

Ces deux solutions sont bien testées sur ton cas et elles fonctionnent

Toute fois pour la question du clear:both, je n'ai pas compris où l'avais tu mis, alors je crois que je puisse pas te fournir de l'aide à ce niveau.

J'espère que cela répond à ta question.
Modifié par unami (17 Dec 2011 - 23:04)

Salut unami,

Merci pour cette réponse des plus complètes !!
En fait, je te remercie surtout pour l'explication, c'est surtout ce que je recherchais. Je préfère bien comprendre ce qui ne va pas plutôt qu'on me donne la solution sans me faire réfléchir.

En tout cas, j'ai bien compris maintenant. J'aurais dû enlever le border pour voir ce qui clochait.

J'ai préféré la solution. Testée et approuvée !

margin-bottom: 11px;

Merci beaucoup une fois encore !!