Mon h2 prend le dessus sur mon h2.titre !

Je voulais savoir si c'était normal, ou si il y avait un hack...
En gros j'ai des titres h2 différents que je récupere en mettant <h2 class="titre"> ou <h2 class="actualite">...
Je refait mon site, et le <h2 class="titre"> va devenir h3 et l'autre <h2>
Pendant la période de transition, j'aurais aimé specifier les deux balises dans mon style, comme cela :

h2.titre {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}
h2.actualite {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h3 {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}

Le probleme, c'est que mettre ça fait bugger mon site : j'ai une sorte de mélange des deux pour mes titres...
Comment faire pour résoudre le probleme ?
Merci d'avance

Je verrais plutot un selecteur du type titre h2{........ } plutot cela devrait fonctionner.

Dis moi quoi.

Merci à toi ça marche parfaitement !

arf ! j'ai parlé trop tot ! peut être que le fichier n'avait pas été chargé sur le serveur...
Bon ba ça marche pas :(
il prend mon <h2 class="titre"> pour le <h2> qui est différent !
Vous avez une solution ?

.titre h2 {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}
.actualite h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}h3 {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}

nan la première fois c'était bon, mais tu déclares d'abord le style titre sur tes h2 et ensuite le style général des h2, il faut faire le contraire (puisque le navigateur va prendre en compte le dernier style connu, il allait par exemple écraser les propriétés communes aux 2 styles, mais garder les autres propriétés). Voici comment il faut faire :

h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2.titre {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}
h2.actualite {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h3 {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}

Modifié le 02 Nov 2004 - 21:52

mon <h2 class="actualite"> est différent du <h2> ou du <h2 class="titre"> ! Donc ce que tu propose ne changera rien...

en fait pour résumer, mes deux classes h2 vont devenir :

class="actualite" >>>> h2
class="titre" >>>> h3

Mais en attendant, comment faire pour que les deux styles cohabitent ?

nan pas du tout, essayes de faire comme j'ai fait et tu verras ça marchera.
Je vais essayer de t'expliquer plus clairement.
Quand tu vas définir h2 {}, il va mettre les propriétés que tu as entré à TOUTES les balises h2 y compris tes balises <h2 class="titre">.
Si tu as déjà défini le style de ta balise <h2 class="titre"> et qu'ensuite tu définies le style pour les balises h2, c'est incohérent.
Et comme tu as défini le style global de h2 en dernier, la navigateur va l'exécuter en dernier.
Clairement, il va d'abord appliquer le style que tu as décidé pour <h2 class="titre"> et <h2 class="actualites"> puis ensuite de toutes les balises h2 dont les balises <h2 class="titre"> et <h2 class="actualites"> puique ce sont des balises h2.
Et donc si des propriétés comme font-size sont attribués dans chacun des styles, c'est celui en dernier qui va être appliqué en dernier.
Essayes de faire ce que je t'ai dit et tu verras ça marchera sûrement
Modifié le 02 Nov 2004 - 22:49

Je commence à croire que ce n'est pas possible finalement...
J'ai fait ce que tu as dit, voici le style :

h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2.titre {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}
h2.actualite {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2.actualite a{
font-size: 1em;
text-decoration:none;
}
h2.actualite a:hover{
color:#CE3008;
font-size: 1em;
}
h2.actu-articles {
float:left;
color: #CE3008;
font-style: italic;
font-weight: normal;
font-size: 2em;
}
h3 {
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}

Ba ça me fait bien un mélange des deux styles...

je crois enfin savoir ce que tu voulais faire. En fait tu veux donner un style à tous les h2 et un style spécifique (qui n'a rien du tout à voir avec h2) à h2.titre et à h2.actualite en fait, alors fais comme ça :

h2 {
height:35px;
font-size: 1.7em;
line-height: 2.1em;
background : url(objets/titre.gif)  top left no-repeat;
padding-left: 100px;
}
h2.titre {
height:0;
line-height:0;
background:none;
padding-left:0;
/* les valeurs ci-dessus se retrouvent dans h2 mais ils ne sont pas dans h2.titre, donc si tu veux qu'elles ne soient pas dans h2.titre il faut les annuler comme j'ai fait là */
float:left;
border-bottom: 1px dashed #084A6B;
font-weight: bold;
font-size: 12px;
}

En faisant comme ça, tu annules toutes les directives de h2 qui ne se retrouve pas dans h2.titre quand tu appliques la classe titre dans une balise h2 (il faut annuler chaque propriété indésirable comme dans mon exemple).