css 4 design » Background

Quelques notes sur les éléments graphiques du webdesign

Bruno Bichet — Tue, 24 May 2011 16:59:12 +0000

Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire.

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page. Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

8 techniques CSS pour remplacer du texte HTML par une image

Bruno Bichet — Mon, 14 Feb 2011 11:46:30 +0000

Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance.

Jouer sur la taille des caractères avec font-size

.texte-a-cacher {
    font-size: 0;
}

Déplacer le texte hors du Viewport avec text-indent ou position

.texte-a-cacher {
    text-indent: -9999em;
}

.texte-a-cacher {
    position: absolute;
    left: -9999em;
}

.texte-a-cacher {
    position: absolute;
    top: -9999em;
}

.texte-a-cacher {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

Sortir le texte du flux avec display

.texte-a-cacher {
    display: none;
}

Masquer le texte avec visibility

.texte-a-cacher {
    visibility: hidden;
}

Placer le texte derrière l’image avec z-index

.texte-a-cacher {
    position: relative;
    z-index: -1;
}

Exemples de marquages HTML

jQuery for Designers


    
        jQuery for Designers

#header h1 a {
    background: url(http://jqueryfordesigners.com/wp-content/themes/j4d/static/images/logo.gif) no-repeat 0px 0px;
    border: none;
    display: block;
    height: 30px;
    width: 258px;
}
#header h1 a span {
    display: none;
}

KLOUT

Klout is the Standard for Influence

h1 {
    background: url(/public/images/logos.png) no-repeat;
    color: #605459;
    font: normal 20px/85px Arial;
    font-style: italic;
    height: 51px;
    padding-left: 125px;
}
h1 span {
    display: none;
}

Ici et ailleurs (Neokraft)


    ici & ailleurs

#top {
    background: transparent url(http://neokraft.net/css/2009-10/img/top_bg.png) no-repeat 0px 3px;
    height: 120px;
}
#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}

W3C

W3C

h1 a {
    display: block;
    float: left;
    background: url('../images/logo-w3c-screen-lg') no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: white;
}

SOHTANAKA

Web Designer & Front-end Developer - Soh Tanaka

h1 {
    background: url(images/homepage_banner.gif) no-repeat center top;
    height: 219px;
    text-indent: -99999px;
}

C’est quoi le plus mieux bien ?

A la lecture des billets de Laurent Denis et de Raphaël Goetter, il semblerait que les solutions à base de display: none, ne soit pas très accessibles aux lecteurs d’écran. Voici une solution qui semble robuste et efficace :


    Blog & Blues

