28217 sujets

CSS et mise en forme, CSS3

Lien sur balise <h1>

Pages :
Bonjour à tous,

Je n'arrive pas à faire fonctionner hover, visited sur une balise <h1>.

Voici mon code qui doit forcément être erroné Smiley smile

a.h1 {
color: EE760B;
font-size:11px;
line-height:11px;
color: EE760B;
display:inline;
text-decoration: none;
}
h1:hover {
font-family: Verdana;
color: B0ADAA;
font-size:11px;
line-height:11px;
display:inline;
decoration: none;
}
h1:visited {
font-family: Verdana;
color: B0ADAA;
font-size:11px;
line-height:11px;
display:inline;
decoration: none;
}

________________________________________________
Le format reste fixe, tel qu'indiqué à a.h2

Pour info j'ai essayé :
"a.h1:hover" ou ".h1:hover" mais rien à faire.


Quelqu'un à une idée de mon erreur ?
D'avance merci de votre aide.
Bonjour,
Quel navigateur utilise tu pour visionner ta page ?
Modifié par DarkNeo (08 Jul 2005 - 13:17)
:visited ne s'applique qu'aux liens
:hover s'applique à tous les éléments, mais pas sous IE où là seuls les liens interpretent cette pseudo classe
Pour faire un lien au sein d'un titre, tu dois faire ceci en html :

<h1><a href="">.....</a></h1>

et pas

<a href=""><h1>.....</h1></a> !
Pour DarkNeo : je teste sur sur IE 6 et Mozilla

Pour TriadPtale : si je mets mon code dans le sens que tu m'indiques le Css ne fonctionne pas. Il faut que ma balise <h1></H1> encadre mon texte pour que cela fonctionne... J'avais fait l'erreur Smiley smile

A OLivier : Malheureusement tu as raison, j'ai de grosses lacunes et j'apprends sur le tas au fur et à mesure de la construction de mes sites. Mais j'apprends vite ! Smiley smile )

Merci pour vos réponse et votre patience mais je n'arrive toujours pas à faire marcher mes liens... Suis patiente mais je planche sur ça depuis ce matin... Smiley biggrin
Il ne faut justement pas apprendre sur le tas au fur et à mesure Smiley cligne

Tu dois assimiler les bases essentielles avant tout Smiley lol

Pour ce que tu veux faire, tu dois mettre ton lien DANS le titre, c'est ainsi et pas autrement Smiley cligne 

<h1><a href="...">...</a></h1>


Ensuite dans les CSS

h1
{
/* tes styles pour le titre en lui même
}

h1 a
{
/* tes styles pour les liens dans leur état de base */
}

h1 a:visited
{
/* tes styles pour les liens visités */
}

h1 a:hover
{
/* tes styles au survol */
}
Modérateur
kidi a écrit :

Pour TriadPtale : si je mets mon code dans le sens que tu m'indiques le Css ne fonctionne pas. Il faut que ma balise <h1></H1> encadre mon texte pour que cela fonctionne... J'avais fait l'erreur


Il faut savoir qu'au niveau des normes, il ne faut jamais mettre un élément de type block dans un élément de type inline. Techniquement, l'erreur est de mettre ton <h1> DANS ton <a>. Il faut donc que tu fasse ce que TriadPtale a dit.
Smiley smile

Fais-le de cette façon, et si tu as un bug quelconque, montre-nous le résultat. Smiley smile
Tout a été dis Smiley smile

Il faut d'abord écrire un code html correct et ensuite appliquer les css et pas l'inverse Smiley cligne
Merci pour la leçon Smiley confused . Soyez gentils, je débute dans le css.
Merci Olivier pour l'exemple de code, voici ce que j'ai fait (sur une balise h2) selon ton explication :

h2  {
	font-family: Verdana;
	color: EE760B;
	font-size:11px;
	line-height:11px;
	display:inline;
	text-decoration: none;
}
h2 a {
	font-family: Verdana;
	color: EE760B;
	font-size:11px;
	line-height:11px;
	display:inline;
	decoration: none;
}
h2 a:hover  {
	font-family: Verdana;
	color: B0ADAA;
	font-size:11px;
	line-height:11px;
	display:inline;
	decoration: none;
}
h2 a:visited  {
	color: B0ADAA;
	font-size:11px;
	line-height:11px;
	color: EE760B;
	display:inline;
	text-decoration: none;
}

Dans mon code html :

<h2><a href="#" target="_blank">lien1</a></h2><br>
<h2><a href="#" target="_blank">lien2</a></h2><br>


Mais ça ne marche toujours pas... Où me suis-je trompée ?
Mes liens sont toujours à la définition de h2 et ne changent pas de couleur.
Modifié par kidi (08 Jul 2005 - 16:32)
Bonjour et bienvenue kidi Smiley smile

Pour une lecture plus facile des échanges sur le forum, il faut placer son code dans la balise "code".

Tu peux facilement corriger tes posts en utilisant le bouton "éditer" sur chaque post. Merci d'avance Smiley cligne
bonjour kidi !

Au passage, il n'existe pas de propriété decoration Smiley cligne 

