Menu à onglets avec javascript et css

Les menus à onglets sont à la mode depuis déjà quelques temps. Et c’est temps mieux car ils sont bien pratiques. Ils permettent de résoudre un des problème fondamentaux des interfaces utilisateurs : présenter plus d’informations sur une page, tout en permettant d’y accéder facilement. Ou tout au moins sans transformer votre site en usine à gaz dont le parfum ferait fuir vos visiteurs 😉

CSS et portes coulissantes pour un effet de zoom :hover

zoom.jpg Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.

En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)

Au menu Design CSS, je vous propose un exemple de mise en pages classique composé d’un header, de deux colonnes et d’un footer. Pour profiter de l’avantage des CSS par rapport aux tableaux, je ferais en sort qu’en supprimant deux lignes dans la feuille de style CSS, nous passions de deux à une colonne.

Design CSS : fixe, élastique ou liquide ?

Difficile de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préoccupe des standards du W3C et des bonnes manières pour un web qui prenne du sens et perde du poids ! Entrons dans le vif du sujet en précisant rapidement de quoi il s’agit :