Formats différents pour liens différents.

Bonjour,

Grâce à

a:link { color: #FECFFD; }
a:visited { color: #FC94F4;}

Je mets en forme mes liens.

Mais, j'aimerai que certains liens dans la même page se voient attribuer d'autres formes. Comment créer une class spécificique rattaché à [a]?
Merci d'avance.

Bonjour,

Si j'ai bien compris ta question, tu fais ça tout simplement :

a.maClasse:link{}
a.maClasse:visited{}

:)

Merci, c'est exactement ça. Je savais que c'était un pb de syntaxe.

Mais j'ai un autre problème lié à cela.
J'ai donc dans un span, une image et un mot que j'ai formaté (sans fond et couleur spécifique pour le mot). En leur donnant la fonction de lien une couleur et un surlignage s'ajoutent. Grâce au formatage vu plus haut, j'arrive sans peine à virer le surlignage mais j'ai un pb avec la couleur. Je veux qu'au niveau de cette dernière le formatage initial demeure. Si j'attribue dans "a.maClasse:link{} a.maClasse:visited{}" la même couleur de texte initial, ça va pour le mot, mais mon image se retrouve affublé d'un cadre coloré. En fait je cherche la formule pour que le lien n'ai pas de couleur (afin que la couleur initial demeure). J'ai essayé avec abacadabra, ça marche pas.

Bon j'espère être assez clair. D'autant plus que je pense que la solution n'est pas sorcier.

Bonjour,

Un exemple:

/* Style de base pour tous les liens */
a {
	color: red;
	text-decoration: underline;
}
a:visited {color: brown;}
a:hover, a:focus, a:active {
	color: white;
	background: red;
	text-decoration: none;
}

/* Style des liens dans un bloc donné */
#monconteneur a,
#monconteneur a:visited {
	color: inherit;
}
#monconteneur a:hover,
#monconteneur a:focus,
#monconteneur a:active {
	color: red;
	background: none;
	text-decoration: underline;
}

Bonne analyse de l'exemple.

PS: pour les images, un a img {border: none;} dans le code CSS devrait suffire, non?
Modifié par Florent V. (14 Mar 2008 - 12:45)

Hop hop hop ...

a.essai {              /* style du lien */
text-decoration:none;
color:#000000
}

a.essai:visited {     /* style du lien déjà visité */
text-decoration:none;
color:#000000
}

a.essai:active {      /* style du lien en visite */
text-decoration:none;
color:#000000
}

a.essai:hover {       /* style du lien en survol */
text-decoration:none;
color:#000000
}



<a href="ton lien" class="essai">
<img src="le lien de ton image" border="0" /> ton texte </a>

Une autre proposition ...

Merci c'est exactement ça.
Je n'ai pas testé la 2e solution, mais elle m'a l'air plus épurée, donc "mieux" , non? (je suis pas assez calé pour repérer immédiatement les pour et contre de chaque version)

Florent> un petit point m'échappe dans ton code :

#monconteneur a,

