28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème de priorité de balise

Sérieux... Le CSS c'est bien, mais il faut avoir un QI de 260 pour comprendre toutes les interactions entre les styles...

Aujourd'hui, j'ai fait une modif sur un de mes styles et ça m'a pourri tout le reste autour. Si qqun pouvait m'aider, ce serait sympa.

Voilà le squelette HTML:
<div class="section">
  <div class="header">
    <h1>Titre</h1>
  </div>
  <div class="content">
    <div class="news">
      <a href="http://www.foolstep.com" title="test">
        <img src="./image/de/la/news.jpg" alt="http://www.foolstep.com" />
      </a>
      <h1>
        <a href="http://www.foolstep.com" title="test">test</a>
      </h1>
      <p>
        contenu de la news
      </p>
      <hr class="spacer" />
    </div>
  </div>
</div>


Et au niveau du CSS, j'ai deux fichiers qui sont chargé. D'abord common.css:
/* Content common styles. */
div.content {
	border: 1px solid black;
	border-top: 1px dashed gray;
	background-color: white;
	padding: 10px;
	margin: 0;
}

/* Section content styles. */
div.section div.content h1 {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	padding: 5px 0px 2px 0px;
	margin: 0;
}

div.section div.content p {
	text-align: justify;
	padding: 0px 0px 5px 0px;
	margin: 0;
}


Et news.css:
div.news h1 {
	background-image: none;
	background-color: transparent;
	border-bottom: 0px;
	margin: 0px 0px 0px 127px;
	padding-left: 10px;
	text-align: left;
	font-size: 1.3em;
}

div.news p {
	margin: 0px 0px 0px 100px;
	padding: 5px 5px 5px 36px;
	border: 1px solid black;
	background: url("../images/zebra_gradient.png") repeat-y;
	text-align: justify;
}


Mais le h1 et le p dans les classes news prennent uniquement les styles de la classe content... Et là... je comprend pas pourquoi... Si vous voulez voir l'effet en live, rdv sur http://www.foolstep.com
J'ai archivé en pensant pas que ça pouvait toucher la mise en page à ce point là... Je continue de chercher, mais si vous avez une piste ou des questions, n'hésitez pas, moi je patauge là...

PS: Bonsoir a tous
Modifié par Creak (13 May 2007 - 22:56)
Modérateur
Bonsoir Creak,

Peux-tu éditer ton titre pour mettre quelquechose de plus explicite comme expliqué dans les règles (n°11)? Merci d'avance. Smiley cligne
Creak a écrit :
Sérieux... Le CSS c'est bien, mais il faut avoir un QI de 260 pour comprendre toutes les interactions entre les styles...

Non non, il suffit de lire l'article qui va bien et d'apprendre à compter sur ses doigts. Ça devrait pouvoir se faire avec un QI inférieur à 260. Smiley cligne
T'inquiete, les sujets de bases je les ai tous lu... Apparemment je dois me rendre à l'évidence, je suis totalement con...
Modifié par Creak (13 May 2007 - 21:31)
Je retire ce que j'ai dit... Enfin je suis pe toujours aussi con, mais cet article là, je l'avais pas lu... le problème viendrait donc d'un problème de priorité:

"div.section div.content h1" vaut 0003
"div.news p" vaut 0002

C'est donc 0003 qui l'emporte. Je comprend bien plus de truc maintenant.
Par contre, je vais avoir besoin de vous pour m'expliquer "la bonne façon de faire" parce qu'apparemment je m'y prend mal. Dans ma logique, je devrais donc créer un style "div.section div.content div.news p". D'une part, c'est très long et en fouillant les sites bien codé, j'ai rarement ce genre de styles. D'autre part, j'utilise les styles à d'autres endroit, mais pas forcément dans des balises de classe "section". Faudrait donc que je duplique ce style pour chacun des endroits où je les utilise... c'est pas très propre à mon goût tout ça...

Mon problème à l'air de venir du fait que je pense en terme de balises imbriquées et, dans les faits, ça ne fonctionne pas comme ça. Est-ce que qqun pourrait me dire ce qui cloche dans la logique et comment il faut plutôt voir tout ça?

