J'ai essayé de changer en une fois la taille des titres de tous les modules en faisant
.box h2 { text-align:center; font-size:200% ;color:#6666FF;background:transparent url(/modele/1/pics/fleche.png) no-repeat top right; }
Mais rien à faire, aucun résultat. Je suppose qu'il y a une information ailleurs qui contrarie cet ordre.
Si c'est aussi votre cas, changez la taille des titres un par un.
Explication et résolution du problème par Brendufat
Au départ, il y avait dans ton fichier deux règles précisant le font-size de h2 :
h2 { color: #5675A4; font-size: 13px;}
et
#main1 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:110%; } /* titre des articles */
Tu as ajouté :
.box h2 { font-size:120%;} au bon endroit et ça n'a rien donné.
La question est : sachant que ton ".box h2" est, évidemment, un "h2" banal mais aussi un "#main1 h2", quelle règle va s'appliquer ?
Tu te rappelles peut-être vaguement que j'ai parlé de "spécificité" dans mon papier ? en évoquant la notion de cas général et de cas particulier pour me faire comprendre ? Tout est là : le navigateur (TOUS, IE comme les autres), lorsqu'il analyse la partie gauche d'une règle (ce qu'on appelle le "sélecteur", qui indique à qui s'applique la règle) donne plus de poids (beaucoup plus) à un identifiant (commençant par un dièse) qu'à une classe (commençant par un point). Ce n'est pas idiot ni arbitraire : puisqu'un identifiant ne se rencontre qu'une fois dans une page, c'est un cas beaucoup plus particulier qu'une classe qui peut, elle, se rencontrer plusieurs fois.
Mais ici, ça fait que #main1 h2 pèse plus lourd que .box h2. et aussi lourd que #Liens h2. Je suis quasi-certain que si, en fin de CSS, tu rajoutes une règle #main1 h2 {font-size:140%} c'est celle-là qui emportera le morceau - et, en plus, pour tous les h2 de la page ! puisqu'il s'agit de #main1.
Plusieurs voies pour s'en sortir :
1 - la tienne : énumérer tous les #module h2. Avantage : le travail est fait pour l'avenir si tu as envie de manipuler indépendamment les titres des modules. Et puis ça marche !
2 - jouer la carte d'une spécificité plus forte, par exemple : #leftnav .box h2, #rightnav .box h2 {font-size:120%;}
Ca parle du "h2 qui est dans un .box qui est dans leftnav (ou rightnav)". et ça c'est plus étroit que le "h2 qui est dans main1".
#main1 .box h2 aurait aussi le même poids,mais si un jour tu changes de structure de blog il faudra penser à corriger. Et crois-moi, on n'y pense pas forcément ! Ma précédente proposition ménage davantage l'avenir.
3 - supprimer, dans la règle #main1 h2, la mention de font-size, et décomposer le problème en
#content h2 {des trucs}
#leftnav h2, rightnav h2 {d'autres trucs}.
C'est le plus satisfaisant pour l'esprit : puisque on veut des h2 de tailles différentes dans les diverses parties de #main1, pourquoi donc garder une règle commune ?
Pour couvrir complètement #main1, il faudrait compléter la décomposition avec :
#top h2{des machins]
#footer h2 {des bidules}
En pratique ça n'a pas beaucoup d'intérêt (qui irait fourrer des titres h2 dans le haut ou le pied de page ?) mais sait-on jamais ?
- il n'y a pas que les h2 dans la vie ! On peut vouloir utiliser des présentations différentes pour, par exemple, les liens ou les images.
Commentaires