span {
    position:absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Les solutions à base de text-index: -9999em semblent également intéressantes

C’est fini

Il ne s’agit pas d’une liste exhaustive des solutions possibles (vous en trouvez bien plus dans les liens présents dans la Linkographie, ci-dessous), mais de quelques bouts de code que l’on rencontre assez souvent.

Linkographie

Articles sur le même sujet

Styler vos champs de formulaires de recherche avec CSS

Bruno Bichet — Sun, 07 Dec 2008 21:38:31 +0000

Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ input type=text blanc avec contour.

L’auteur utilise un button à la place du input type= »submit » pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ input et le button. Ce qui permet de gérer facilement les différents état :focus ou :hover avec background-position.

PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.

Articles sur le même sujet

Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards

Bruno Bichet — Mon, 28 Jan 2008 12:52:20 +0000

Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer.

Si le premier groupe nous donne satisfaction, il faut bien reconnaitre que le second reste scotché près du radiateur dès qu’on parle d’overflow, de min-height, de positionnement implicite avec right, bottom ou left ou encore d’interactivité avec :hover sur autre chose qu’une ancre a…

Bref, toutes ces petites choses très utiles au cours de l’intégration CSS qui manquent cruellement à Internet Explorer. Sans parler de la prise en charge inexistante de certains sélecteurs CSS qui seraient très pratique pour éviter de spécifier une classe chaque fois que l’on veut atteindre un élément en fonction de sa position dans le DOM.

Dans la suite de cet article nous verrons que la bibliothèque Javascript IE7 peut nous aider à travailler plus efficacement avec Internet Explorer pour faciliter la mise en œuvre de « composés » HTML / CSS cross-browser.

Est-ce vraiment nécessaire d’avoir un affichage identique quelque soit le navigateur ?

Dans le flux de production habituel, la production d’un site web passe par la conception d’une charte graphique dont il conviendra de découper et d’agencer les morceaux à coup de balises HTML et de déclarations CSS.

L’image servant de référence quasi-absolue, il devient très difficile de défendre auprès de son commanditaire le point de vue selon lequel la sacrosainte charte graphique puisse présenter des différences — même minimes — d’un navigateur à l’autre, fut-ce d’un pixel !

Pour parvenir à ses fins, l’intégrateur web dispose de deux armes : le code HTML qui — s’il suit une ligne sémantique de bon aloi — devrait garder la même structure d’un bout à l’autre du projet, et les CSS qui servent de variable d’ajustement jusqu’à la fin.

Reste à trouver une méthode de travail qui limite à la fois les différences de rendu et le nombre de lignes de code à produire :

Les visionnaires conseillent de faire un site conforme aux standards en prenant un navigateur comme Firefox ou Opera comme référence pour le rendu CSS, et d’utiliser au maximum les possibilités offertes par…
- les sélecteurs CSS,
- la transparence PNG en 256 niveaux,
- le calcul des largeurs minimales et maximales,
- etc,
…puis de faire au mieux pour les navigateurs non conformes. Cette approche, pour intéressante qu’elle soit, n’est pas possible dans un contexte commercial car seule une poignée de visiteurs verrait le site web dans toute sa splendeur, tandis que la majorité n’en aurait qu’une version dégradée, fut-ce gracieusement…
Les réalistes proposent de n’utiliser que les propriétés disponibles sur la majorité des plate-formes, en prenant pour chaque fonctionnalité, le plus petit dénominateur commun en fonction du projet. Cette approche permet de concilier le respect des standards (même s’il ne s’agit pas des toutes dernières recommandations) avec un rendu uniforme des pages en contrepartie d’une éventuelle limitation des fantaisies graphiques souhaitées par le client. En effet, selon la maquette, le fait de ne pas pouvoir utiliser la transparence PNG, par exemple, peut avoir une incidence sur la rigidité de la structure HTML / CSS à cause des découpes d’images : on sera enclin à réunir plusieurs partie d’image en une seule, alors qu’avec la gestion de la transparence, il est sera plus souvent possible de « granulariser » les découpes.
Une troisième approche réalistico-visionnaire que l’on retrouve parfois sous l’acronyme MOSe (Mozilla, Opera, Safari enhancement) mélange les deux premières approches en cherchant le plus petit dénominateur commun pour assurer une large compatibilité, puis en introduisant des améliorations visibles uniquement dans les navigateurs modernes. Cette dernière approche est celle qui offre une plus grande cohérence à vos pages web dans le temps, puisque qu’en suivant les recommandations au plus près, plus le temps passe et plus le souvenir des mauvais navigateurs s’estompe. (Ceci est à rapprocher de l’annonce de la nouvelle balise meta mise en place à l’occasion de la sortie prochaine d’IE8 qui réintroduirait dans l’écosystème du web un pis-aller dont on commençait à peine à se débarrasser : la détection du navigateur pour savoir s’il doit basculer en mode standard ou non. Voir ma petite note sur le sujet.)

IE7.js : ce n’est pas de la magie, c’est de la technologie ! »

Articles sur le même sujet

Background CSS : des fonds hachurés avec la "positive attitude"

Bruno Bichet — Wed, 16 Jan 2008 14:01:10 +0000

Les fonds de page web hachurés sont particulièrement appréciés des webdesigners pour une raison double : les zébrures donnent de la vibes aux pages web tout en conservant un ratio poids/agrément des plus satisfaisant, vu qu’il s’agit d’un motif de petite taille (généralement quelques pixels) qui se répète sur tout ou partie de la page.

De la graphologie appliquée à la zébritude

Toutefois, cet angle peut avoir deux directions qui peuvent en dire long sur votre humeur si l’on met en rapport le sens des zébras avec certaines conclusions issues de la graphologie. Cette dernière nous indique qu’une écriture penchée vers la droite est synonyme de dynamisme et de regard tourné vers l’avenir ; vers la gauche, on se tourne vers le passé et l’introspection.

Voici un exemple qui présente des hachures dirigées vers la droite. (capturé sur jarodxxx)

Le même exemple avec les zébrures dirigées dans l’autre sens

Les fonds zébrés obéissent-ils à cette dichotomie ? Je n’ai pas de certitude. En revanche, ce que je sais, c’est que les fonds hachurés qui donnent sur la gauche peuvent contrarier le sens de lecture d’une page occidentale qui – comme chacun sait – s’effectue de la gauche vers la droite.

Les exemples présentés ici semblent relativement similaires au regard du sens de lecture, et ce pour plusieurs raisons :

La taille de la capture d’écran privilégie la surface de texte et minimise l’impact des hachures,
Les hachures n’apparaissent que sur le côté gauche,
Les hachures sont relativement peu contrastées dans cet exemple.

Et vous, vos fonds zébrés penchent vers la droite ou vers la gauche ?

Sélection de sites permettant de générer des motifs répétés en quelques clics

Autres sites proposant des trucs et astuces pour les backgrounds

http://www.kianhean.com/archives/101: Le fond de la page change grâce à un petit javascript qui détecte l’heure et affiche la feuille de style avec le background approprié
http://inner.geek.nz/javascript/parallax/: Etonnant effet où le texte défile à la vitesse normale, tandis qu’une partie du fond défile plus lentement et une autre plus rapidement. Le scroll fonctionne avec la molette, les flèches du clavier, les touches « haut » et « bas » de page et avec la barre d’espace.
http://scriptasylum.com/background/alien/alien.html: Le meilleur pour la fin : allez, je vous laisse découvrir ;)

Articles sur le même sujet

Menu HTML et CSS, sliding doors et item current en PHP

Bruno Bichet — Wed, 07 Mar 2007 23:58:18 +0000

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS ;)

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.


  
    id="accueil" href="index.php">Accueil
    id="page1" href="page1.php">page1
    id="page2" href="page2.php">page2

