Dessins « à la main », blog de geekette et firefox3

Ça fait un bout de temps que je n’ai pas posté de billet sur le barbablog. La raison en est toute simple : je suis sous l’eau chez moi (sens propre) et sous l’eau au boulot (sens figuré). Ce matin je me suis ditstop, tu dois écrire  à tous tes lecteurs qui attendent leur dose de barbablog avec impatience, tu dois te lever tôt et prendre le temps de rédiger un billet intéressant évidemment je sais c’est pas facile mais tu dois le faire c’est une question de vie ou de mort. C’est pour ça que je me suis levé aux aurores [1] ce matin afin de vous entretenir d’un sujet passionnant : le webdesign. C’est normal, c’est de ça dont je parle ici en général. Sauf quand c’est les élections présidentielles, auquel cas j’aime bien dire du mal de Nicolas Sarkozy.

Après cette longue et inutile introduction qui n’aura eu d’autre effets que de vous apprendre que je suis tombé du lit ce matin, je voudrais parler de Hand drawing style, de blog de geekette et de Firefox3. Mais vite fait hein. Parce que j’ai pas encore pris mon petit-déjeuner.

Le style dessin  à la main

L’excellllllent [2] magazine en ligne Smashing Magazine a publié un long article sur le hand drawing style (dessin à la main en français). L’article est complet, synthétique et fourmille d’exemples. On y apprend que le style dessin à la main arrive en force sur le web. Smashing donne une liste d’exemple longue comme la main [3] et alerte également les webdesigners qui seraient tentés par ce style (plutôt sympa d’ailleurs) sur les problèmes d’utilisabilité qu’il peut poser. Car en effet, une police type handwriting se lit beaucoup moins bien qu’une bonne vieille verdana.

blog de la geekette

Le style est tellement sympa, et je suis tellement dans la hype, que avant même de tomber sur cet article, je m’étais déjà essayé aux hand drawing chez CNET CBS pour le blog Geekette vol 3, le dernier né des blogs de CNET France.fr.

CNET France publie des tests, des news et guides sur des produits électroniques grand public, que ce soit du gps, du baladeur mp3 ou de la télévision écran plat (allez y, c’est bien). Tout ça est très bien mais manquait d’un côté un peu déjanté. Bha voilà, avec elle, c’est rattrapé. Par contre geekette, si tu pouvais publier un peu plus régulièrement, ce serait cool, que je me dise pas que j’ai fait un beau design au summum de la hypitude branchée pou rien hein :) (je dis ça parce que j’aime bien te lire)

Firefox 3

Justement, pour le blog de la geekette, j’ai voulu faire mon malin et lui faire un joli bandeau au summum de la hypitude branchée (je répète). Tout ça est très joli mais faire un bandeau comme ça, ça suppose de tordre les css dans tous les sens. Et là, je les ai tellement tordues, que firefox 3 n’a pas trop apprécié. Il décale les trois images du bandeau un peu trop vers la droite :

Ce que j’ai voulu faire

Ce que firefox 3 me fait

Les 3 images fautives (qui ont pour id frigo, chaussures et courses) sont positionnées en absolute et placées au pixel près sur la page. C’est ce positionnement que firefox interprète différemment des autres navigateurs. J’en appelle donc à la communauté et vous demande (oui, la communauté c’est vous) si vous avez déjà rencontré ce problème ou si vous connaissez un hack css pour exclure firefox 3. Pour info je colle le code en dessous :

#chaussures, #frigo, #courses {position: absolute; display: inline; left: auto; float: left}
#frigo {margin-left: 230px; margin-top: -25px}
#courses {margin-left: 570px; margin-top: -70px}
#chaussures {margin-left: 750px; margin-top: -82px}

 J’offre toute ma considération à celui qui me trouve le hack. Sinon je vais chercher de mon côté également; Mais je vous l’ai dit, je suis sous l’eau, alors si je peux faire bosser les autres ;) C’est ça le communautaire non ?

  1. 7h23 très exactement
  2. C’est pas une fôte les 6 l, juste un effet d’emphase
  3. oh le jeu de mot pourri

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Euh ce qui me semble bizarre c’est ta double application des ID

    la balise img ne peux pas avoir l’id frigo si celui ci est utilisé pour la balise DIV … ton problème vient peut être de la.

  2. Merci Mathieu. J’ai supprimé l’id de l’image. Ca n’avait rien à faire là effectivement. Malheureusment, ça ne résout pas le positionnement dans firefox 3. Je cherche, je cherche…

  3. J’aurai fais plus simplement :

    #chaussures,
    #frigo,
    #courses {
    position : absolute;
    }

    #frigo { top : 25px; left : 480px; }
    #courses { top : 40px; left : 610px; }
    #chaussures { top : 40px; left : 780px; }

    .geekette .description {
    background: #F39 url(/2007/i/b/header-geekette.gif) top left no-repeat;
    position : relative;
    }

    Surtout pas oublier de caler le .description en position : relative

    A voir par contre avec les autres navigateurs et pour les valeurs de positionnement, ajustez à votre goût…

  4. Alors un grand Bravo et un grand Merci à David qui m’a donné une solution simple et beaucoup moins alambiquée que celle que j’utilisais jusqu’ici.

    Et ça marche !

  5. De rien m’sieur Grégoire :)

  6. Très classe la customisation du header pour FF!
    Mais le modèle de base était déjà sympa :)
    bon week-end
    gael

  7. Pour tous les fans de dessin, je vous conseille un site qui a été lancé très récemment et qui permet de s’offrir des dessins réalisés à la main par un certain Monsieur Lapin et de flaner sur son blog où bcp d’oeuvres sont publiées … Il y a de tout, du bon enfant, du plus trash, du comique… bref très sympa !
    Voici l’adresse : http://blog.dessine-moi-un-lapin.com

Laisser un commentaire