28172 sujets

CSS et mise en forme, CSS3

[Résolu]Comment différencier les liens dans une même balise?

Bonjour à tous,

J'ai un problème de liens... Mon son site est fabriqué sur un même schéma pour toutes les pages avec les mêmes balises avec leurs propriétés. Seules les classes varient en fonction des pages. Pas de tableaux, que des balises div + css.

Le problème est que je ne peux pas changer les caractéristiques des liens dans une partie sans modifier tous les autres liens présents dans la balise et dans les autres pages alors que je voudrais par moment pouvoir différencier le style des liens (polices, couleurs...). Toutes mes pages sont reliés sur ce schéma. Est-il possible de changer le style d'un lien sur une page en particulier?

La balise qui m'intéresse est nommée #menu_gauche

#menu_gauche a:visited {
color: #669999;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;

}

#menu_gauche a:link {

font-family: Geneva, Arial, Helvetica, sans-serif;

color: #669999;

}

#menu_gauche a:hover {

color: #993300;

}

#menu_gauche a:active {

color: #993300;

font-family: Geneva, Arial, Helvetica, sans-serif;


Exemple d'un lien que je voudrais faire varier (autre police, couleurs) :

<a href="homestaging_studio.html">// REALISATIONS</a>


Quel serait le code? faut-il créer une classe particulière? une nouvelle feuille css?

Je suis perdue et m'embrouille complètement... Ce serait génial si vous pouviez m'aider car je perds un temps fou à essayer de trouver sans savoir si c'est possible!

Un grand merci par avance,
Modifié par crevetto (13 Aug 2009 - 21:18)
crevetto a écrit :
Le problème est que je ne peux pas changer les caractéristiques des liens dans une partie sans modifier tous les autres liens présents dans la balise et dans les autres pages

Si ton code HTML actuel ne te permet pas d'écrire un sélecteur CSS suffisamment précis pour viser certains éléments et pas d'autres, les solutions (génériques) consistent à:
- soit ajouter une classe ou un identifiant sur l'élément visé;
- soit ajouter une classe ou un identifiant sur l'élément parent (ou à un niveau encore supérieur) de celui ou ceux qui sont visés.
a écrit :
Si ton code HTML actuel ne te permet pas d'écrire un sélecteur CSS suffisamment précis pour viser certains éléments et pas d'autres, les solutions (génériques) consistent à:
- soit ajouter une classe ou un identifiant sur l'élément visé;
- soit ajouter une classe ou un identifiant sur l'élément parent (ou à un niveau encore supérieur) de celui ou ceux qui sont visés.


Entièrement d'accord, néanmoins, si tu décides de rajouter des classes ou des identifiants à ton code, fais attention de ne pas en mettre de manière abondante Smiley cligne .
Oui mais comment ajouter une classe ou un identifiant pour que l'élément visé soit en plus un lien ????
Sous quelle forme? Quel serait le nom de la classe et le code? J'imagine que ce n'est pas une classe classique puisque destinée à habiller un lien (a, a:hover...)

Je ne suis pas une pro pourriez-vous m'expliquez plus précisément ce que je dois faire...?
Encore un grand merci de prendre le temps de comprendre mon prob et de me répondre! Smiley smile
a écrit :
Oui mais comment ajouter une classe ou un identifiant pour que l'élément visé soit en plus un lien ????
Sous quelle forme? Quel serait le nom de la classe et le code?


Eh bien, pour ajouter un id à un lien, il faut procéder comme ceci :

<a id="nom_de_lid" href="Chemin_de_la_cible_du_lien" title="titre">Lien</a>


A savoir qu'un ID doit être unique dans une page XHTML.
Pour plus d'informations sur ce sujet, lire cet article plus précisément la partie s'intitulant Classe vs ID.

Idem pour un classe :


<a class="nom_de_la_classe" href="Chemin_de_la_cible_du_lien" title="titre">Lien</a>


A savoir qu'une classe peut avoir plusieurs fois le même nom dans une page XHTML.

a écrit :
J'imagine que ce n'est pas une classe classique puisque destinée à habiller un lien (a, a:hover...)


Qu'entends-tu par classe classique et pourquoi ça ne serait pas une classe classique ?

a écrit :
Encore un grand merci de prendre le temps de comprendre mon prob et de me répondre! Smiley smile


De rien Smiley cligne .
Modifié par jQz (13 Aug 2009 - 19:20)
Désolée mais ça ne fonctionne pas... Le lien ne change pas d'un poil des caractéristiques de base!!!!

Voici pour les plus persévérants les parties du code et de la feuille de style concernées : 


<div id="menu_gauche">
	
 <a class="style_liens" href="homestaging_studio.html">// REALISATIONS</a>
   
   
  </div>




#menu_gauche a:visited 
{      color: #669999;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

#menu_gauche a:link 
{      font-family: Geneva, Arial, Helvetica, sans-serif;
        color: #669999;
}


#menu_gauche a:hover 
{      color: #993300;

}

#menu_gauche a:active 
{      color: #993300;
        font-family: Geneva, Arial, Helvetica, sans-serif;

}

.style_liens (c'est la classe créée pour différencier les liens)
{      font-family: ISOCTEUR;
	color: #0000CC;
}


Désolée d'insister mais je ne comprends pas. c'est sûrement moi car pour vous cela parait si simple...!
Merci encore et toujours
Sujet clos
Aller à