Merci
Modifié par Creak (13 May 2007 - 21:49)
Je ne suis pas trop sûr d'avoir bien bien tout compris, mais en tout cas, pour éviter ces ciblages à rallonge, tu as plusieurs solutions:
• virer ces "div.section" au profit de ".section" tout seul
• penser à appliquer des classes aux éléments qui devront bénéficier des mêmes styles
• si tu n'utilises pas de classes, regrouper les différents éléments qui ont les mêmes propriétés par des virugles:
.section p,
.autreSection p,
.dernièreSection p
{
color:red;
etc.
}




edit: il existe naturellement la solution standard du !important permettant d'être toujours prioritaire, mais Internet Explorer 6 ne la supporte pas.
Modifié par Benjamin D.C. (13 May 2007 - 22:25)
Bonsoir,

Benjamin D.C. a écrit :

edit: il existe naturellement la solution standard du !important permettant d'être toujours prioritaire, mais Internet Explorer 6 ne la supporte pas.


Peut-on mettre fin à cette légende ? Comme expliqué souvent ici, IE implémente parfaitement !important dans son usage normal.

Son défaut d'implémentation porte sur la répétition de la même propriété dans le même bloc avec et sans !important, répétition qui n'a aucun usage ni aucun sens sauf si l'on souhaite volontairement l'utiliser comme hack...
Modifié par Laurent Denis (13 May 2007 - 22:33)
Laurent Denis a écrit :
Peut-on mettre fin à cette légende ? Comme expliqué souvent ici, IE implémente parfaitement !important dans son usage normal.

Son défaut d'implémentation porte sur la répétition de la même propriété dans le même bloc avec et sans !important, répétition qui n'a aucun usage ni aucun sens sauf si l'on souhaite volontairement l'utiliser comme hack...
Je ne comprends pas bien ce que tu veux dire, je suis (presque) certain qu'ie6 ignore la règle, je me trompe complètement?! Smiley sweatdrop
Merci!

J'ai simplifier mes styles en ne faisant plus dépendre l'un de "div.content" et l'autre de "div.content div.news".
Maintenant, j'ai la classe "div.content" qui ne fait que s'occuper du layout et "div.news" fait sa petite affaire avec ses p et ses h1, tandis que "div.book" se charge d'un affichage de texte plus standard. Et, au passage, ça réduit grandement la taille de mes noms de styles.

Décidément, il ne faut jamais considérer quelque chose comme acquise!

Par contre, je comprend toujours pas pourquoi la gestion des priorités ne réagit pas selon une logique de hiérarchie. Par exemple, avec trois "div" imbriqués, le troisième div prendra le style de ses deux antécédents + le sien (peu importe le nombre de classes ou d'identifiants)... Il suffirait alors de désactiver les styles indésirables dans le dernier div. J'ai l'impression qu'il y a un peu de ça dans le CSS, mais comme on peut le voir dans mon problème, leur système est limité. Vous me suivez?

Au passage, pour le webmaster, la taille du champ de texte "Sujet" est plus longue d'un charactère par rapport à la colonne dans la base de donnée (j'ai rentré un phrase qui rentrait pile et une fois envoyé, il manquait la dernière lettre).
Modifié par Creak (13 May 2007 - 22:58)
Bonjour Creak,

Il est difficile de répondre précisément à ta question puisque nous ne savons pas quel est le résultat que tu souhaites obtenir.

Le principe :

- définir des styles généraux
- définir et/ou redéfinir certaines propriétés pour des éléments particuliers

