Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 10:59

Salut à tous,

Comment structurez vous le formatage de vos balises h1, h2, h3, p, etc... dans votre fichier css ?

J'ai plusieurs balises h1 sur mon site et je souhaiterai que la mise en forme de ces balises soient différentes les unes par rapport aux autres, idem pour les balises h2, h3 et p.

Si je formate mes balises de cette manière :

Code: Tout sélectionner
h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
h1.acceuil{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}


Code: Tout sélectionner
<h1>Salut c'est moi !</h1>
<h1 class="acceuil">Salut c'est encore moi !</h1>


Ma balise h1.accueil hérite d'une partie de la mise en forme de ma première balise h1 : le texte de ma balise h1 est bleu, le texte de ma balise h1.accueil est rouge mais le background de ma balise h1.accueil est gris (#C0C0C0) alors qu'il n'y a pas de background de précisé dans ma balise h1.accueil. Ma balise h1.accueil a donc hérité du background de ma balise h1 :(

Comment éviter cela ?
Haut
10 Réponses
Messages: 62

Enregistré le: 20 Aoû 2011

Message le Lun Juil 23, 2012 11:05

c'est normal, c'est l'effet "cascade" (tu devrais te renseigner sur les principes de base des CSS).
Appliquer un background à .accueil parait être la solution la plus simple. Tu peux aussi affecter une class au h1 qui n'en a pas. Ou encore encadrer ton h1 sans class dans un div avec une class et réécrire ta régle (ex: div.container h1 {...}).
En somme, ya plein de soluces pour éviter cela.
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 11:20

Merci pour ta réponse.

Je sais qu'il existe plein de solutions mais comme je suis entrain de relooker tout mon site, j'en profite pour mettre en place les formatages les moins contraignants possibles.

Sur le web on voit partout des exemples de formatages de balise h1 du style :

Code: Tout sélectionner
h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}


Comme si sur nos sites on avait une seule et unique mise en forme de h1, cette problématique de l'effet cascade des balises html est très peu abordé :(

Je souhaiterai ne pas attribuer de class aux balise h1, h2, p que j'utilise le plus sur mon site et qui sont sur la plupart de mes pages et encadrer mes h1 sans class dans une div avec une class (cette dernière méthode me parraissait du "bidouillage") c'est la raison pour laquelle j'ai posté ce post, je me suis dit qu'il devait y avoir une autre solution que je ne connaissais pas :D
Haut
Messages: 18372

Enregistré le: 5 Juin 2006

Message le Lun Juil 23, 2012 11:29

L'avantage de faire ainsi est de déterminer "une apparence de base" pour les balises, qu'on va ensuite modifier via la cascade pour n'importe quel autre type de présentation. L'avantage est que, si par hasard, tu mets à un endroit un h1 pour lequel tu n'as pas défini de sélecteur, tu ne te retrouves pas avec le style "par défaut" du navigateur.

Si tu veux que la présentation soit totalement différente, tu redéfinis l'ensemble des propriétés. Si tu le fais souvent... ton site a un problème de graphisme :D
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 11:43

Oui je vois bien ce que tu veux dire mais d'un point de vue pratique mon site a beaucoup de pages et je me posais la question sur comment formater le plus facilement possible les balises h1, h2, p qui sont présentes sur mes pages.

Je souhaitai ne pas attribuer de class aux balises h1, h2, p que j'utilise le plus, en d'autres termes c'est plus rapide et facile d'écrire sur la majorité de mes pages ce code :

Code: Tout sélectionner
<h1>Mon titre</h1>
<h2>Mon sous-titre n° 1</h2>
<p>Mon texte n° 1</p>
<p>Mon texte n° 2</p>
<p>Mon texte n° 3</p>
<h2>Mon sous-titre n° 2</h2>
<p>Mon texte n° 4</p>
<p>Mon texte n° 5</p>


Que si j'utilise une class "normal" pour séparer la mise en forme avec les autres balises h1, h2, p :