Je connais pas son utilité, (la virgule, le fait qu'il soit seul sans {}).

Bonjour,

Il ne s'agit pas de comprendre :

#monconteneur a,

Mais bien :

#monconteneur a, #monconteneur a:visited {

Le saut de ligne t'a simplement induit en erreur...

lodemars a écrit :

Florent> un petit point m'échappe dans ton code :

#monconteneur a,

Je connais pas son utilité, (la virgule, le fait qu'il soit seul sans {}).

La virgule signifie "et". Donc au lieu d'écrire ceci:

élément1 {color:green}
élément2 {color:green}

On pourra écrire plus de manière plus succincte:

élément1, élément2 {color:green}

lodemars a écrit :
Je n'ai pas testé la 2e solution, mais elle m'a l'air plus épurée, donc "mieux" , non? (je suis pas assez calé pour repérer immédiatement les pour et contre de chaque version)

Aucune des deux solutions n'est à reprendre telle quelle. Dans les deux cas il s'agit d'exemples à décortiquer et à comprendre, afin d'être en mesure d'écrire exactement le code dont on a besoin... et pas de faire un copier-coller d'un code qu'on comprend mal.

Ok, pour la virgule.

Florent V. a écrit :

Aucune des deux solutions n'est à reprendre telle quelle. Dans les deux cas il s'agit d'exemples à décortiquer et à comprendre, afin d'être en mesure d'écrire exactement le code dont on a besoin... et pas de faire un copier-coller d'un code qu'on comprend mal.

Certes, certes. J'ai bien décortiqué les deux exemples à l'aune de mon cas de figure. Et une fois adaptés, ils répondent tout deux à mes attentes. Ma question portait simplement sur les "conséquences" respectifs de ces deux solutions par la suite. Laquelle n'est pas encore écrite voire même imaginée. C'est en cela que je mettais en avant mon niveau de nioub, ne me permettant pas d'anticiper le futur ('tain limite elle fait peur cette phrase).
En tout cas, je ne cesse d'apprendre et de progresser à votre contact. Maintenant je touche ma bille en positionnement. L'autre jour j'ai réussi à faire un "trois colonnes" sans venir demander et sans plonger mon nez dans le bouquin. J'me la pète.

Je reprends ce fil car j'ai encore une question au sujet de la syntaxe.
J'utilise un div pour formater une image, au niveau de ses marges.

.image
{ margin :0px;
 }

 <div id="colonne1">
  <div class="image"><img src="Images/image1.jpg" /></div>
 <div class="image"><img src="Images/image2.jpg" /></div>
  </div>
  

Mais je me demande s'il n'existe pas un moyen plus "évident" dans ce style :

img { margin :0px;
 }

(Depuis aujourd'hui, j'ai une pop up "dearest in Christ" qui s'affiche dès que j'entre dans le forum d'Alsacreation.....)

Yep ....



Mais tu as complètement raison ....
C'est bien

img { margin :0px;}

Et c'est valable pour toutes les autres balises ...

PS : pas de popup apparentes pour moi ... (firefox & osx)
Modifié par Velbain (17 Mar 2008 - 16:56)

Le problème, c'est que ça ne marche pas avec

img { margin :0px;}

PS : plus de pop up bizarre

Oups ...




Zut j'me suis gourré ...

C'est :

img {border:none;}

Sorry ...

Non, non, c'est bien les marges de l'image que je cherche à éradiquer sous IE. J'y arrive très bien avec le code que j'ai posté en préambule. Par contre dans la version simplifiée

img {margin : 0px;}

ca ne marche pas.


Pourtant quand j'essaye ceci

img {margin : 100px;}

c'est bien pris en compte.

Wop ....



J'ai testé les 2 codes sur IE6 Windows et ça marche pour les 2 ...

Zero pixel :
http://jeanluc.bainvel.club.fr/essai/zero.php

None :
http://jeanluc.bainvel.club.fr/essai/none.php

ça risque de durer longtemps, votre histoire

.image { margin :0px;
 }

marche parce que ce sont pas les marges des images mais du div conteneur que tu as manifestement besoin d'annuler.

Evidemment, pour modifie les marges de ce conteneur,

img { margin :0px;
 }

ne risque pas de marcher.

Par contre,

img { margin :100px;
 }

... "marche", puisqu'il s'agit cette fois de tout autre chose que les marges de ces div: ajouter une marge aux images qui n'en avaient pas

On peut résumer ça autrement: ga zo bu meu
Modifié par Laurent Denis (17 Mar 2008 - 20:46)

Laurent Denis a écrit :
On peut résumer ça autrement: ga zo bu meu

En essayant continuellement on finit par réussir. Donc: plus ça rate, plus on a de chances que ça marche.

a écrit :

Les mathématiques, cela les intéressait, bien sûr, mais brûler le professeur, c'était intéressant aussi, faut dire. Il fut décidé à l'unanimité qu'on le laisserait parler et qu'on le brûlerait après, à la récréation.
« Répétez avec moi, disait-il, GA BU ZO MEU... GA BU ZO MEU...

Laurent Denis a écrit :
ça risque de durer longtemps, votre histoire

.image { margin :0px;
 }

marche parce que ce sont pas les marges des images mais du div conteneur que tu as manifestement besoin d'annuler.

Evidemment, pour modifie les marges de ce conteneur,

img { margin :0px;
 }

ne risque pas de marcher.

Par contre,

img { margin :100px;
 }

... "marche", puisqu'il s'agit cette fois de tout autre chose que les marges de ces div: ajouter une marge aux images qui n'en avaient pas

On peut résumer ça autrement: ga zo bu meu

Non mais cette histoire que tu nous contes, je l'avais déjà lue et testée Je ne dis pas autre chose.
Ma question est juste de savoir pourquoi ai-je besoin de placer mes images dans un conteneur (dont j'annule les marges) pour que celles ci n'apparaissent plus sous IE. Parce que sans conteneur mes 3 images placées dans le flux ce voient affubler de ces marges.
En clair, j'ai un conteneur avec trois images à l'intérieur

<div id="conteneur">
<img src....>
<img src....>
<img src....>
</div>

En fait à force de chercher, j'ai trouvé le point qui fache. Les marges entre images apparaissent donc avec le code ci-dessus.

Par contre il suffit de ceci :

<div id="conteneur">
<div><img src....></div>
<div><img src....></div>
<div><img src....></div>
</div>

Sans qu'il soit nécessaire de "formater" les div parent des images.

Comment l'interpréter? Les images doivent toujours être placées dans un conteneur?