Pour répondre à Izumichan, qui me demande en substance ce que j'ai fumé pour parler tout le temps de lignes qui n'existent pas dans le CSS (mais très poliment, hein), je me suis dit qu'une petie précision ne serait pas inutile sur le pourquoi du comment de ces éléments qui n'existent pas dans le CSS et qu'on vous dit fort cavalièrement de rajouter, comme ça, paf !
Ok, ça paraît du chinois, mais en fait c'est simple : imaginons qu'on soit Dieu et qu'on décide que l'espèce des chiens doit avoir 4 pattes ... Bon, du coup, tous les chiens, des caniches aux labradors, auront 4 pattes, une fois qu'on l'a dit pour les chiens, plus la peine de le préciser pour une race de chiens en particulier : l'espèce "chien" est l'élément parent.
Par contre, en tant que Dieu, on peut aussi décider que les caniches seront petits et frisés et les labradores grands et blonds (si je me gourre, que les amis des chiens me pardonnent, je m'y connais qu'en chatounes, moi...).
Attention, pour bien comprendre l'aspect de tel ou tel de vos éléments, il faut savoir aussi que ce système fonctionne comme des poupées russes : un élément parent va lui-même hériter du style de son propre parent (si rien n'est re-spécifié) ; ainsi, les modules définis par .box dérivent des colonnes #leftnav ou #rightnav (selon qu'il sont dans la colonne de gauche ou de droite). Finalement, tout dérive du "grand parent" body : si dans cette ligne, on définit une couleur de texte noire, par exemple, et que par la suite, on ne re-précise plus de valeur pour "color", ce sera écrit en noir dans toutes les parties du blog. Certaines parties dérivent directement de body, d'autres sont ses arrières-petites filles et ont hérité de tout un tas de modifications entre temps.
Cette façon de décrire le style de chaque élément en "poupée russes", qui a l'énorme avantage d'éviter de respécifier tout le temps ce qui reste pareil et met en valeur ce qui change par rapport à l'élément parent, a donné son nom au CSS : Cascading Style Sheet ou Feuilles de style en cascade.
* Attention, précision : tous les attributs qu'on ne spécifie pas n'héritent pas nécessairement de la valeur de l'attribut de l'élément parent, certains ont des valeurs par défaut au cas où rien n'est écrit, le background, par exemple ... Pour savoir si une propriété a une valeur par défaut ou une valeur héritée, je vous conseille d'aller sur ce site extrèmement utile : vous cliquez sur la propriété qui préoccupe et vous regardez sur la page qui s'affiche, en haut, à la ligne :
Oui, pourquoi ??? 
Dans le CSS par défaut, quand certaines fonctions ne sont pas explicitées, elles peuvent avoir les paramètres de couleurs, police, etc... d'un élément plus général : on dit qu'elles héritent du style de l'élément parent. *Ok, ça paraît du chinois, mais en fait c'est simple : imaginons qu'on soit Dieu et qu'on décide que l'espèce des chiens doit avoir 4 pattes ... Bon, du coup, tous les chiens, des caniches aux labradors, auront 4 pattes, une fois qu'on l'a dit pour les chiens, plus la peine de le préciser pour une race de chiens en particulier : l'espèce "chien" est l'élément parent.
Par contre, en tant que Dieu, on peut aussi décider que les caniches seront petits et frisés et les labradores grands et blonds (si je me gourre, que les amis des chiens me pardonnent, je m'y connais qu'en chatounes, moi...).
Exemple pour la ligne #RightPart { } (la question d'Izumichan) :
Maintenant, il faut voir les modules en général comme l'espèce parente "chien", dont les caractéristiques sont définies dans .box { } : tout ce qu'on met là sera commun à tous les modules ; par contre #RightPart, #LeftPart (attention aux mauscules, ce n'est pas indifférent), ...etc sont comme des races de chiens : ils héritent de toutes les caractéristiques de .box que tu ne modifies pas dans #RightPart { }, mais si on met une couleur de fond, par exemple dans cette fonction, elle va changer, mais que pour ce module .
Tout ça pour dire que si tu n'as pas de #RightPart { } dans ton CSS, ça veut juste dire que ton module Texte Libre n'a aucune caractéristique différente de .box { } . Mais dès lors que tu rajoutes la ligne #RightPart { background : #... }, par exemple, ce module aura toutes les caractéristiques des autres modules sauf la couleur du fond.
Maintenant, il faut voir les modules en général comme l'espèce parente "chien", dont les caractéristiques sont définies dans .box { } : tout ce qu'on met là sera commun à tous les modules ; par contre #RightPart, #LeftPart (attention aux mauscules, ce n'est pas indifférent), ...etc sont comme des races de chiens : ils héritent de toutes les caractéristiques de .box que tu ne modifies pas dans #RightPart { }, mais si on met une couleur de fond, par exemple dans cette fonction, elle va changer, mais que pour ce module .
Tout ça pour dire que si tu n'as pas de #RightPart { } dans ton CSS, ça veut juste dire que ton module Texte Libre n'a aucune caractéristique différente de .box { } . Mais dès lors que tu rajoutes la ligne #RightPart { background : #... }, par exemple, ce module aura toutes les caractéristiques des autres modules sauf la couleur du fond.
D'une manière générale, quand on conseille de mettre telle ou telle ligne dans ton CSS et que tu ne trouves rien qui resssemble, il faut juste la rajouter : c'est comme si tu mettais une précision dans ton CSS.
Attention, pour bien comprendre l'aspect de tel ou tel de vos éléments, il faut savoir aussi que ce système fonctionne comme des poupées russes : un élément parent va lui-même hériter du style de son propre parent (si rien n'est re-spécifié) ; ainsi, les modules définis par .box dérivent des colonnes #leftnav ou #rightnav (selon qu'il sont dans la colonne de gauche ou de droite). Finalement, tout dérive du "grand parent" body : si dans cette ligne, on définit une couleur de texte noire, par exemple, et que par la suite, on ne re-précise plus de valeur pour "color", ce sera écrit en noir dans toutes les parties du blog. Certaines parties dérivent directement de body, d'autres sont ses arrières-petites filles et ont hérité de tout un tas de modifications entre temps.
Cette façon de décrire le style de chaque élément en "poupée russes", qui a l'énorme avantage d'éviter de respécifier tout le temps ce qui reste pareil et met en valeur ce qui change par rapport à l'élément parent, a donné son nom au CSS : Cascading Style Sheet ou Feuilles de style en cascade.
* Attention, précision : tous les attributs qu'on ne spécifie pas n'héritent pas nécessairement de la valeur de l'attribut de l'élément parent, certains ont des valeurs par défaut au cas où rien n'est écrit, le background, par exemple ... Pour savoir si une propriété a une valeur par défaut ou une valeur héritée, je vous conseille d'aller sur ce site extrèmement utile : vous cliquez sur la propriété qui préoccupe et vous regardez sur la page qui s'affiche, en haut, à la ligne :
- Valeur héritée : oui/non
- Valeur par défaut : non/oui
par Zoelie
publié dans :
TIP's
Pour changer un peu du CSS, passons cette fois au HTML ...
Les textes et images défilants de mes modules Textes Libres et de mon Pied de page peuvent être arrȇtés si vous passez simplement votre cursuer dessus (sans cliquer...)
Un texte défilant est pratique pour gagner de la place, mais n'est pas toujours facile à lire; le faire s'arrȇter permet de pouvoir focaliser dessus.
Voici comment faire des textes défilants qui s'arrȇtent lorsque le curseur est dessus :
C'est un code qui s'insère dans la balise <marquee> et donc qui doit se mettre dans le code source de l'endroit où vous voulez afficher votre texte ( i.e: un module Texte Libre ou l'En-tête ou le Pied de page ou un article, bref partout où vous avez accès au bouton Source ...)
Le code pour reconnaître le passage du curseur sur le contenu de la balise <marquee> est
finalement, la balise doit ressembler à :
Vous pouvez également demander au texte de défiler vers le haut au lieu de droite à gauche grâce à la commande direction:
Par exemple, le code
<marquee height="70" direction="up" scrollamount="1" scrolldelay="2" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();">Coucou !<br />
Je défile vers le haut <br />
...<br /><img src="http...."/><br />
Passez le curseur sur moi pour arrêter mon défilement .<br />
</marquee>
donneet
<marquee width="50" scrollamount="2" scrolldelay="1" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();"> Moi, je préfère défiler horizontalement.<img src="http://..."/>Passez le curseur sur moi pour arrêter mon défilement .
<br /></marquee>
donne
Tous ces codes marchent très bien en mode Confiance.
Il faut toutefois savoir qu'ils peuvent ralentir le chargement de la page .
Les textes et images défilants de mes modules Textes Libres et de mon Pied de page peuvent être arrȇtés si vous passez simplement votre cursuer dessus (sans cliquer...)
Un texte défilant est pratique pour gagner de la place, mais n'est pas toujours facile à lire; le faire s'arrȇter permet de pouvoir focaliser dessus.
Voici comment faire des textes défilants qui s'arrȇtent lorsque le curseur est dessus :
C'est un code qui s'insère dans la balise <marquee> et donc qui doit se mettre dans le code source de l'endroit où vous voulez afficher votre texte ( i.e: un module Texte Libre ou l'En-tête ou le Pied de page ou un article, bref partout où vous avez accès au bouton Source ...)
Le code pour reconnaître le passage du curseur sur le contenu de la balise <marquee> est
onmouseover
Celui qui represente le fait que le curseur n'est plus sur le texte est onmouseout
Donc pour faire s'arrêter le texte au passage de la souris, il faut insérer onmouseover="this.stop();"
Et pour le refaire repartir : onmouseout="this.start();"
finalement, la balise doit ressembler à :
<marquee onmouseout="this.start();" onmouseover="this.stop();">
Vous pouvez également demander au texte de défiler vers le haut au lieu de droite à gauche grâce à la commande direction:
direction="up";
et même fixer la hauteur ou la largeur sur laquelle on verra le texte défiler en ajoutant height="XXX" et width="YYY", XXX et YYY étant les valeurs en pixels.Par exemple, le code
<marquee height="70" direction="up" scrollamount="1" scrolldelay="2" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();">Coucou !<br />
Je défile vers le haut <br />
...<br /><img src="http...."/><br />
Passez le curseur sur moi pour arrêter mon défilement .<br />
</marquee>
donneet
<marquee width="50" scrollamount="2" scrolldelay="1" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();"> Moi, je préfère défiler horizontalement.<img src="http://..."/>Passez le curseur sur moi pour arrêter mon défilement .
<br /></marquee>
donne
Tous ces codes marchent très bien en mode Confiance.
Il faut toutefois savoir qu'ils peuvent ralentir le chargement de la page .
par Zoelie
publié dans :
TIP's