La feuille de style CSS pour le menu

En ce qui concerne la feuille de style pour le menu, la seule chose à retenir, c’est le décalage de -25px pour l’état :hover qui affiche la partie de l’image réservée pour le survol. C’est ce même décalage qui permettra par la suite de signaler la rubrique en cours lorsque le bouton en question sera cliqué.

/* Style général du menu */
#menu {
     margin: 0;
     padding: 0;
}
#menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
#menu ul li {
     float: left;
 }

/* Style global des liens */
a#index,
a#page1,
a#page2 {
     display: block;
     width: 100px;
     height: 25px;
}

/* Style particulier pour le background des liens
avec pour chacun : l'état inactif et actif */
a#index {
     background: url(images/bt_index.png) 0 0 no-repeat;
}
a#index:hover {
     background: url(images/bt_index.png) 0 -25px no-repeat;
}
a#page1 {
     background: url(images/bt_page1.png) 0 0 no-repeat;
}
a#page1:hover {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
a#page2 {
     background: url(images/bt_page2.png) 0 0 no-repeat;
}
a#page2:hover {
     background: url(images/bt_page2 .png) 0 -25px no-repeat;
}

La petite fonction php qui va bien

class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>

Cette fonction recherche la première occurence de la chaîne de caractère $strPage dans l’URL courante grâce à strstr().

Ensuite la fonction echo() affiche une classe CSS composée de la concaténation du terme current_ et de la chaîne $strPage. Si le terme $strPage n’existe pas dans l’URL, la fonction renvoit une chaine vide…

Le menu HTML avec l’appel de la fonction


     
         id="accueil" href="index.php" >Accueil
         id="page1" href="page1.php" >page1
         id="page2" href="page2.php" >page2

Le menu HTML après un clic sur le deuxième lien


     
         Accueil
         class="current_page1" id="page1" href="page1.php" >page1
         page2

La touche finale avec les liens current

/* Styles particuliers issus de la fonction PHP pour les liens en cours */
#menu a.current_index {
     background: url(images/bt_accueil.png) 0 -25px no-repeat;
}
#menu a.current_page1 {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
#menu a.current_page2 {
     background: url(images/bt_page2.png) 0 -25px no-repeat;
}

Conclusion

Pas de quoi faire le kakou, c’est certain ;) mais cette petite fonction PHP remplit bien son office. J’avoue que cette petite merveille de strstr() y est pour beaucoup. Après quelques recherches sur PHP, je me rends compte que ce langage possède un nombre extraordinaire de fonctions pour traiter les chaines de caractères qu’on dirait du perl !

Si de votre côté vous avez des petites fonctions PHP ou Javascript liées aux CSS qui prennent la poussière au fond d’un dossier, n’hésitez pas à leur donner une seconde vie en en faisant profiter les autres :)

Stay tuned and mind the gap!

