Style sur les liens, y'a un truc que je ne comprends pas ...

Bonjour,

J'ai un pb de style sur lien et je commence a m'arracher les cheveux tellement je comprends pas.
J'ai fais une recherche sur le sujet dans ce forum ... mais je n'ai pas trouvé de réponse complète.

Voila, j'ai une page web qui comprend des <div>

Dans le div "gauche" j'ai un style generique pour les liens :

#gauche { 
      	padding-right : 10 px;
	padding-left : 10 px;
 	margin: 5px;    
 	border-top: NONE #FFCC00;
 	border-right: solid #FFCC00;
 	border-bottom: none #FFCC00;
 	border-left: solid #FFCC00;  
	 border-width: 0px;
 }

#gauche a, a:link, a:visited, a:active {
text-decoration:none; 
color:#6633CC; 
font-size: 11px;
font-family: Verdana, Arial, Helvetica;}
#gauche a:hover {color: #e26a09; font-weight: bold; text-decoration: underline;}

Seulement voila, dans mon "div gauche", il y a inclu un autre "div" qui contient un titre.
Ce titre est un lien, pour lequel je specifie un style à part.

.post-title {
	color : #fc5a21;
	margin : 0;
	padding : 0;	
	border-bottom: #fc5a21 1px solid;
	height: 30px;
	overflow: hidden;
	line-height: 30px;
	font-weight: bold;
	font-size: 16px; 
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica;	
	text-decoration:none; 
	color:#fc5a21; 
}



.post-title A:visited {
text-decoration:none; 
color: #fc5a21; 
font-size: 16px; 
font-weight: bold;
font-family: Verdana, Arial, Helvetica;
}

.post-title A:active {
text-decoration:none; 
color:#fc5a21; 
font-size: 16px; 
font-weight: bold;
font-family: Verdana, Arial, Helvetica;
 }

.post-title A:hover  {
color: #e26a09; 
text-decoration: underline;
font-family: Verdana, Arial, Helvetica;
font-size: 16px; 
font-weight: bold;
}

Voici pour info une partie du code "html/php" de ma page :

<div id="gauche">
<div class="post"> 
           <div  class="post-title"><a href="" >titre</a></div>	

Bref j'ai beau retourner le css, le code de la page dans tous les sens (mettre le style sur le lien, mettre le style dans un <p> .....) le resultat est toujours le même, mon lien il s'affiche toujours avec le style "gauche". (bien sur si je ne mets pas de lien ca fonctionne).

La j'avoue que je suis perdue, doit y avoir un truc qui m'echappe mais je ne vois pas quoi ... donc si vous avez une piste ou la solution je suis preneuse (je suis a 2 doigts de secouer mon ecran tellement ça m'ennerve !!!).

Merci d'avance

Bidi

Bonjour,

C'est un comportement normal de cascade de styles. De plus, ton ciblage est inexact puisqu'il pointe actuellement vers un div et non vers ton lien. Modifie ton ciblage de .post-title en div#gauche div.post div.post-title a

Un peu de lecture:
Cascade CSS et priorité des sélecteurs

Cordialement,
Benjamin

Merci pour la reponse .

Benjamin D.C. a écrit :

De plus, ton ciblage est inexact puisqu'il pointe actuellement vers un div et non vers ton lien. Modifie ton ciblage de .post-title en div#gauche div.post div.post-title a

Mais la j'ai pas tout compris ..... (suis pas douée parfois !)

Bidi

Le sélecteur

#gauche a

a une priorité de 0101, tandis que le sélecteur

.post-title A

a une priorité de 0011. Cf. le lien donné par Benjamin, qui inclus un passage sur le calcul des rangs de priorité pour les sélecteurs.

Le plus simple serait, pour les liens du titre, de renforcer la priorité du sélecteur, par exemple en utilisant le sélecteur suivant :

#gauche .post-title a

(prorité : 0111).

Au passage, est-ce qu'un « post-title » ne serait pas un titre de section, par hasard ? Dans ce cas, utiliser un titre de section hN ne serait pas du luxe.

Hé bien, pour faire court, tu dis ceci dans ton premier post:

.post-title {

	color : #fc5a21;

	margin : 0;

	padding : 0;	

	border-bottom: #fc5a21 1px solid;

	height: 30px;

	overflow: hidden;

	line-height: 30px;

	font-weight: bold;

	font-size: 16px; 

	font-weight: bold;

	font-family: Verdana, Arial, Helvetica;	

	text-decoration:none; 

	color:#fc5a21; 

}

Hors la classe que tu as nommée post-title est appliquée sur un div, et non sur un lien!

<div  class="post-title"><a href="" >titre</a></div>

Sans rentrer dans les détails, de deux choses l'une:

- soit tu appliques ta classe directement au lien, ce qui donnerait quelque chose comme ceci:

<a href="" class=""post-title>titre</a>

- soit tu modifies ton ciblage dans le css en précisant que tu vises le lien qui se trouve dans le div "post-title":

.post-title [b]a[/b] {

	color : #fc5a21;

	margin : 0;

	padding : 0;	

	border-bottom: #fc5a21 1px solid;

	height: 30px;

	overflow: hidden;

	line-height: 30px;

	font-weight: bold;

	font-size: 16px; 

	font-weight: bold;

	font-family: Verdana, Arial, Helvetica;	

	text-decoration:none; 

	color:#fc5a21; 

}

Ceci dit, tu vas souvent t'y perde avec de telles imbrications! Essaye de rester simple et conscis, il est pratiquement toujours possible de se passer d'autant de divs!

Cordialement,
Benjamin