28172 sujets

CSS et mise en forme, CSS3

Hover qui marche en local et pas en ligne [Résolu]

Bonjour,

j'ai un problème avec un menu sprite

en local le hover marche bien mais pas quand je le télécharge, alors que c'est exactement les mêmes fichiers, ben l'effer hover ne marche plus

j'ai mis en dessous du menu sur la gauche dans la page une capture de quand cela marche en local

mon fichier Xhtml est http://www.newdawnmedialtd.com/dev/test/
mon fichier CSS est http://www.newdawnmedialtd.com/dev/test/style_2.css

je ne comprends vraiment pas, peut être qu'un des guru parmi vous aurait une idée car je suis pas très forte en CSS

un grand merci bcp par avance

Steffy
Modifié par freeriders (16 Nov 2009 - 22:30)
Merci bcp pfoofen t'es trop fort.. et moi je suis trop nulle !!

vraiment désolé pour la typo !!! je fatigue moi

merci encore

Steffy
Salut,

Un petit conseil pour la suite, prend l'habitude de n'utiliser aucune majuscule dans tes noms de fichiers, tu te simplifiera la vie et évitera de t'arracher les cheveux pour ce genre de chose. Smiley cligne

Sinon, tu considère ton sujet comme [Résolu] ? Smiley smile
Avé Alsacréateurs !

Dans la lignée de Freeriders, un problème un peu similaire mais plus louche ...
Un menu avec effet hover qui change juste la couleur de fond.
L'effet marche nickel sous FF3.6.2 mais sous IE 8 seule la couleur de police change, le hover est donc pris en compte, mais pas pour la couleur de fond.
Ci-dessous le css complet et le html correspondant ...
Si quelqu'un a une idée ou des remarques sur le code, merci d'avance Smiley lol 


	<div id="contenu">
		<div id="entete">
			<div id="logo">
				<a href=""><img src="" alt="Photos Tubes" title="Accueil Intranet" /></a>
			</div>
			<div id="titre">
				<a href="" title="">...</a>
			</div>
			<div id="user">
				Utilisateur
			</div>
		</div>
		<div style="clear: both"></div>
		
		<div id="corps">
			<div id="texte">
				<div id="menuhaut">
					<ul>
						<li><a href="">...</a></li>
						<li><a href="">...</a></li>
						<li><a href="">...</a></li>
					</ul>
					<a href="" title=""><img src="img/add.png" alt="Ajout catégorie"></a>
				</div>


	* {
		margin: 0px;
		padding: 0px;
	}

	body {
		background: #5CBACC;
		font-family: 'Verdana', Sans-serif;
		font-size: 12px;
	}
	img { border: none;}

	#contenant { padding: 10px 0px;}

	#contenu {
		margin: 0px auto;
		width: 780px;
		background: #FFF;
	}

	#entete {
		background: #0c5c91;
		height: 193px;
		border-bottom: 5px solid #5CBACC;					
	}

	#logo a {
		float: left;
		width: 215px;
	}

	#titre a {
		float: right;
		width: 525px;
		height: 30px;
		padding: 65px 20px;
		text-align: left;
		color: #FFF;
		font-weight: bold;
		font-size: 30px;
		text-decoration: none;
	}
	#user {
		float: right;
		width: 555px;
		height: 23px;
		background: #f7a30a;
		text-align: right;
		padding: 5px;
		font-weight: bold;
		font-size: 16px;
	}
	#entete img { float: left;}

	#corps {}

	#menuhaut {
		background: #005D89;
		height: 28px;
	}
	#menuhaut li {
		list-style-type: none;
		float: left;
		text-align: center;
		border-right: 1px solid #FFF;
	}
	#menuhaut li a {
		display: block;
		color: #FFF;
		text-decoration: none;
		padding: 5px;
		font-weight: bold;
		font-size: 16px;
	}
	#menuhaut li a:hover {
		color: #000;
		background: #FFF;
	}
	#menuhaut a img {
		float: right;
		padding: 5px;
	}
	#texte { background: #FFF;}
	#onglets {
		background: #20B2AA;
		border-bottom: 5px solid #5CBACC;
		height: 24px;
	}
	#onglets li {
		list-style-type: none;
		float: left;
		text-align: center;
		border-right: 1px solid #FFF;
	}
	#onglets li a {
		display: block;
		color: #FFF;
		text-decoration: none;
		padding: 5px;
		font-weight: bold;
	}
	#onglets li a:hover {
		color: #000;
		background: #FFF;
	}
	#onglets a img {
		float: right;
		padding: 5px;
	}

	#detail {
		padding: 20px;
	}
	#accueil {
		font-style: italic;
		font-size: 14px;
		line-height: 20px;
	}
	table { width: 100%;}
	th { padding: 5px; background: url(../img/Thead.png);}
	.pairG { padding: 5px; text-align: left; background-color: #EEE;}
	.pairC { padding: 5px; text-align: center; background-color: #EEE;}
	.impairG { padding: 5px; text-align: left; background-color: #DDD;}
	.impairC { padding: 5px; text-align: center; background-color: #DDD;}
	.add { float: right;}

	#pied {
		background: #20B2AA;
		border-top: 5px solid #5CBACC;
		text-align: center ;
		height: 40px ;
		padding: 5px ;
	}
	#pied img {
		float: right;
		margin-left: 5px;
		margin-right: 5px;
	}

	.actuel {
		color: #000;
		background: #f7a30a;
		display: block;
		padding: 5px;
		font: bold 16px Verdana;
	}
	.actuelongl {
		color: #000;
		background: #f7a30a;
		display: block;
		padding: 5px;
		font: bold 12px Verdana;
	}
	.bas {
		display: block;
		padding: 20px Opx 10px 0px;
		text-align: right;
	}
	.cmic {
		font: bold 16px Verdana;
	}
	.cmic  a {
		text-decoration: none;
		color: #FFF;
	}

Modifié par Benzouye (23 Mar 2010 - 17:45)
Sujet clos
Aller à