Note du 10/11/2007 : Afin d’éviter d’éventuels soucis de cascade CSS dues à la priorité des ID sur les classes, j’ai modifié les styles comme suit : #menu ul li a#index {…} est remplacé par a#index {…} (ce qui est largement suffisant) et je laisse #menu a.current_index {…} de manière à ce que le poids de la classe .current_index {…} soit plus important que a#index {…}.

Voici un exemple très moche mais fonctionnel pour illustrer ce tutoriel. Téléchargez le fichier zip de l’exemple.

Articles sur le même sujet

Exercice de style CSS et HTML : table vs div

Bruno Bichet — Thu, 26 Oct 2006 02:12:17 +0000

L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne ;) Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un œil sur la page d’accueil et de moderniser le gabarit HTML.

Note : L’intégration du gabarit live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne.

La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple la colonne de gauche est composée de

Dernières images

…On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro ;)

Dis papa, racontes-moi encore les tableaux ! »

Articles sur le même sujet

Quelques notes sur XHTML et CSS, au fil de l’eau…

Bruno Bichet — Thu, 12 Oct 2006 02:00:50 +0000

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide téléologique concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100^ème jour depuis la mise en ligne de css4design, une sorte de ~~medley~~ mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

… ou comment sortir « téléologique¹ » du même chapô que « mashup² »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages minimalistes de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}

La position: relative n’est pas indispensable pour le centrage, mais permet d’initialiser les valeurs top et left à partir du point situé en haut et à gauche de notre container, et non plus à partir du coin supérieur gauche de la fenêtre du navigateur, comme c’est le cas par défaut, avec bien sûr, des différences entre les navigateurs.

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple

La structure que l’on rencontre le plus souvent sur le web est composée d’un titre h1 suivi des différents niveaux de sous-titre h2, h3… le tout, agrémenté de texte p et d’image img. Notez que pour les images, on peut mettre la balise img dans la même balise p que le texte, ou dans sa propre balise p. On divisera ensuite (en fonction de la nature du contenu) le document en plusieurs parties avec les balises div dont c’est précisément la fonction.

Si l’on ajoute la gestion des colonnes, on obtient une structure qui ressemble à la plupart des pages que l’on trouve à portée de clic ; les différences étant souvent le fruit d’un travail sur l’identité visuelle et du soin apporté à la réalisation-intégration des divers éléments composant la page.

MAJ : Lire Conception dans le navigateur avec HTML5 & CSS3 sur le marquage structurel d’une page web avec HTML5.

Des colonnes avec float

Pour en revenir aux colonnes, la propriété float, associée aux valeurs right ou left, donnera rapidement forme à votre document, à condition de ne pas oublier le clear: right, left ou both pour ajouter un élément de type pied de page que nous voudrons voir, comme son nom l’indique, à la fin de notre page, et ce, quelque soit la hauteur des contenus respectifs de nos deux colonnes !

C’est vrai qu’Internet Explorer n’a pas toujours besoin que l’on explicite un clear après un float, contrairement aux navigateurs respectant les spécifications du W3C comme Firefox ou Opera. L’esprit humain non plus, puisqu’il faut souvent passer de ~~bons~~ longs moments avec les spécifications pour s’en convaincre. Quoiqu’il en soit, souvenez-vous que si votre div est placée correctement dans un navigateur et pas dans l’autre, c’est souvent la faute à float ;)

Manipulez, il en restera toujours quelque chose

Pour mieux observer ce phénonème, je vous propose quelques manipulations à faire chez vous sur un exemple de positionnement avec float. Tout est précisé dans le code source, mais pour les jedi, un résumé devrait suffire :

Dans #container, enlevez les commentaires autour de width: 900px;, réaffichez cette page dans IE6 et FF et observez le déplacement du footer dans FF.
Puis, dans #footer, enlevez délicatement les commentaires autour de clear: both, et réaffichez cette page dans IE6 et FF. Que s’est-il passé avec le footer ?
Pour terminer, remettez tout comme au début, et ajoutez du texte dans la sidebar. Que se passe-t-il ? Que faut-il faire ?

Tant que nous somme dans la float, et les colonnes, j’en profite pour vous proposer un autre exemple de mise en page sur une ou deux colonnes.

Pour la boite, vous prendrez quel modèle ?

Dès que l’on applique une largeur à un élément de type block, on prend le risque de tomber dans le maelström des différents modes de calcul concernant le modèle de boite : Internet Explorer a une façon bien à lui de mettre border, padding et zone de contenu dans le même sac, contrairement au modèle standard qui dissocie bien chaque élément dans le calcul final de la boite.

