28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerai savoir pourquoi le code suivant fonctionne très bien sous Firefox et pas sous IE :

.bouton {
	width: 110px;
	float: left;
	padding: 5px;
}

.bouton:hover {
	background-color: #FFFFFF;
	border: 1px #7491C6 solid;
}


	<div id="header">
		<a href="index.html" title="Accueil"><img src="images/logo.gif" width="355" height="58" alt="" style="border: 1px #000000 solid;"/></a><br/><br/>
		<div id="boutons">
			<div class="bouton"><a href="index.html" class="menutop">Accueil</a></div>
			<div class="bouton"><a href="#" class="menutop">Electrécité</a></div>
			<div class="bouton"><a href="#" class="menutop">Alarmes</a></div>
			<div class="bouton"><a href="#" class="menutop">Téléphonie</a></div>
			<div class="bouton"><a href="#" class="menutop">Nos références</a></div>
			<div class="bouton"><a href="#" class="menutop">Contact</a></div>
		</div>
	</div>


Dans FF la couleur de fond change bien, pas dans IE Smiley decu

Merci pour votre aide.
Modifié par Hayreon (31 Jan 2006 - 14:48)
JE crois que l'attribut hover ne marche que pour les liens.

Je crois que si tu veut faire ca il faut passer par du javscript.
Modifié par death83 (31 Jan 2006 - 15:03)
Voila un exemple de ce que je fait pour y arriver:

<td class="recherchealfa2" onClick="liens(\''.$lien.'Q\')" onMouseOver="this.className=\'recherchealfaon\';" onMouseOut="this.className=\'recherchealfa2\';"><a href="'.$lien.'Q">Q</a></td>
Merci mais je ne veut pas de jaava pour ça, je fait tout mon site en xhtml strict. Mais j'ai trouver la solution grace à un lien trouvé sur le site

#navcontener {
	position: relative;
	text-align: center;
}

ul#navlist
{
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {
	padding: 3px 10px;
}

#navlist a:link, #navlist a:visited
{
	color: #193C6A;
	background-color: #F0F3F7;
	text-decoration: none;
	border: 1px #F0F3F7 solid;
}

#navlist a:hover
{
	color: #193C6A;
	background-color: #FFFFFF;
	text-decoration: none;
	border: 1px #7491C6 solid;
}


<div id="navcontener">
			<ul id="navlist">
				<li id="active"><a href="index.html" id="current">Accueil</a></li>
				<li><a href="#">Electricité</a></li>
				<li><a href="#">Alarmes</a></li>
				<li><a href="#">Téléphonie</a></li>
				<li><a href="#">Nos références</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>


Comme ça, c est ok Smiley smile
death83 a écrit :
JE crois que l'attribut hover ne marche que pour les liens.

Je crois que si tu veut faire ca il faut passer par du javscript.


Je me permets d'intervenir pour corriger une phrase incomplète:
a écrit :
Je crois que l'attribut hover ne marche que pour les liens dans Internet Explorer.


hover devrait marcher pour tous les éléments, mais IE ne le gère que sur les liens...
Bonjour à vous tous!
J'ai recopier le script Smiley confused ...en le modifiant quelque peu..
car moi je souhaite un menu en vertical.
seulement, j'ai l'impression que sous IE, l'attribut list-style-type: none; ne marche pas, j'ai mais bouton qui sont coller à droite, comme si il y avait une marge.. quelqun aurait une solution?