h2 a {
font-family: Verdana;
color: EE760B;
font-size:11px;
line-height:11px;
display:inline;
[b]decoration: none;[/b]
}

Deux déclarations pour color, seule la deuxième sera prise en compte...

h2 a:visited {
[b]color: B0ADAA;[/b]
font-size:11px;
line-height:11px;
[b]color: EE760B;[/b]
display:inline;
text-decoration: none;
}

Il y a beaucoup de déclarations inutiles dans ton code. Tu aurais avantage à lire quelque chose sur « l'héritage » des éléments...

Ceci est équivalent au dernier code que tu as donné :
<edit /> plus maintenant. J'ai rajouté a:link

h2 a {
	font-family: Verdana;
	font-size:11px;
	line-height:11px;
	display:inline;
	text-decoration: none;
}
h2 a:link {
	color: EE760B;
}
h2 a:hover {
	color: B0ADAA;
}
h2 a:visited {
	color: B0ADAA; /* ici il faut faire un choix */
	color: EE760B;
}

Modifié par Stephan (08 Jul 2005 - 17:07)
Oups. Il faut respecter l'ordre suivant dans la déclaration des pseudo-classes :

a:link {}
a:visited {}
a:hover {}
a:active {}

Donc a:visited doit arriver plus tôt Smiley smile
Modifié par Stephan (08 Jul 2005 - 17:16)
kidi a écrit :
Merci pour la leçon Smiley confused . Soyez gentils, je débute dans le css.

On est très gentil ^^
kidi a écrit :

Merci Olivier pour l'exemple de code

De rien Smiley smile
kidi a écrit :

Mais ça ne marche toujours pas... Où me suis-je trompée ?
Mes liens sont toujours à la définition de h2 et ne changent pas de couleur.

As tu un exemple en ligne histoire qu'on se rende compte du problème ?
La dernière remarque de Stephan devrait t'aider, l'ordre est important Smiley cligne
Un moyen pour s'en souvenir :
LoVeHAte

Pour Link, Visited, Hover et Active
;)
Modifié par Olivier (08 Jul 2005 - 17:14)
Super ça : LoVeHAte (Pour Link, Visited, Hover et Active) je retiens.

Malheureusement, c'est sur un site adulte que je travaille, je ne peux decemment communiquer l'adresse.

J'ai lu "Comprendre l'héritage et la parenté des styles CSS", merci Stephan pour le lien. Et du coup j'ai rajouté une ligne "a:active" à mon code Smiley smile Ainsi que classer les choses dans le bon ordre.Suis bonne élève Smiley smile

Pourtant je n'obtient pas le résultat que je veux. Lorsque je simplifie le code comme indiqué par Stephan :

h2  {
font-family: Verdana;
color: EE760B;
font-size:11px;
line-height:11px;
display:inline;
text-decoration: none;
}
h2 a:link {
color: EE760B;
}
h2 a:visited {
color: F6C586;
}
h2 a:hover {
color: B0ADAA;
}
h2 a:active {
color: B0ADAA;
}


Le soulignement et le dépassement de ligne apparaissent.
De plus, à présent, la couleur à l'affichage est celle de "a:visited" et non celle de h2 de départ.
Modifié par kidi (08 Jul 2005 - 17:53)
kidi a écrit :

Malheureusement, c'est sur un site adulte que je travaille, je ne peux decemment communiquer l'adresse.

Arf, oui en effet Smiley smile

Tu peux peut être faire un modèle sans images ni contenu qui reprend la structure générale.

Par contre, dans ton code corrigé, tu n'as pas utilisé l'ordre LoVeHAte Smiley cligne
Ton visited est après ton hover
Dernières nouvelles...
J'ai rajouté 
text-decoration: none;
dans chaque code et je n'ai plus le soulignement, mais lorsque je clique sur un lien c'est TOUS les liens qui prennent la couleur de "Visited".
Pas d'effet "hover" ni "active"...

Je ne vois pas où ça pêche... Smiley decu 

h2  {
font-family: Verdana;
color: EE760B;
font-size:11px;
line-height:11px;
display:inline;
text-decoration: none;
}
h2 a:link { 
color: EE760B;
text-decoration: none;
}
h2 a:hover {
color: B0ADAA;
text-decoration: none;
}
h2 a:visited {
color: F6C586;
text-decoration: none;
}
h2 a:active {
color: B0ADAA;
text-decoration: none;
}
kidi a écrit :

Je ne vois pas où ça pêche... Smiley decu 

h2  {
...
color: EE760B;
...


lol

Dites, Olivier, Stephan, il n'y a rien qui vous attire l'oeil, là, depuis le début ?

Sont fatigués, tout les deux Smiley biggol

kidi : tes codes de couleurs sont incorrects. Un code de couleur de ce type commence toujours par le caractère # :

h2  {
...
color: #EE760B;
...


Un petit détour par le validateur CSS régulièrement pendant le développement de ta feuille de style t'évitera ce genre de déboires (bien excusables) Smiley cligne
Pages :
Sujet clos
Aller à