Les styles de p et de h1 de la section news vont hériter des propriétés définies en amont, sauf si tu redéfinis ces propriétés (à l'aide de la class news, par exemple)

Et je t'invite également à faire connaissance avec les ID :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id


Si je devais "corriger" ton code, je te proposerai ce qui suit.
Je pars du principe que section et content sont uniques sur ta page, mais que news peut se retrouver plusieurs fois.


<div id="section">
   <h1>Titre</h1>
   <div id="content">
    <div class="news">
      <a href="http://www.foolstep.com" title="test">
        <img src="./image/de/la/news.jpg" alt="http://www.foolstep.com" />
      </a>
      <h1><a href="http://www.foolstep.com" title="test">test</a></h1>

      <p>contenu de la news</p>

      <hr class="spacer" />

    </div>

  </div>

</div>





/* Content common styles. */

#content {

	border: 1px solid black;

	border-top: 1px dashed gray;

	background-color: white;

	padding: 10px;

	margin: 0;

}



/* Section content styles. */

#section h1 {

	font-size: 14px;

	font-weight: bold;

	text-decoration: underline;

	padding: 5px 0px 2px 0px;

	margin: 0;

}



#section p {

	text-align: justify;

	padding: 0px 0px 5px 0px;

	margin: 0;

}





div.news h1 {

	border-bottom: 0px;
	margin: 0px 0px 0px 127px;
	padding-left: 10px;
	text-align: left;
	font-size: 1.3em;

}



div.news p {

	margin: 0px 0px 0px 100px;
	padding: 5px 5px 5px 36px;
	border: 1px solid black;
	background: url("../images/zebra_gradient.png") repeat-y;
}



Ceci n'est peut-être pas ce que tu souhaites obtenir, mais c'est pour essayer de te mettre sur la bonne voie, en complément de ce qui a déjà été dit.

Question posée sur le forum qui pourrait t'aider :
http://forum.alsacreations.com/topic.php?fid=1&tid=16106&s=css
Salut,

Creak a écrit :
Sérieux... Le CSS c'est bien, mais il faut avoir un QI de 260


Non pas du tout, ce n'est pas un problème de capacité intellectuelle mais juste d'état d'esprit psychologique. Si tu es assez tordu alors ça le fait très bien. Et si ça ne le fait pas alors tu as au moins la consolation de te dire que toi au moins tu n'es pas tordu.

Exemple, si tu trouves qu'avec :

<div id="conteneur">
<p id="tel_p">
Bla bla bla
</p>
</div>


et

#conteneur p {
color:red;
}

#tel_p {
color:blue;
}


le texte de #tel_p est de manière évidente en rouge, alors tu es prêt pour les css, mais foutu pour la science.


Benjamin D.C. a écrit :

• virer ces "div.section" au profit de ".section" tout seul


bof, ça reste à prouver je trouve, dans document un peu touffu ça peut être très utile de savoir à quelle balise un id ou une class sont attribués. Donc en dehors du cas où une class est censée être attribuée à plusieurs éléments différents c'est un confort à ne pas négliger je trouve.
Modifié par Christian Le Bouler (13 May 2007 - 23:46)
Christian Le Bouler a écrit :
bof, ça reste à prouver je trouve, dans document un peu touffu ça peut être très utile de savoir à quelle balise un id ou une class sont attribués. Donc en dehors du cas où une class est censée être attribuée à plusieurs éléments différents c'est un confort à ne pas négliger je trouve.
Oui oui biensûr, je voulais juste souligner que ce n'est pas une obligation. Smiley cligne
Christian Le Bouler a écrit :
dans document un peu touffu ça peut être très utile de savoir à quelle balise un id ou une class sont attribués. Donc en dehors du cas où une class est censée être attribuée à plusieurs éléments différents c'est un confort à ne pas négliger je trouve.

+1

Pour ma part, j'indique généralement le nom de l'élément en plus du nom de la classe ou de l'identifiant. Il arrive parfois que ça me joue des tours (lorsque je change d'élément, par exemple pour passer de div à ul ou p à div), mais c'est rare, et ça me permet d'avoir une feuille de style plus lisible.
Creak a écrit :
"div.section div.content h1" vaut 0003
"div.news p" vaut 0002

Non :
div.section div.content h1 vaut 0023 (zéro identifiant, deux classes, trois noms d'éléments)
div.news p vaut 0012 (zéro identifiant, une classe, deux noms d'éléments)
Sujet clos
Aller à