28217 sujets

CSS et mise en forme, CSS3

Pb Css rollovers

Hello tout le monde,

J'ai un petit soucis, j'ai appliqué le tuto sur le rollover CSS trouvé sur le site, ça marche bien sauf que j'ai un petit problème. LEs icônes se mettent les 1 en dessous des autres et non côte à côte.. et je n'arrive pas à trouver la solution.

<div class="header"><a class="image" href="{U_SEARCH}"></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image1" href="{U_FAQ}" ></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image2" href="{U_CDM}" ></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image3" href="{U_ACHAT}" ></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image4" href="{U_MEMBERLIST}" ></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image5" href="{U_GROUP_CP}"></a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<a class="image6" href="{U_PROFILE}" </a></div>




a.image { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
width: 60x; /* largeur de l'image réactive */
     height: 60px; /* hauteur de l'image réactive */
     background-image: url(images/icone_rechercher_174.png); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(images/icone_rechercher_1741.png); /* source de l'image d'arrivée */
}

.header{text-align:center;width:100%;display:block;}


Merci de votre aide.. je voudrais donc jsute que les icônes soient côte à côte..
Peux-tu donner le lien de ton site ? ce serait plus facile pour t'aider, parce que tout l'HTML sur une ligne avec des &nbsp; les uns à coté des autres c'est pas vraiment top pour comprendre ce que tu as écrit.

En règles générales, un lien et/ou un petit dessin sont les meilleurs input pour demander de l'aide

A tout hazard, est-ce que ce ne serait pas dû au display:block car je crois que dans ce cas l'élément crée une nouvelle ligne et puis même si ce n'est pas cela tu as écrit width:60x; au lieu de 60px;
Modifié par Merlin (06 Nov 2005 - 21:13)
En fait il faut que je le publie pour que tu voies l'exemple. Or, c direct sur le serveur. Je ne veux point importuner mes membes avec ce problème de mise en page...

je vais voir pour le block mais j'avais déjà essayé et cela faisait disparaître l'icône...

Je t'envoies par PM mon msn... si je t'ai en direct je pourrai publeir rapidement la page qui me pose soucis Smiley cligne

Merci pour ton aide !
J'ai pas trouvé le pb de ton code, aussi je te propose celui-là
<body>
<style>
	.header {
	text-align:center;
	width:100%;
	}
	.header li {
	float:left;
	list-style-type:none;
	}
	a.image {
	display:block;
	width:60px;
	height:60px;
	background-image:url(image1.jpg);
	background-repeat:no-repeat;
	}
	a.image:hover {
	background-image:url(image1bis.jpg);
	}
	a.image1 {
	display:block;
	width:60px;
	height:60px;
	background-image:url(image2.jpg);
	background-repeat:no-repeat;
	}
	a.image1:hover {
	background-image:url(image2bis.jpg);
	}
	a.image2 {
	display:block;
	width:60px;
	height:60px;
	background-image:url(image3.jpg);
	background-repeat:no-repeat;
	}
	a.image2:hover {
	background-image:url(image3bis.jpg);
	}
</style>
<div class="header">
<ul>
	<li><a class="image" href="#"></a></li>
	<li><a class="image1" href="#"></a></li>
	<li><a class="image2" href="#"></a></li>
</ul>
</div>
</body>


Je l'ai testé et celà marche. Il n'y a plus qu'à le mettre en forme
Je confirme, que j'ai testé, très exactement, le code que j'ai proposé sous FF et IE et que les 3 icones sont bien alignées horizontalement et parfaitement visibles (ce qui était la question posée). Evidemment, les (6) vignettes que j'ai utilisées ont été placées dans le même répertoire que le code et je n'ai pas regardé le autres aspects du stylage (bordure, centrage, etc...)
Sujet clos
Aller à