Tout est fait pour être le plus «visuel» possible et chaque modification est répercutée immédiatement dans un bloc d’exemple. Il suffit de cliquer sur Get the Code pour pouvoir choisir les préfixes constructeurs pour IE, Mozilla, Webkit, Opera, et bien sûr la propriété par défaut. En ce qui concerne IE, le préfixe est remplacé par les propriétés filter adequates.

Merci à @ThierryRoget (roget.biz) pour la trouvaille o/

Articles sur le même sujet

• CSS3 pour les web designers : voyez grand, codez petit !
• Editeur de dégradés CSS3 à la mode de Photoshop
• Le petit journal permanent de CSS3 — 100+ ressources pour commencer
• Générateur de coins arrondis avec border-radius
• 390 ressources Javascript & jQuery

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

• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Trucs et astuces CSS
• 390 ressources Javascript & jQuery
• Quelques notes de lecture sur Le Graphisme au XXe siècle

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

<h1>
    <a href="http://jqueryfordesigners.com">
        <span>jQuery for Designers</span>
    </a>
</h1>

#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

<a href="/"><h1><span>Klout is </span>the Standard for Influence</h1></a>

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)

<div id="top">
    <h1><a href="/">ici &amp; ailleurs</a></h1>
</div>

#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

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" />
    </a>
    <span class="alt-logo">W3C</span>
</h1>

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

<h1>Web Designer & Front-end Developer - Soh Tanaka</h1>

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 :

<h1>
    <span>Blog & Blues</span>
</h1>

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

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

• Comment fonctionne la propriété CSS z-index ?
• Remplacement d’images : halte au display none !
• Mettre un titre en image et rester accessible
• Using background-image to replace text
• Revised Image Replacement

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Nouvelle méthode de remplacement d’image en CSS
• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Styler vos champs de formulaires de recherche avec CSS

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 XHTML et CSS, au fil de l'eau…
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 8 techniques CSS pour remplacer du texte HTML par une image
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu HTML et CSS, sliding doors et item current en PHP

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

• Menu HTML et CSS, sliding doors et item current en PHP
• Trucs et astuces CSS
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch

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 :

1. La taille de la capture d’écran privilégie la surface de texte et minimise l’impact des hachures,
2. Les hachures n’apparaissent que sur le côté gauche,
3. 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

• stripegenerator
• bgmaker
• stripemania
• bgmaker.ventdaval
• tartanmaker

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

• CSS3 Generator : éditeur de CSS3
• Notes de lecture à propos de « Stratégie de contenu web »
• Quelques notes sur les éléments graphiques du webdesign
• 8 techniques CSS pour remplacer du texte HTML par une image
• Webdesign, lisibilité, typographie et rédaction web

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.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

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

<?php
function currentPage($strPage) {
  if (strstr($_SERVER['PHP_SELF'], $strPage)) {
     echo 'class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>

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

<div id="menu">
     <ul>
         <li><a <?php currentPage('index') ?>id="accueil" href="index.php" >Accueil</a></li>
         <li><a <?php currentPage('page1') ?>id="page1" href="page1.php" >page1</a></li>
         <li><a <?php currentPage('page2') ?>id="page2" href="page2.php" >page2</a></li>
     </ul>
</div>

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

<div id="menu">
     <ul>
         <li><a id="accueil" href="index.php">Accueil</a></li>
         <li><a class="current_page1" id="page1" href="page1.php" >page1</a></li>
         <li><a id="page2" href="page2.php">page2</a></li>
     </ul>
</div>

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

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu à onglets avec javascript et css
• CSS et portes coulissantes pour un effet de zoom :hover
• Améliorations cosmétiques et ergonomiques sur ce blog

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 <div class= »bloc » style= »width: 145px; »><div class= »titre_bloc »> Dernières images </div><div style= »max-width: 135px; » class= »cadrimage »>…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 !

Si vous avez l’habitude d’utiliser les CSS pour la conception de vos design web, vous n’aurez pas besoin d’approfondir le code d’origine et vous pourrez vous lancer bille en tête sur votre Dreamweaver Notepad préféré pour traduire en CSS cette mise en pages en tableau ;)

Mais comme ce qui va sans dire va mieux en le disant, je vous donne un bref aperçu de ce que l’on peut y trouver. La page contient huit tableaux, dont trois pour délimiter les zones principales :

1. l’en-tête, qui contient :
   • une bannière en image,
   • et le menu principal.
2. le contenu, qui englobe les deux colonnes; contient :
   • une colonne étroite pour le menu secondaire et autres informations,
   • et le contenu principal.
3. et le pied de page.

La zone de contenu est elle-même délimitée par deux td : un pour la colonne de gauche et un pour le contenu à droite.

Le premier td est composé d’une première partie div#ex1 pour le menu, suivi de div.bloc contenant plusieurs balises table pour la météo, et d’un autre div.bloc pour l’affichage des images en bas de la colonne. Si je garde la météo sous forme de tableaux (pas la peine de jeter le bébé avec l’eau du bain), je supprimerai tous les styles en ligne pour les placer dans styles.css.

Le deuxième td est dédié au contenu principal où l’on trouve quatre blocs d’information :

1. Un message de bienvenue,
2. Les dernières nouvelles de la vie de la base nautique,
3. Les informations nécessaires pour se rendre sur les lieux,
4. Quelques liens utiles.

Maintenant que l’on y voit un peu plus clair dans ces tableaux, la structure de la mise en pages CSS s’impose d’elle-même :

1. Une div#container englobera l’ensemble de la page,
2. Une div#header pour la bannière et le menu,
3. Deux div#main et div#sidebar pour définir les deux colonnes de contenu,
4. Un div#footer pour terminer.

Comment j’ai organisé mes feuilles de style CSS

J’ai créé une feuille de style principale styles.css pour la présentation, une autre pour la structure globale layout.css et une dernière layout-right.css pour permuter rapidement la sidebar sur la droite en supprimant les commentaires sur la règle /@import « layout-right.css »;/ du fichier styles.css.

Les deux dernières sont importées dans l’ordre dans la première. Les plus perspicaces d’entre vous auront sans doute remarqué l’existence de layout-bg.css et de layout-bg-right.css dont je parlerai plus loin.

Comme d’habitude, une feuille de style accessible uniquement pour Internet Explorer via les commentaires conditionnels est mise en place. Pour le coup, elle ne sert pas à grand chose (une seule déclaration) et j’aurais certainement mieux fait de placer un petit hack de derrière les fagots…

Mais la paresse est mauvaise conseillère. Comme la ceinture de sécurité, il faut mettre les commentaires conditionnels y compris pour les trajets les plus courts ;) Je ne m’attarde pas sur styles.css, sinon pour préciser que cette feuille de style importe toutes les autres.

