Catégorie : Design/CSS

Dans certaines situations, il peut être souhaitable d'afficher un nombre indéterminé d'items côte-à-côte dans une page Web. Afin d'obtenir le visuel désiré, il est intéressant d'entourer chaque item par une division. Ces divisions seront affichées l'une à côté de l'autre jusqu'à ce que toute la largeur de la page soit remplie. La division suivante sera affichée une ligne plus bas. Pour que les divisions soient affichées côte-à-côte, il faut qu'on leur applique une règle CSS float.

En raison de ce float, il peut être difficile d'aligner correctement les items lorsque la hauteur des divisions contenant chacun des items est variable.

Je vous présente dans cet article une technique pour bien aligner les items d'une grille à hauteur variable.

Généralement, dans les entreprises spécialisées en Web, un graphiste se chargera de créer la maquette qui répondra aux besoins du client. On dira que le graphiste développe une maquette « maison », c'est-à-dire une maquette bâtie de toute pièces par le graphiste.

Dans le cas où le site Web est développé par une seule personne ou par un groupe restreint de développeurs, trois options sont possibles :

• Si le développeur possède des talents de graphisme, bâtir lui-même une maquette maison;
• Retenir les services d'un graphiste à la pige pour développer une maquette maison;
• Utiliser une maquette tirée d'une banque de maquettes, gratuite ou payante.

De nombreuses pages Web présentent du contenu sur deux colonnes, par exemple une colonne pour le contenu principal et une colonne pour le contenu secondaire. Dans le cas où les colonnes ont la même couleur de fond que le reste de la page, les colonnes seront faciles à mettre en place. Cependant, si les colonnes ont une couleur de fond différente, il faut utiliser une astuce pour assurer que leur longueur soit toujours identique, même si le contenu d'une colonne est plus long que celui de l'autre.

Deux astuces vous sont présentées ici.

Le CSS permet de spécifier les couleurs pour à peu près tous les éléments d'une page Web : couleur de fond, texte, puces, titres, etc.

Il nous offre pour cela plusieurs techniques :

• Couleurs nommées
• Couleurs hexadécimales
• Codes hexadécimaux abrégés
• Couleurs avec transparence
• Couleurs dégradées

Pour mettre en forme une page Web, on utilisera une combinaison d'éléments HTML et de règles CSS.

Les éléments HTML peuvent être stylisés de différentes façons. Dans cet article, je vous expose les grandes lignes qui vous aideront à bien cibler le ou les éléments qui seront affectés par un style donné.

Le CSS nous permet d'ajouter un ou plusieurs caractères avant ou après un élément HTML. Ceci sera réalisé avec la règle CSS content appliquée dans un sélecteur :before ou :after.

Une utilisation typique de content : personnaliser l'affichage d'une liste à puces. On définit une règle indiquant qu'il n'y a pas de puce puis on ajoute un caractère de notre choix devant chacun des éléments de la liste.

Des boutons, il y en a partout. Des boutons pour soumettre un formulaire, des boutons pour lancer une action, des boutons pour donner notre accord (ou pas), des boutons pour « liker » une page, etc.

Il y a plusieurs façons de créer un bouton : balise <input>, balise <button> et même balise <a href>. De même, il y a plusieurs façons pour définir le comportement du bouton.

Examinons les différentes possibilités.

Dans certains cas, il est possible d'effectuer une partie de la mise en forme du site soit dans le code HTML, soit dans le CSS. Quelle technique doit-on privilégier et pourquoi ?

Afin de vous assurer que la grande majorité des internautes accèdent facilement à l'ensemble des fonctionnalités de votre site Web, vous devez prendre soin de ne pas placer d'information cruciale sous la ligne de flottaison, évaluée à 570 pixels pour un écran d'ordinateur. Si, comme plusieurs développeurs, vous utilisez un écran avec une très grande résolution (ex : 1600 x 900 pixels), il devient difficile d'avoir en tête l'emplacement exact de la ligne de flottaison.

La page d'accueil d'un site Web est bien souvent la première page visitée par les internautes. C'est en fait la première impression qu'auront les internautes du site Web. Il est primordial de bien la soigner et surtout de la rendre ergonomique.

Voici quelques principes à respecter pour bien réussir votre page d'accueil.