18041 sujets

Questions générales et questions de débutants

Animation Menu : Effet de transparence lors du survole du curseur

Bonjour,

Je suis en train de faire un site web.

Arrivée presque à la fin de ce celui ci, il ne manque plus que l'animation de mon menu !

J'aimerai avoir un effet de transparence sur les autres onglets quand le curseur survole un onglet du menu...

Seulement mes onglets sont des images.

Voici mon code html
	<body>
		<div id="background">
		
			<div id="header"></div>
			<div>
				<div id="menu">
				<li href="#" class="Reserver"></li>
				<li href="#" class="Services"></li>
				<li href="#" class="Contact"></li>
				</div>
					<div id="actu">
						<img src="CSS/Images/presentation.png"></img>
					</div>
			</div>
		
			<div id="footer"></div>
		</div>
	</body>


Voici mon code CSS


#menu			{width: 190px;
				height: 201px;
				position: absolute;
				z-index: 6;
}

li.Reserver		{background-image: url("images/Reserver.png");
				width: 182px;
				height: 67px;
				left: 0px;
}

li.Services		{background-image: url("images/Services.png");
				width: 188px;
				height: 67px;
				left: 0px;
}

li.Contact		{background-image: url("images/Contact.png");
				width: 184px;
				height: 67px;
				left: 0px;
}


Je ne sais pas si une formule CSS existe, ou si il faut que j'utilise du JavaScript (chose que je ne maitrise pas)...

J'ai bien chercher sur internet et sur les cours d'AlsaCreation, mais je n'ai rien trouvé...
oulala !
<li href=""></li>

il est ou le lien et il est ou le texte ou l'image ?

voici un lien test (2 approche avec un resultat different au survol de la souris) en rapport avec le sujet http://dabblet.com/gist/5238067 tu peut afficher css et html et l'editer (avec le menu en haut)

Corrige d'abord ta liste pour en faire un vrai menu.

Cdt,
GC
Bonjour,

Je n'ai pas tout compris..

Enfaite je ne developpe pas le site vers de nouvelle page, pour le moment je veux juste que ca soit "cliquable" mais j'ai changé le "href" et j'ai mis le lien de ma page Index :

				<div id="menu">
				<li href="file:///H:/Dossier%20travaux/Conception%20graphique%20et%20editorial/Camping/Site/Index.html" class="Reserver"></li>
				<li href="file:///H:/Dossier%20travaux/Conception%20graphique%20et%20editorial/Camping/Site/Index.html" class="Services"></li>
				<li href="file:///H:/Dossier%20travaux/Conception%20graphique%20et%20editorial/Camping/Site/Index.html" class="Contact"></li>
				</div>


Je ne sais pas si c'est exactement cette formule là, j'ai fais c/c de mon lien
Dans ton code :

div:first-child:hover img {opacity:0.5;}

span:hover img {opacity:0.5;}
span img:hover, div:first-child img:hover  {opacity:1;}


Qu'esque "first child" ?
Vu que mon img est en bg dans mon <li> j'utilise le code de cette facon :

li:hover {opacity:0.5}


???
bonjour,

ceci n'est pas un lien :
<li href="/Camping/Site/Index.html" class="Contact"></li>

ceci oui (enfin presque) Smiley smile 
<li><a href="/Camping/Site/Index.html" class="Contact"></a></li>


Il manque encore quelque chose d'important : du contenu (texte ou image).

Le minimum a faire est en general:
avec du texte : 
<a href="/contatc.html" >Contact</a>

ou une image 
<a href="/contact.html" title="Contact"><img src="contact.jpg" alt="contact"/>/a>


En gros, ton lien doit exister , avoir un sens, être cliquable, sans feuille de style, et si il y a une image , il doit aussi exister si l'image est absente.

Tu as apparemment des lacunes sur les bases, je t’incite vivement à relire soigneusement des tutoriel ou a te procurer un bon livre (infos et tutos sur ce site ou sur le siteduzero) HTML et CSS.

Cordialement,
GC
Modifié par gc-nomade (24 May 2013 - 12:18)
Bon,

J'ai pris en compte tes remarques et j'ai remis au propre le code :

				<div id="menu">
				<li class="Reserver"><a href="Index.html" title="Reserver"><img src="CSS/images/Reserver.png" alt="Reserver"></img></a></li>
				<li class="Services"><a href="Index.html" title="Services"><img src="CSS/images/Services.png" alt="Services"></img></a></li>
				<li class="Contact"><a href="Index.html" title="Contact"><img src="CSS/images/Contact.png" alt="Contact"></img></a></li>
				</div>


Normalement c'est bon

Puis j'ai réfléchi à la logique utilisé pour ton module, et j'ai fais ceci :

#menu:first-child:hover img {opacity:0.5;}

li:hover img {opacity:0.5;}
li img:hover, #menu:first-child img:hover  {opacity:1;}


En bref, un grand merci car ça marche !!
kmicase a écrit :

J'ai pris en compte tes remarques et j'ai remis au propre le code :


<div id="menu">
  <li class="Reserver"><a href="Index.html" title="Reserver"><img src="CSS/images/Reserver.png" alt="Reserver"></img></a></li>
  <li class="Services"><a href="Index.html" title="Services"><img src="CSS/images/Services.png" alt="Services"></img></a></li>
  <li class="Contact"><a href="Index.html" title="Contact"><img src="CSS/images/Contact.png" alt="Contact"></img></a></li>
</div>


Normalement c'est bon

Presque Smiley cligne

Tes éléments de liste (li pour list item) doivent être contenu dans un "conteneur spécifique" :

Une liste ordonnée ol (ordered list) :
<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

Une liste non-ordonnée ul (unordered list) :
<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

Ou éventuellement (en HTML5) dans la balise menu (à mettre de côté pour le moment Smiley cligne )

Bon courage Smiley smile
Sujet clos
Aller à