Site optimisé pour tous les navigateurs sauf Internet Explorer, qui a qu'à comprendre ce qu'on lui dit comme ses petits camarades.
Si vous naviguez encore avec IE6, ce rafiot toupourri qui prend l'eau de partout, veuillez quitter cet espace immédiatement

   C'est inadmissible

   Quoi ? Bah j'en sais rien, c'était juste pour tester la fonctionnalité "je râle parce que j'ai le droit" comprise dans le pack Premium.
   Ça marche po va falloir que j'aille poster dans Bugs

  Parce que j'ai le droit aussi (et pas seulement parce qu'il le demande sur son site où je pêche pas mal de bouts de css que j'accommode à ma sauce, miam , et c'est pas fini), le lien vers LA référence en matière de bidouillage css, marque-pagez-moi ça et tout de suite, hein !

CSSplay (les expériences de Stu Nicholls)

   Bon là pour le moment je suis en train d'essayer de faire un joli menu accordéon, mais c'est pas facile et ça prend du temps de finir les restes du réveillon, donc il sera pas fini avant l'année prochaine. Le menu, pas le réveillon.

   Pour vous faire patienter, un petit rien qui va nous permettre d'explorer un peu plus avant les fonctionnalités généreusement mises à notre disposition par M'dame Overblog. Vous avez déjà essayé de cliquer, juste par curiosité, sur la petite flèche à côté de "Style" ? Je suis sûr que non
   Ça y est ? Vous avez cliqué sur la petite flèche ? Vu les "citation", "encart", "important", "perso1" et "perso2" ? Ben c'est des styles qui, grâce à une toute pitite ligne de css, vont vous permettre de personnaliser l'apparence de tout un bloc de texte. Si c'est pas beau, franchement.

   Les cinq lignes correspondantes, elles sont ensemble, bien rangées à la fin des lignes qui permettent de personnaliser les articles. Chez moi, elles sont comme ça :

.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}

   Et si ça ne vous suffit pas, cinq styles prédéfinis différents tout prêts à l'emploi, rien ne vous empêche d'en créer d'autres Il vous faudra juste appeler le css défini dans la ligne .monstyle par la balise suivante : <div class="monstyle">, à refermer par un </div>, mais ça vous devez le savoir depuis le temps que je vous le répète. Ça marche aussi avec <span class="monstyle"> </span> au fait, y'a peut-être une différence, mais si y'en a une, ben elle est trop subtile pour moi.

   Ha, rappelez-moi de vous parler des nouvelles classes associées à la date, un de ces jours.

• Entrée
• Plat
• Fromage
• Dessert

• Entrée
  • Crudités
  • Crustacés
• Plat
  • Viande
  • Poisson
• Fromage
• Dessert
  • Fruit
  • Pâtisserie

• ligne ul#monmenu : padding et margin pour le placement de mon menu.

• ligne ul#monmenu li : ici, je détermine l'aspect des cellules. Largeur (width), position, couleur et aspect du texte (text-align, color et font-weight), espacement entre les cellules (margin-right), disparition des puces de listes (list-style: none;). Je laisse les attributs float et position en l'état.

• ligne ul#monmenu li:hover : une petite fantaisie que j'ai rajoutée, qui entraîne le changement de couleur du fond de mes cellules au survol (background-color).

• ligne ul#monmenu li a : eh eh... le a signale que nous nous occupons ici de l'aspect d'un lien. Et voilà pourquoi le « Fromage » de mon menu n'a pas la même tête que ses petits copains « Entrée », « Plat » et « Dessert » ! Parce qu'il n'y a pas de choix dans les fromages, et donc que mon « Fromage » est un lien, lui ! Avec sa couleur à lui, son aspect à lui (quant au padding présent dans cette ligne, il sert à régler la hauteur de la cellule, pour qu'elle ait le même aspect que les autres, suffit d'attribuer au padding la même valeur que dans la ligne ul#monmenu li)... et son comportement à lui au survol, comme spécifié dans la...

• ligne ul#monmenu li a:hover.

• ligne li ul : le display:none; est là pour nous assurer que nos sous-menus (les « Crudités », «Crustacés » et autres gourmandises) ne sont pas visibles quand le menu est au repos. On ne touche pas au reste ! Pas pour le moment du moins, parce qu'on va s'amuser avec cette ligne, en guise de pousse-café

• ligne ul#monmenu li ul : le positionnement des sous-menus, de ce qui apparaît quand on passe la souris sur l'une des cellules « Entrée », « Plat » ou « Dessert ». Pour comprendre le pourquoi du comment de ce top: 17px;, amusons-nous à le passer à... 30px, par exemple.

• ligne ul#monmenu li:hover ul li a : regardez un peu ça... ul#monmenu (li:hover ul) li a... y'a comme un air de famille, non ? Normal, cette ligne-ci définit l'aspect des liens présents au second niveau de mon menu : texte noir sur fond blanc. Mes « Crudités », «Poisson » et « Pâtisseries ». Quant à la

• ligne ul#monmenu li:hover ul li a:hover : les mêmes, au survol : texte vert, fond gris pâle.

• lignes li>ul, li:hover ul, li.over ul : on ne touche à rien ça pourrait exploser

**DIGESTIF**

   En m'amusant à tout changer dans toutes les lignes pour voir à quoi elles servaient (c'est encore le meilleur moyen de comprendre et d'apprendre, hein ), ben j'ai trouvé un truc rigolo :



   En fait, j'avais tout enlevé la ligne ul li. Après je l'ai remise, et je me suis amusé à tout changer dedans. Pour obtenir ce zoli décalage, voilà à quoi ressemblait ma ligne li ul :

li ul { display: none;
    list-style: none;
    position: absolute;
    width:160px;
    top: 18px;
    left: 0;
    font-weight: normal;
    margin-left: 0px;}

   Il a aussi fallu que j'adapte 1) la largeur des cellules parce que sinon le menu rentrait plus dans la ligne et 2) la marge entre les cellules parce que sinon la « Viande » venait se plaquer sur le « Fromage », façon cheeseburger. Beurk. Et tout ça en tâtonnant, dans la ligne ul#monmenu li.
   A vous de poursuivre les expériences, de jouer avec les marges et les paddings, les couleurs, les fonds, les gifs à paillettes...

   Ce menu (dans uns forme css-iquement très simplifiée) est visible ICI.

   Le temps de digérer, et je vous présente LE menu qui tue