S'il ne devait rester qu'un tutoriel pour faire un menu CSS avec onglets…

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

S'il ne devait rester qu'un tutoriel pour faire un menu CSS avec onglets…

Vous pensiez avoir fait le tour des tutoriels pour réaliser des menus avec onglets en CSS ? Moi aussi, mais c’était sans compter les facéties googliennes : je cherchais tranquillement des ressources sur le poids des sélecteurs css pour ajouter une information ou deux à mon billet sur les Reset CSS quand un résultat au titre alléchant a retenu mon attention :

Créer un menu à onglets avec CSS. Surpris de n’être jamais tombé sur cet article auparavant, je regarde ce que Google a à dire sur la requête menu onglets css. L’article apparait bien, mais en 3ème page… alors qu’un tutoriel de cette qualité mérite la première. Non mais franchement, y font quoi les gars de chez Google ? Ils pourraient faire un effort, quand même ;)

Ce tutoriel vous guidera pas à pas sur la voie de la création d’un menu à onglets accessible et multi-navigateurs. Que vous en soyez à votre premier menu ou pas, vous apprendrez forcément quelque chose. Si ce n’est pas le cas, vous pourrez toujours venir vous plaindre ici ;) Bref, vous m’avez compris, faites du bruit pour que tout le monde puisse profiter du sens de la pédagogie de Normand Lamoureux.

L’article est plein de bons conseils que je vous laisse découvrir. Bon, si vous insistez, je vais avoir du mal à résister à l’envie de dévoiler une astuce particulièrement simple et efficace pour améliorer la productivité dans l’écriture des CSS :

Arrive le moment d’écrire ma feuille de style. Dans ce dessein, je vais à l’élément « Éditer les CSS » du menu CSS de la barre d’outils pour développeur Web. Cette fonctionnalité permet d’écrire une règle CSS dans le volet de gauche du navigateur et de voir immédiatement le résultat dans le volet de droite, où le fichier HTML s’affiche.

J’utilise régulièrement ce volet gauche pour jouer avec les CSS des sites que je visite, mais je n’avais jamais pensé m’en servir comme ça.

Comme quoi, avec Google, une requête peut en cacher une autre ;)

Faites en sorte que la redondance de l’information profite aux contenus qui le mérite, et ne sortez pas sans cette boite à outils pleine de cours et autres tutoriels ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



8 commentaires pour “S'il ne devait rester qu'un tutoriel pour faire un menu CSS avec onglets…”

  1. vincenzo dit :

    C’est vrai qu’il est super bien foutu cet article.

    Notament la partie "Compacter le code CSS".

  2. Rémi dit :

    Ah bon ? J’étais persuadé que tous les intégrateurs utilisaient editCSS de webdevelopper comme ça… c’est un gain de productivité inimaginable… et une bonne raison de plus d’hair IE ;) (Quoique DOMExplorer pour IE palie un peu à ce problème)

  3. C’est vrai très bon Tuto, mais s’il n’est pas bien référencé c’est que le site a un PageRank de 0, beaucoup de boulot de redondance à venir :D

  4. tolis dit :

    dommage que google privilégie son système de PageRank à la pertinence et qualité de la page.

    excellent tuto

  5. vicenzo {

    L’idée de compacter le code est pas mal. C’est vrai que lorsqu’on regarde tous les détails cumulés (nombre de feuille de style importées, longueurs, images, etc) on se rend compte qu’il faut optimiser. Sauf que là, je trouve que c’est un peu trop : je préfère garder mes CSS lisibles, car on ne sait jamais dans quelles conditions on devra corriger un bug (genre depuis mon Dell Axim. Enfin, là je chipote aussi :D ) }

    #Rémy { Pour le gain de productivité, je veux bien, mais de là à le qualifier d’inimaginable ;) En fait, j’attaque directement tout (HTML + CSS) dans Notepad++ et ensuite j’abuse de Alt+TAB pour tester dans mes 3 navigateurs préférés et quand j’ai un trou de mémoire sur telle ou telle propriété CSS je lance TopStyle light. Toutefois, je commence à me servir de ce panneau latéral pour certains débuggage express : là, ça change la vie, quand il faut masquer une déclaration, changer une propriété, voire modifier le texte à la volée… ;) }

    #Alex, #tolis { Quand j’ai lu pagerank de zéro j’ai cru avoir mal lu… Mais oui, t’as raison. Donc, finalement arriver en 3ème page dans ces conditions c’est pas si mal ^_^

    Et ça répond en partie à tolis sur l’histoire du pagerank : ici, on est bien dans le cas où un contenu de qualité se positionne bien malgré un PR0 ;) }

  6. Userland dit :

    Les meilleures ressources web en français [Update:] Suite à la lecture du très bon tutoriel Créer un menu à onglets avec CSS de Normand Lamoureux signalé par Br1no, j’ai rajouté ce site dans…

  7. Rod dit :

    http://www.cssplay.co.uk

    un autre niveau, on va dire …

  8. Rod {

    Certes, mais l’intérêt du lien que je donne est dans la démarche pédagogique qu’on retrouve rarement aussi bien expliquée pour aborder non seulement la création d’un menu avec onglets, mais aussi et surtout la création d’un site web standard qui prend en compte les us et coutumes d’IE.

    Ceci dit, CSSplay, ça déchire grave ;) }

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site