Le fichier layout.css définit la structure de la page

/* layout.css */


* { /* Plus d'information sur la remise à zéro des styles par défaut des balises HTML */
    margin: 0;
    padding: 0;
}
#container {
    position: relative;
    width: 817px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid #0E419A;
    background-color: #2677B9; }
#header {
    width: 817px;
    height: 154px;
    background: url(images/bandeau.jpg) no-repeat;
}
#main {
    text-align: justify;
    line-height: 1.75em;
    width: 620px;
    min-height: 1034px;     float: right;
    padding: 1em;
    background-color: #D1D9EC;
    background: url(images/fond_gros_bloc.jpg);
}
#footer {
    background-color: #0E419A;
    clear: both;
}
#sidebar {
    width: 151px;
    float: left;
}

Evidemment, celà fonctionne parce que la hauteur de la sidebar est connue et qu’elle ne change pas dans les pages intérieures du site en question.

Quelques mots à propos des colonnes

Le traditionnel colonage est assuré par le non moins traditionnel float: left pour la sidebar et float: right pour #main, accompagné respectivement par les valeurs width: 151px et width: 620px. Le fond de la zone principale est assuré par background: url(images/fond_gros_bloc.jpg), mais on peut se contenter de background-color: #D1D9EC qui reprend la couleur de body. Le footer voit quant à lui sa position stabilisée grâce à clear: both.

layout-right.css : ma sidebar fait fait, c’qui lui plait plait plait ;)

Concernant la structure globale, Il reste à gérer le déplacement de la sidebar sur la gauche ou sur la droite selon l’humeur du jour. Ce qui se réalise simplement avec la déclaration suivante :

 /* layout-right.css */
#main {
    float: left;
}

layout-bg.css si la hauteur de la sidebar varie…

Dans ce cas, la méthode utilisée plus haut ne donne plus les résultats escomptés. Pour que les couleurs de la sidebar et de #main se calent sur le footer indépendamment de leurs contenus, j’utilise une image de fond de quelques pixels de hauteur et d’une largeur égale au #container. Soit une image de 817px de large pour 4px de haut qui se répète en y. Cette image est composée d’une zone de 151px de large pour simuler la sidebar, et le reste rempli avec la couleur de #main, ici en vert clair pour les tests. Cette feuille de style ressemble beaucoup à layout.css à l’exception du background de #container et de la suppression de la propriété min-height: 1034px; qui ne sert plus à rien.

…layout-bg-right.css pour déplacer la sidebar comme on veut

Même avec un background en image, on peut se débrouiller pour placer cette sidebar à droite. Il suffit d’indiquer une rotation de la zone de travail de 180° dans Photoshop et d’enregistrer cette nouvelle image sous bgContainer-right.png, puis créer une nouvelle feuille de style layout-bg-right.css pour conserver un maximum de modularité :

