18008 sujets

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

Différence de rendu de transitions sur texte et sur liens

Bonjour,
Question de débutant qui essaie de se familiariser avec les transitions .
J'ai repris l'exemple de Benjamin De Cock "Menu animé en CSS", qui marche évidemment fort bien en décalant vers la droite les liens d'une liste de navigation.
J'ai voulu compliquer un peu les choses en introduisant des changement sur le fond, la couleur, la taille des caractères et le padding.
J'obtiens bien un résultat qui va dans le sens recherché, mais je n'arrive pas à avoir un rendu identique si je survole une ligne avec du texte ou une ligne avec des liens.
J'ai comme dans l'idée que quelque chose (peut-être élémentaire ?) m'échappe.
Merci par avance aux experts de m'expliquer l'origine de ce résultat, et éventuellement de me dire comment, et si on peut, obtenir un rendu identique dans les deux cas.

André
Voici le code:
<!DOCTYPE html>
<html lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="styles.css" />
<meta name="author" content="Benjamin De Cock" />
<title>Menu animé en CSS</title>

<style type="text/css" media="screen">
ul {
margin:100px;
list-style:none;
font: 1.5em "lucida grande",arial;
}
li {
float:left;
clear:left;
background:#555;
}

li{ transition-property: background-color, padding-left, color, font-size;
transition-duration: 0.5s, .8s, 1s, 2s;
transition-timing-function: linear, ease-in-out, ease-in, ease;

transition-delay: 0.5s 0s, 1s, 1.5s;
}


a, .texte { display:block;
padding: 0.5rem 1rem;
color:#fff;
text-decoration:none;
}

li:hover, li a:hover{
background:#f00;
padding-left:3rem;
color: #fa0;
font-size: 2rem;
}


</style>

</head>


<body>

<ul>
<li class="texte">Page d'accueil</li>
<li class="texte">Informations</li>
<li class="texte">Photographies</li>
<li class="texte"> </li>
<li class="texte"> </li>


<li><a href="#">Informations</a></li>
<li><a href="#">Photographies</a></li>
<li><a href="#">Contactez-nous</a></li>
</ul>

</body>

</html>
<!DOCTYPE html>
<html lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="styles.css" />
<meta name="author" content="Benjamin De Cock" />
<title>Menu animé en CSS</title>

<style type="text/css" media="screen">
ul {
margin:100px;
list-style:none;
font: 1.5em "lucida grande",arial;
}
li {
float:left;
clear:left;
background:#555;
}

li{ transition-property: background-color, padding-left, color, font-size;
transition-duration: 0.5s, .8s, 1s, 2s;
transition-timing-function: linear, ease-in-out, ease-in, ease;

transition-delay: 0.5s 0s, 1s, 1.5s;
}


a, .texte { display:block;
padding: 0.5rem 1rem;
color:#fff;
text-decoration:none;
}

li:hover, li a:hover{
background:#f00;
padding-left:3rem;
color: #fa0;
font-size: 2rem;
}


</style>

</head>


<body>

<ul>
<li class="texte">Page d'accueil</li>
<li class="texte">Informations</li>
<li class="texte">Photographies</li>
<li class="texte"> </li>
<li class="texte"> </li>


<li><a href="#">Informations</a></li>
<li><a href="#">Photographies</a></li>
<li><a href="#">Contactez-nous</a></li>
</ul>

</body>

</html>
Voici le code : 
<!DOCTYPE html> 
<html  lang="fr">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="all" href="styles.css" />
    <meta name="author" content="Benjamin De Cock" />
    <title>Menu animé en CSS</title>
    
    <style type="text/css" media="screen">
		ul {
			margin:100px;
			list-style:none;
			font: 1.5em "lucida grande",arial;
		}
		li {
			float:left;
			clear:left;
			background:#555;
			}
					
		li{	transition-property: background-color, padding-left, color, font-size;
			transition-duration: 0.5s, .8s, 1s, 2s;
			transition-timing-function: linear, ease-in-out, ease-in, ease;
			transition-delay: 0.5s 0s, 1s, 1.5s;
		}
		
		
		a, .texte {	display:block;
			padding: 0.5rem 1rem;
			color:#fff;
			text-decoration:none;	
		}
		
		li:hover, li a:hover{
			background:#f00;
			padding-left:3rem;
			color: #fa0;
			font-size: 2rem;
		}
		
		
	</style>
	
  </head>


  <body>
  
  	<ul>
		<li class="texte">Page d'accueil</li>
		<li class="texte">Informations</li>
		<li class="texte">Photographies</li>
		<li class="texte"> </li>
		<li class="texte"> </li>
		
		
		<li><a href="#">Informations</a></li>
		<li><a href="#">Photographies</a></li>
		<li><a href="#">Contactez-nous</a></li>
	</ul>
    
  </body>

</html>
Bonjour,
vous avez mis une transition pour les 'li' mais pour pas pour les liens.
Quand il y a un lien, il est quand même dans un 'li' et les deux hovers se mélangent : l'un est immédiat, l'autre est progressif (on voit ce dernier dans la marge à gauche).
Smiley smile
Zelena a écrit :
Bonjour,
vous avez mis une transition pour les 'li' mais pour pas pour les liens.
Quand il y a un lien, il est quand même dans un 'li' et les deux hovers se mélangent : l'un est immédiat, l'autre est progressif (on voit ce dernier dans la marge à gauche).
Smiley smile

D'abord merci pour cette réponse rapide, qui met le doigt sur le "double hover" qui a lieu sur <li> et sur <a>.
Est-ce que cela signifie que la présence dans les lignes de texte pur et de liens n'est pas susceptible de faire l'objet de transitions donnant des résultats homogènes ? Ou bien peut-on tourner cette difficulté d'une façon quelconque ? Les essais que j'ai faits en plaçant les textes et les liens dans un paragraphe, par exemple ne sont pas concluants; mais peut-être y a-t-il d'autres moyens? Votre avis serait bienvenu.
André
Bonjour,
les liens, c'est aussi du texte. Il a subi un formatage par défaut qui permet de le distinguer du texte qui n'est pas cliquable. Mais ce formatage peut être modifié… supprimé.
Smiley smile
Viktoria a écrit :
comment comprendre le nouveau venu, si tout ce que sur le forum écrit - il n'est pas clair Smiley decu


C'est moi ou la phrase à peu de sens ?
Sujet clos
Aller à