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 😉
C’est vrai qu’il est super bien foutu cet article.
Notament la partie "Compacter le code CSS".
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)
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 😀
dommage que google privilégie son système de PageRank à la pertinence et qualité de la page.
excellent tuto
#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 😀 )
}
#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 😉
}
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…
http://www.cssplay.co.uk
un autre niveau, on va dire …
#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 😉
}