Code: Tout sélectionner
<h1 class="normal">Mon titre</h1>
<h2 class="normal">Mon sous-titre n° 1</h2>
<p class="normal">Mon texte n° 1</p>
<p class="normal">Mon texte n° 2</p>
<p class="normal">Mon texte n° 3</p>
<h2 class="normal">Mon sous-titre n° 2</h2>
<p class="normal">Mon texte n° 4</p>
<p class="normal">Mon texte n° 5</p>


Comment struturez-vous le formatage des balises h1, h2, p que vous utilisez le plus sur vos sites : avec une class, sans class, dans une div ?
Haut
Messages: 18372

Enregistré le: 5 Juin 2006

Message le Lun Juil 23, 2012 11:52

Eh bien pour les balises "de base" avec le formatage courant tu fais dans ton css

h1 {blabla}

et ensuite soit tu fais
Code: Tout sélectionner
<div class="normal"><h1>balbla</h1>
<p>blabl</p>


avec en css div.normal h1 {bablba} et div.normal p {blabla}

soit si c'est plus précis, tu fais comme tu as dit
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 13:36

Ca marche pas ta solution, essaie :

Code: Tout sélectionner
h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
div.acceuil h1{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}


puis :

Code: Tout sélectionner
<h1>Salut c'est moi !</h1>
<div class="acceuil"><h1>Salut c'est encore moi !</h1></div>


Le deuxième h1 du div.accueil a un fond gris :(
Haut
Messages: 18372

Enregistré le: 5 Juin 2006

Message le Lun Juil 23, 2012 13:48

Ben oui banane si tu ne veux pas de fonds gris, mais bleu, il faut que tu redéfinisse le background dans le div.accueil h1, ce que tu n'as pas fait
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 14:46

banane, banane, 8O :? 8) :lol: Ben non... ce que je souhaite faire c'est ne pas hériter du formatage du premier h1, je ne veux donc pas d'abord "effacer-gommer" le formatage du premier h1 puis reformarter mon 2ième h1 : je veux que les h1 soient indépendants des uns des autres dans leur mise en forme, qu'ils n'héritent pas du formatage des autres !

Voici donc une solution qui marche (que je donne pour toutes les bananes comme moua :wink: ) :

Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<style type="text/css">
#monBloc{
width:580px;
}
div#monBloc h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
div#monBloc h2{
background-color:#00FF80;
padding:10px;
width:380px;
margin-left:150px;
border:2px solid #FF0000;
color:red;
}
div#monBloc p{
color:black;
margin-left:50px;
}

#monAutreBloc{
width:380px;
}
div#monAutreBloc h1{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}
div#monAutreBloc h2{
background-color:aqua;
padding:10px;
width:480px;
margin-left:250px;
border:2px solid #FF0000;
color:blue;
}
div#monAutreBloc p{
color:red;
margin-left:150px;
}
</style>
</head>
<body>

<div id="monBloc">
<h1>Mon premier titre</h1>
<h2>Mon premier sous-titre</h2>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>

<div id="monAutreBloc">
<h1>Mon deuxième titre</h1>
<h2>Mon premier sous-titre</h2>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>

</body>
</html>


La solution était donc d'utiliser le bloc parents du <h1> pour déterminer son style.

Avec cette méthode il n'y a donc pas besoin de mettre de <div class="ma_class"><h1>mon titre</h1></div> dans le code html pour formater le h1, un simple <h1>mon titre</h1> suffit pour formater le h1 qui est localisé dans l'id de la div parent.
Haut
Messages: 62

Enregistré le: 20 Aoû 2011

Message le Lun Juil 23, 2012 14:50

si tu redéfinis le background de H1 c'est normal que cette propriété soit "cascadée" sur le h1 de div.accueil car comme tu l'a écris, le background va s'appliquer à TOUTES les balises h1, qu'elles soient dans une div, ou pas. Comme le dis marie-aude, dans ton cas et pour cet exemple, tu dois redéfinir l'attribut background de tous tes h1.

Je me répéte, mais tu devrais vraiment chercher à mieux comprendre le principe de cascade des CSS, ton problème est là.
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juil 23, 2012 15:03

Le fait d'utiliser le bloc parents du <h1> (comme expliqué ci-dessus) pour déterminer son style permet d'annuler la problématique de l'héritage du formatage des h1, h2, p etc... chaque h1 est formaté en fonction de son bloc parent.
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.