Grosso modo, un bloc de 250px de large avec un padding de 20px et un border de 5px donneront 250 + 20 + 20 + 5 + 5 = 300 pixels dans le modèle standard, tandis que cette valeur sera ramenée à 250 pixels sur IE, puisque la bordure et la marge intérieure seront assimilés à la zone de contenu :(

Ok, quelques mots sur le DocType switching… Ou comment forcer l’une ou l’autre interprétation des dimensions du modèle de boite. Pour résumer la fin de l’article d’Openweb cité plus haut, la plupart des navigateurs modernes (si si, même IE6) basculeront dans le modèle de boite standard si une DTD XHTML (strict, transitional ou frameset) est spécifiée dans l’en-tête de la page. Sauf pour IE6 (faut pas trop rêver non plus…) qui rebascule dans son modèle de boite propriétaire dès qu’il voit le méchant prologue XML…

Il existe de nombreux contournements (hacks) plus ou moins funky pour régler ce problème de compatibilité des modèles de boite. Pour ma part, je m’en tiens à une ligne de conduite simple : j’applique le padding aux éléments enfants du bloc qui possède une propriété width. Lorsque celà n’est pas possible, je spécifie une feuille de style pour IE en utilisant les commentaires conditionnels.

Si votre page contient des formulaires, je vous invite à lire ce billet sur la conception de formulaires sans tableau qui a gardé toute sa fraicheur ;) Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de saisies, il donne un peu de lui-même : respectons-le !

Et comme vous voudrez certainement mettre de beaux visuels en fond de page, je vous propose ce billet sur l’utilisation, non pas d’un, mais de deux background pour enjoliver votre fond de page !

Il n’y a pas que les div dans la vie

Après la mise au point du squelette de notre page, nous allons nous occuper des autres éléments qui nous aideront à structurer le contenu. J’ai évoqué rapidement la balise h1 et ses petites soeurs h2…, h6 qui doivent être utilisées pour les titres et sous-titres de vos documents.

Par exemple, plutôt qu’un div id= »titre1″, on stylera la balise h1 pour le plus grand plaisir des moteurs de recherches et navigateurs alternatifs ! La balise p encadre les paragraphes ; blockquote sert lorsqu’on cite une portion conséquente de texte.

A noter que cette balise peut contenir d’autres éléments de type bloc, comme p ou table, mais la réciproque n’est pas vraie. Pour mieux connaître les mœurs subtiles des balises HTML, j’abuse de la bande passante de gotapi.com.

Lorsque la structure du contenu implique une idée de liste, le mieux, c’est encore, d’employer les listes ordonnées ol ou non ordonnées ul avec leur cohorte de li. Ces listes sont très pratiques et permettent de nombreuses fantaisies en matière de CSS.

Mais on oublie trop souvent les listes de définitions qui peuvent rendre de grands services, comme présenter la chronologie de ma loupanthère, par exemple… Le sujet des listes de définitions est inépuisable, ce qui n’est pas mon cas : je vous ai donc laissé quelques liens à suivre dans la linkographie.

Les éléments en ligne c’est pour aujourd’hui ou pour demain ?

Après sur survol des éléments de type block, il nous reste tout juste assez de temps pour jeter un oeil sur les éléments en ligne. J’utilise assez souvent les éléments suivants : samp pour spécifier les échantillons de code ; em pour l’emphase (en gros, ça met de l’italique) ; strong pour marquer un renforcement du texte (en gros, ça met du gras), q pour les citations courtes mais pas forcément vulgaires…, a pour les liens, etc.

Bon, c’est comme le café, je crois que ce n’est pas la peine d’en rajouter. Et puis vous êtes sûrement déjà parti faire un tour sur gotapi ou pire, sur bashfr où vous trouverez des vrais morceaux d’humour, pas comme ici :)

Et vous, quelles sont vos balises préférées ?

Linkographie :

Maxdesign: Sans doute l’un des meilleurs site au monde concernant les 1001 façons de styler les listes ;)
Selfhtml.org: Tout sur le formatage des listes.
Pompage: L’essentiel et un peu plus sur les listes de définitions.
Alsacreations: Utilisez les listes de définition pour structurer vos menus déroulants.
Giminik: Liste des attributs et événements associés à la balise dl

Articles sur le même sujet

