Depuis longtemps, l’intégrateur web pressé d’aller manger, dresse la table pour mettre en forme ses formulaires. Et vas-y que je te mets du texte dans un td, un champ texte dans l’autre, et ce, jusqu’à la nausée. Désormais, plus d’excuses. Nous pouvons tous (oui, j’ai bien dit tous !) aligner des éléments de formulaires sans table. Mais pas sans les mains ni sans CSS. →
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
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. →
Trucs et astuces CSS
Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser 😉
Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.
- La feuille blanche
- Raccourci pratique pour les bordures CSS
- Transparence
- Commentaires conditionnels d’IE vs hacks CSS
- Barre de défilement et décalage d’une page centrée
- Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
- Centrer un bloc horizontalement dans la fenêtre du navigateur
- Modifier les caractéristiques des liens avec LoVe HAte
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 : →