/* layout-bg-right.css */


#container {
    background: url(images/bgContainer-right.png) repeat-y;
}
#main {
    float: left;
}

Comment bien utiliser toutes ces CSS

Le fichier styles.css contient des règles d’import pour quatre feuilles de style dont trois sont placées entre commentaires :

1. @import « layout.css »;
2. /*@import « layout-right.css »;*/
3. /*@import « layout-bg.css »;*/
4. /*@import « layout-bg-right.css »;*/

En l’état nous avons un gabarit CSS avec la sidebar sur la gauche et un contenu possédant une hauteur minimum qui correspond à la hauteur de la barre latérale. Pour placer cette sidebar sur la droite, il suffit d’ôter les commentaires de la ligne 2.

Si vous préférez utiliser les gabarits CSS avec l’image qui se répète en background et la barre latérale à gauche, enlevez les commentaires de la ligne 3, et remettez-en sur les lignes 1 et 2. Pour obtenir la même chose avec la sidebar à droite, décommentez la ligne 4 (les lignes 1 et 2 étant toujours entre commentaires).

Ca fait beaucoup de feuilles de style à gérer. Rappelez-vous qu’elles ne sont là que pour les besoins du tutorial, et qu’en production, vous n’aurez pas besoin de toutes les utiliser : vous saurez si oui ou non vous employez des couleurs de fond avec une image en background ou pas en fonction de vos exigences en matière de hauteur de colonnes

Pour ne pas conclure trop vite

Tout n’est pas parfait, et j’aurais pu aller plus loin dans l’optimisation de la page. Surtout en ce qui concerne les images dont j’aurais pu diminuer le poids. Néanmoins le code HTML passe de 19 kb à 9 kb. Ce qui n’est pas négligeable si on extrapole l’utilisation du gabarit à l’ensemble du site, multiplié par le nombre de visiteur. On peut aussi considérer la clarté du code obtenu et donc envisager la maintenance du site avec plus de sérénité.

Par ailleurs, l’utilisation des CSS à permis de mieux gérer le positionnement des éléments pour obtenir un rendu plus harmonieux. La modularité apportée par la possibilité de changer d’avis pour placer la sidebar est un plus.

Il existe d’autres méthodes pour créer plusieurs colonnes en utilisant une position absolute ou relative par exemple. Outre la linkographie à la fin du billet, vous pouvez jeter un coup d’oeil sur le code source de cet exemple de positionnement d’un bloc en absolu (les vignettes) par rapport à un container en relative.

Rappel : voici mis côte-à-côte les liens vers la mise en pages en CSS et celle en tableaux.

P.S. : Cet exercice m’a également permis de prendre conscience de la foultitude de sites encore structurés avec des tableaux : il y a des cures d’enlightenment qui se perdent

Linkographie :

A propos des tableaux vs CSS

http://pompage.net/pompe/tablevscss/

Traduction par Pompage de l’excellent article et travail de Sergio Villarreal

http://css.alsacreations.com/…

Construire un site sans tableaux

http://css.alsacreations.com/…

Réalisation d’un design complet (XHTML / CSS) en 5 étapes

Gabarit CSS en plusieurs colonnes

http://css.alsacreations.com/…

16 gabarits xhtml/css à tester sans modération

http://www.fairytells.net/gabarit_accessible/…

Gabarit CSS accessible avec 3 colonnes dont la hauteur est indépendante du contenu grâce à javascript et projectseven.

http://webhost.bridgew.edu/etribou/layouts/

Nombreux gabarits en deux ou trois colonnes

Tutoriaux relatifs au positionnement

http://css.maxdesign.com.au/floatutorial/

the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

http://openweb.eu.org/articles/initiation_flux/

Initiation au positionnement en 3 parties : flux et position relative, position float et position absolue et fixe

Quelques CMS

http://www.spip.net/fr

SPIP : d’après Framasoft, il s’agit de l’une des plus grandes réussites logicielles issues de la sphère francophone libre

http://www.framasoft.net/rubrique168.html

Sur cette page, 39 systèmes de publication de contenu passé au crible. Lecture indispensable avant de choisir son CMS (ou pour savoir si vous avez fait le bon choix

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

… 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;
}

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 :

1. 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.
2. 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 ?
3. 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

• Trucs et astuces CSS
• Exercice de style CSS et HTML : table vs div
• Frameworks CSS + Reset CSS : design from scratch
• Design de formulaire HTML avec CSS
• Design CSS : fixe, élastique ou liquide ?

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);
}

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

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

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu HTML et CSS, sliding doors et item current en PHP
• Exercice de style CSS et HTML : table vs div
• Trucs et astuces CSS
• Quelques notes — Programme de formation HTML & CSS