[résolu] Incohérence d'écriture CSS

Bonjour

J'avais commencé par écrire mon CSS comme cela :

#hautgauche h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
#hautdroit h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
#milieugauche h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
#milieudroit h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
#basgauche h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
#basdroit h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}

Je me suis dit que comme c'est du code strictement identique, je pourrais regrouper tout ça en une seule fois :

#hautgauche,#hautdroit,#milieugauche,#milieudroit,#basgauche,#basdroit h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}

Et ben là ça ne marche pas...
Donc je ne comprends pas...
Donc je cherche... et tous les articles que je lis sur le sujet semblent donner pour juste ma 2e écriture...
Ai-je raté un épisode ?

Merci de toute aide !!

Modifié par Blue James (27 Jun 2007 - 10:29)

Bonjour,

Lorsque tu écris #hautgauche h1,h2,h3,h4,p ; tu cibles le titre h1 contenu dans le div hautgauche ainsi que tout les h2, h3, h4 et p. Est-ce cela que tu veux ?
Ou alors voudrais-tu cibler tous les titres de niveaux 1,2,3 et 4 contenu dans les différents div énoncés plus loin ?

#hautgauche,#hautdroit,#milieugauche,#milieudroit,#basgauche,#basdroit h1,h2,h3,h4,p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}

L'instruction suivante a pour effet de supprimer les marges et de forcer le style de font sur normal aux éléments suivants :
- #hautgauche
- #hautdroit
- #milieugauche
- #milieudroit
- #basgauche
- #basdroit h1
- h2
- h3
- h4
- p

En sachant que les éléments de type div n'ont par défaut pas de marges...

Hello,

Euh oué d'ailleurs, ça ne suffit pas ça ?

h1, h2, h3, h4, p {
	margin: 0;
	padding: 0;
	font-style: normal;
}

Pourquoi tu spécialises en amont ?
Modifié par koala64 (27 Jun 2007 - 09:52)

Je reconnais que je dois etre plus clair.

Voici le lien pour voir la maquette générale :

http://www.magix.fr/new/maquette.html

En fait j'inclus dans mon div centre, les 6 div avec fond de couleur que je positionne grace à float.

Jusque là tout allait bien.

Le problème est que j'ai déjà défini au niveau général et dans mon div centre des caratéristiques qui concernent les balses h1, h2, h3, h4, p, etc...

Donc mes 6 div avec fond de couleur héritent de ces caractérisques. Ce que je voulais faire, c'était les réinitialiser à "0" pour les redéfinir comme je veux...

En passant, mon H3 reste obstinément en italique meme si je mets :

font-style: normal;

Et il impossible de mettre un quelconque margin ou padding à l'élément h1...

je pateauge...
Modifié par Blue James (27 Jun 2007 - 10:18)

Bon...

Je me suis simplifié la vie en passant toutes mes balises en p et en leur appliquant une calsse respective...

Ca fonctionne..

Mais j'aurais bien voulu conserver la logique sémantique de mes balises avec une hiérarchie type h1, h2, etc..

Donc c'est à moitié résolu !
Modifié par Blue James (27 Jun 2007 - 10:17)

Blue James a écrit :
Mais j'aurais bien voulu conserver la logique sémantique de mes balises avec une hiérarchie type h1, h2, etc..

C'est tout à fait possible, mais dans ce cas-là tu dois définir les propriétés des différents titres contenus dans les div en question.

C'est ce que je t'expliquais plus haut : tes virgules sont mal placées et l'instruction ne correspond pas à ce que tu voudrais obtenir. Pour cibler le titre de niveau 1 du div #hautgauche, tu dois écrire #hautgauche h1 et pour le titre de niveau 2 du même div, tu dois écrire #hautgauche h2.


Ce qui te donnera par exemple :

#hautgauche h1, #hautgauche h2 {...}

Comprends-tu la différence ?
Les virgules séparent des groupes d'éléments. Il te faut à chaque fois récrire le conteneur pour cibler le titre voulu. Sinon, tu ne fais que modifier l'aspect général de tous les titres de niveau 1-2-3 et 4
Modifié par Cygnus (27 Jun 2007 - 10:26)

Quel abruti !!!! (Je parlais de moi bien sur !)
Of course !
...
Merci beaucoup !

Blue James a écrit :
Le problème est que j'ai déjà défini au niveau général et dans mon div centre des caratéristiques qui concernent les balses h1, h2, h3, h4, p, etc...

Donc mes 6 div avec fond de couleur héritent de ces caractérisques. Ce que je voulais faire, c'était les réinitialiser à "0" pour les redéfinir comme je veux...

Soit tu ne mets pas tes six div dans div#centre mais dans un div#centre-alternatif, soit tu crées un bloc div#six-blocs pour doubler ton div#centre et tu fais :

div#centre div#six-blocs h1,
div#centre div#six-blocs h2,
div#centre div#six-blocs h3,
div#centre div#six-blocs h4,
div#centre div#six-blocs p {
margin: 0;
padding: 0;
font-style: normal;
}

Par exemple.

Blue James a écrit :
En passant, mon H3 reste obstinément en italique
(...)
Et il impossible de mettre un quelconque margin ou padding à l'élément h1...

Probablement une question de priorité des sélecteurs.
http://openweb.eu.org/articles/cascade_css/