Suite et presque fin des aventures du blogounet expérimental numéro... j'ai perdu le compte, avec sa bannière bidouillée avec la première photo et le troisième effet Photofiltre qui me soient tombés sous la main, en 5 minutes chrono

    Jetons un oeil sur le css... oh, ça sera vite fait, il n'y a que 24 lignes :

body { background-color: #8B0000; font-family: Papyrus, Verdana; color:#FFF0F5; font-size: 14px; }

   (et voilà la police, la couleur et la taille d'écriture sur l'ensemble du blog définies une bonne fois pour toutes, en même temps que la couleur de fond... j'aurais pu rajouter un curseur personnalisé, mais un peu de sobriété ne nuit point)

a { text-decoration: none; color: #FFC0CB; font-size: 100%; }
a:hover { text-decoration: none; color: #FFF0F5;}

    (le comportement des liens, au repos et au survol...)

h2 { color: #FFC0CB; }

    (une couleur unique pour tous les « h2 », à savoir ici les titres de modules, histoire d'harmoniser avec les titres d'articles qui ont, eux pris la couleur des liens définie dans a)

.box { padding: 0 0 0 35px; }

    (un chouïa de padding pour décaler le contenu des modules vers la droite afin de simuler un centrage, le « text-align: center; » ayant catégoriquement refusé de s'appliquer au module Calendrier...)

.presentation .box-content li { list-style-type: none; }

    (pour enlever les puces du module Présentation uniquement)

.article { margin-bottom: 35px; padding: 15px 10px 25px 15px; }

    (padding et margin pour que les articles respirent un peu...)

.contenuArticle { padding: 0 0 10px 0; }

    (encore un peu de padding, cette fois pour détacher la zone « .afterArticle » du corps du texte...)

.afterArticle { text-align: right; width: 90%; background-image: url(http://idata.over-blog.com/2/32/21/29/poussin.png); background-position: left; background-repeat: no-repeat; padding: 34px 20px 27px 0;}

    (alignement à droite et décoration des mentions « Publié par », « Ajouter un Commentaire » et tout ce qu'on trouve généralement sous un article... à la réflexion, peut-être aurais-je pu ajouter une margin-top et ainsi me passer de la ligne précédente)

.listArticles { margin-bottom: 20px; background-image: url(http://idata.over-blog.com/2/32/21/29/poussin.png); background-position: bottom; background-repeat: no-repeat; padding: 0 0 40px 0;}

    (écartement et décoration de la liste complète des articles)

.responseOption { background-image: url(http://idata.over-blog.com/2/32/21/29/poussin2.png); background-position: left; background-repeat: no-repeat; padding: 0 0 28px 0;}

    (pour mettre un petit grigri sous les informations qui suivent les réponses aux commentaires)

img { border: 0px #FFF; }

    (pour faire sauter la bordure rose qui venait se mettre autour de ma bannière et de mon vatar blog)

.linkAllArticles { display: none; }
.article_navigation {display: none;}

    (pour faire sauter les mentions « article précédent », « retour à l'accueil » en affichage Article seul)

input.button { border: 1px solid #FFC0CB; background-color: transparent; font-family: Papyrus, Verdana; color:#FFF0F5; font-size: 12px;}
input { border: 1px solid #FFC0CB; background-color: transparent; font-family: Papyrus, Verdana; color:#FFF0F5; font-size: 11px;}

    (une petite fantaisie pour changer l'aspect du bouton « OK » que j'ai toujours trouvé particulièrement disgracieux, et des champs de saisie tant que j'y étais... changements qui s'appliquent au formulaire d'ajout de commentaire)

.ln {clear:both;}
.cl { float: left; }
.clear {clear:both;}

    (dans le doute... gardons ces lignes, elles sont assez hermétiques pour servir à quelque chose...)

#global { width: 950px; }
#cl_0_0 {margin-left:20px; padding:0px; width:100%;}
#ln_1 { width: 100%; padding: 15px; margin-top: 40px; }
#cl_1_0 { width: 640px; margin-left: 10px; }
#cl_1_1 { width: 245px; float: right; }

    (réglage des largeurs et espacements de ma structure...)

 

 

   Restent encore quelques zones à aborder... je pense entre autres à la pagination, aux Pages et aux albums photo... mais ça, ça sera pour l'année prochaine 

 

    Et après l'avoir passé au css validator, ce blogounet basique, ne me reste plus qu'à aller le décorer de la médaille du css, le validator n'y ayant décelé aucune erreur.

    En même temps, sur 24 lignes, il aurait fallu le vouloir...

    Y'avait un bout de temps que ça me tarabustait, cette histoire. Cette ligne blanche qui descendait tout le long des images hébergées sur OB (et seulement sur OB), au chargement de certaines pages. En plus, tous mes petits camarades ne la voyaient pas. Même sur une capture écran, ça ne leur semblait pas évident. Pourtant, ça se voit comme le nez de Pinocchio au milieu de la figure de George Bush, pas vrai ?



    (en plus là, vous en aurez deux, enfin trois : une statique, enfin deux, sur la capture écran, et une en direct live sur le bloug).

    Puis le Chef a tout expliqué.
    - Ophi, c'est la compression progressive qui fait ca , qu'il a dit.
    Et quand il fait « », le Chef, c'est qu'il est sérieux. Ça a quand-même fait marrer Gros Louis, qui a demandé si ça voulait dire que ça faisait mal progressivement. Le Chef qui était de bon poil, au lieu de lâcher une boule de feu et d'envoyer le blog de Gros Louis aux oubliettes, il a ajouté :
    - Gros_Louis, ca affiche en fait des gros pavés de pixel, et à chauqe passage, chaque ligne de pixel s'affine. Au début, on fait un passage rapide de pavé de 20x20, et on affine, jusqu'à 1x1, ce qui permet d'avoir un apercu de l'image avant qu'elle s'affiche totalement
    La preuve que c'est bien lui qui l'a dit, c'est le « ». Le « », c'est comme le « © », mais pour le Chef.

    N'empêche que ça m'énerve, ce truc. De penser qu'une tortue, même géniale, s'amuse à sauter à pattes jointes sur mes jolies nimages à moi pour les faire rentrer sur mon bloug, ben ça ne me plaît pas tellement.
    On n'y peut rien, mais y'a de quoi grumpffffer, non ?