Background CSS avec motifs double-fond et effet d’opacité multiple sur le texte et les images

Bruno Bichet — Sat, 29 Jul 2006 14:09:24 +0000

La création de motifs répétés est un plaisir de chaque instant dont je ne me lasse pas. Quelle joie de remplir un grand espace avec une image de quelques pixels… Oui, mais c’est parfois un peu… trop répétitif, tout ça. Et si nous faisions en sorte d’avoir un motif un peu plus riche pour le haut de la page, tandis qu’un autre remplirait le reste de la fenêtre en étant raccord avec le premier ?

Avant d’aller plus loin dans la lecture du billet, je vous propose de voir l’exemple finalisé. Profitez-en pour jeter un œil sur le code source.

Raccorder les deux motifs

Pour réaliser cet effet double-fond, nous avons besoin du motif bgFullContainer.gif, qui ne se répètera qu’en x dans une div ayant une largeur de 100%et une hauteur égale à celle de l’image.Notre deuxième motif bgFullBody.gif se répètera en x et en y en arrière-plan de la balise body. Dans le cas qui nous occupe, la première image a une taille de 12 x 600 pixels, tandis que la deuxième fait 12 x 12 pixels de côté.

Jusqu’ici, nous avons placé l’image bgFullBody.gif dans la balise body :

body {
     background: url(images/bgFullBody.gif);
}

Juste après le body, notre plaçons bgFullContainer.gif dans la div identifiée par fullContainer. Le fond de cette div se place naturellement au-dessus de celui du body :

#fullContainer {
     height: 600px;
     background: url(images/bgFullContainer.gif) 6px 0 repeat-x;
}

Pour éviter le décalage des motifs, il faut tester différentes valeurs pour positionner le background. Il apparait que 6 pixels vers la droite permettent l’ajustement. Il eût été tout à fait possible de décaler le motif de 6 pixels vers le haut en utilisant 0 -6px. Mais sous Safari, la partie supérieure masquée réapparait en bas ! Cette incursion des univers parallèles dans notre design est du plus mauvais effet !

L’effet de transparence du titre

Tout allait très bien jusqu’au moment où j’ai voulu utiliser mon beau motif comme fond pour un titre. J’ai d’abord utilisé une image composée du même motif que le body. Malheureusement, l’alignement des zébrures du titre avec celles du fond changeait en fonction de la taille de la fenêtre.

J’ai pensé ensuite aux effets de tranparence détaillés dans mon précédent billet. J’ai donc décidé de créer l’image topTrans.gif en jouant sur les couleurs pour anticiper le résultat en fonction de l’opacité à venir. J’ai appliqué ensuite un simple background-color à #bgTitle. Il ne restait plus qu’à ajouter l’opacité adéquate aux balises idoines, et là, miracle ! le fond zébré apparait bien par transparence sur les éléments du titre.

Pour finir, j’ai appliqué une dernière couche d’opacité au container pour adoucir le texte. Pourquoi ne pas l’avoir appliquée sur la balise p ? Et bien, curieusement, lors de mes tests, IE6 n’a pas daigné appliquer l’opacité demandée. Probablement une question d’héritage ou de cascade…

Pour quels navigateurs ?

Avec du temps et de l’énergie, cette page s’affiche correctement dans les navigateurs modernes sur Windows et MacOSX. Par navigateur moderne, je parle de Firefox, Opera et Internet Explorer 6⁽¹⁾ sous Windows, et de Safari, Camino, Opera et Firefox sur Mac.

⁽¹⁾ Moderne n’est peut-être pas le qualificatif le plus approprié ;)

Linkographie

Emob: Excellent tutorial vidéo sur la création de motif. Très bien fait, va à l’essentiel. Revenez vite ;)
Site du zéro.com: Tutorial très sympa sur la conception de motif. Pas à pas, l’auteur vous prend par la main ;)
Dur comme faire: Article très instructif sur la conception du thème Old metal paru sur css zen garden.
OpenWeb: Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?

Articles sur le même sujet

Trucs et astuces CSS

Bruno Bichet — Wed, 21 Jun 2006 00:30:03 +0000

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

Document XHTML pour partir de bonnes bases :


    
        
            
            
            Un titre explicite contenant les mots-clés de la page

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

Lire le billet consacré aux commentaires conditionnels.

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

La deuxième ligne est une propriété spécifique à Mozilla. Solution trouvée sur http://web.covertprestige.info/test/…

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }