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

Ce titre de premier niveau mène la danse et pourra inspirer l’intitulé de l’id de la section. Plus que jamais, l’intégrateur web devra avoir une solide culture générale. Il lui faudra tout au moins s’intéresser suffisamment aux contenus qu’il met en page pour savoir où commencent et où finissent les idées de ses clients !

Durant mes tests, j’ai beaucoup hésité sur l’utilisation de la balise header. Celle que l’on pensait forcément prévue pour prendre la place de notre div id="header" ne s’est pas vu attribuée ce rôle de manière formelle et univoque dans les spécifications. Elle pourra servir dans plusieurs contextes en conjonction (ou pas) avec une balise footer ; mais pas le footer que l’on place généralement tout en bas de la page page… Dans les faits, l’utilisation des balises header et footer est à géométrie variable.

Modèles de document HTML5

HTML5 introduit la notion de Sectioning Content. Pour faire simple, une section regroupe un ensemble de titres de plusieurs niveaux formant une unité logico-sémantique. Lorsqu’un deuxième h1 est nécessaire, c’est qu’on se trouve dans une autre «section».  Les sections sont implicites et suivent la hiérarchie des balises h1, h2, etc. mais on peut les formaliser avec les balises article, aside, nav ou… section.

La première remarque qui m’est venue à l’esprit en voyant la liste des balises ayant le statut de «section», c’est qu’il manquait les balises header et footer !

Les éléments HTML se retrouvent dans zéro ou plusieurs catégories en fonction de leurs caractéristiques.

Le modèle de document HTML5 se compose de : metadata content, flow content, sectioning content, heading content, phrasing content, embedded content et interactive content. (Source : W3C)

Pourquoi les balises header et footer n’en font pas partie ?

Très bonne question. La premier élément de réponse tient certainement à la nature équivoque de ces balises : elles peuvent se trouver à l’intérieur des sections introduites par body, article, nav, aside ou section pour regrouper le titre (ou les titres avec hgroup) et des informations complémentaires sur le contenu (date, auteur, etc.).

La deuxième, c’est peut-être pour les utiliser afin de regrouper des informations dans l’en-tête et le pied de page du site, sans les couper des autres informations. De cette manière, les informations contenues dans header et footer concernent toute la page (voire tout le site web), ce qui est plus logique.

Reste le Sectioning implicite. Est-ce à dire qu’il faut éviter d’utiliser des niveaux de titre dans notre en-tête et notre pied de page ?

Articles sur le même sujet

• HTML5 — Et si on évitait la balise «section» dans une balise «article» ?
• The HTML Framework Project | Phase 1.1 — définir
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Quelques notes — Programme de formation HTML & CSS
• 390 ressources Javascript & jQuery

C’est quoi un framework HTML, au juste ?

Un Framework HTML devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des maquettes différentes. C’est aussi simple que ça : un jeu de fichiers et de répertoires pour amorcer le travail dans la joie et la bonne humeur ;)

Sur quelles bases construire ce framework ?

S’assurer que le Framework HTML est conforme avec les points suivants :

• Éviter les tables pour la présentation,
• Séparer le fond et la forme,
• Réserver la partie présentation aux CSS,
• Prendre en considération la « sémantique » des balises HTML,
• Intégrer des noms de classes signifiants,
• Valider en accord avec les spécifications du W3C.

Un mot d’ordre : la flexibilité

Pour que ce framework HTML soit utile aux développeurs, il faudra :

• Ne pas gêner les web designers (les graphistes doivent pouvoir laisser libre-court à leur créativité),
• S’adapter aux contraintes propres d’un projet (être un plus, pas un obstacle),
• Rester léger en excluant les fonctionnalités superflues,
• Être extensible pour faire face aux besoins futurs.

Participer à la discussion

On parle beaucoup (ou pas) de HTML5. J’ai donc lancé l’idée de bâtir les fondations du framework sur la base des spécifications du HTML5, notamment pour la partie structure en accord avec la partie sections du W3C :

• section — Chapitres, onglets des menu, etc. La page d’accueil d’un site web pourrait être découpée en sections : introduction, news et informations de contact.
• nav — Menu principal ou secondaire d’un site web.
• article — Partie indépendante d’une page, d’un document ou d’un site : contribution sur un forum, article de magazine, billet de blog, commentaire, etc.
• aside — Barre latérale ou contenu adjacent,
• header — Regroupement de sections ou de balises h1, h2, etc.
• footer — Pied de page d’une section,
• address — Informations de contact, idéalement placées dans le footer.

Dans le framework HTML, ces éléments pourraient se traduire par :

<div></div>
<div class="article"></div>
<p class="aside">

Les autres éléments de HTML4 étant utilisés — comme d’habitude — de manière à coller au plus près du sens véhiculé par le contenu.

Pour conclure

L’avantage de calquer les id et les class sur les balises prévues par HTML5, c’est de voir loin tout en s’adaptant dès maintenant aux nouvelles habitudes de structuration des contenus avec HTML5. Et comme le suggère jdgraffam il est envisageable que le framework définisse un plan pour passer du framework au HTML 5 quand ce dernier sera pris en compte par les navigateurs, tout en restant rétro-compatible !

Faites tourner et n’hésitez pas à partager ce que ce projet vous inspire. Si vous avez des idées et quelques connaissances en anglais, je vous invite à commenter ce billet, ou ici, si vous êtes plus à l’aise en français ;)

Articles sur le même sujet

• HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»
• HTML5 — Et si on évitait la balise «section» dans une balise «article» ?
• HTML5 — Une orientation encore trop « littéraire » et pas assez « web »
• Framework HTML : Bootstrap, Fondation et HTML5 Boilerplate
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

… 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 ?

Parmi les nombreuses manières permettant d’obtenir un pied de page qui se cale systématiquement en bas de page lorsque le contenu n’est pas suffisant, j’ai retenu deux méthodes intéressantes. C’est-à-dire n’utilisant pas trop de hacks afin d’optimiser la lisibilité et la maintenabilité du code.

• La première, propose d’utiliser uniquement CSS : la propriété min-height appliquée au contenu, un padding-bottom pour l’élément avant le footer, et pour ce dernier, un margin-top de la même valeur, un commentaire conditionnel pour Internet Explorer, et c’est parti ! Sauf, qu’après des tests intensifs sur MacOSX et Windows, il s’avère que cette solution ne donne pas entièrement satisfaction sur tout les navigateurs (Opera Window et MacOSX et Safari), ce que je trouve gênant.
• La deuxième, est une solution Javascript utilisant le DOM de façon particulièrement élégante. Le footer se trouve bien en bas de page, mais si l’on veut que la couleur de fond du contenu se propage jusqu’au pied de page, il nous faut trouver autre chose…

Après quelques hésitations, j’ai trouvé la voie en associant les deux méthodes : la fonction Javascript pour le placement du footer, et la propriété min-height ainsi que le commentaire conditionnel pour IE afin de gérer la couleur de fond.En prime, ce mix rend inutile l’ajout de #lastelement que je ne trouvais pas particulièrement élégant. Dans Opera et Firefox, le footer ne se cale pas en temps réel contrairement à Internet Explorer et Safari, ce qui n’est pas particulièrement gênant.

Je vous laisse avec la démo du pied de page toujours en bas.

Télécharger le fichier .html ou .php et les images

Linkographie pour des pieds de page positionnés

http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html

http://www.covertprestige.info/ressources

L’exemple de la première méthode utilisant uniquement les CSS, ainsi que d’autres astuces concernant la conception de site à l’aide des feuilles de style.

http://pompage.net/pompe/pieds/

Cet article propose d’étudier les méthodes pour positionner des pieds de page en respectant les standards.

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Utilisez le DOM et Javascript comme un chef
• Menu à onglets avec javascript et 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

• slideToggle() et hover() avec jQuery 1.1.2
• Mettre en évidence le lien de la page en cours avec currentPage()
• Permuter une classe CSS avec une autre avec toogleClass()
• Ouvre et centre un popup en une seule opération depuis la page appellante avec popup()
• Permutez deux classes sur un événement avec multiClass()
• footer calé en bas de page avec getWindowHeight() et setFooter()
• Envoyer un formulaire avec la touche Entrée (Quand le bouton n’est pas de type submit)

slideToggle() et hover() avec jQuery 1.1.2

Si vous voulez afficher-masquer un ensemble d’éléments ce code est fait pour vous. La ligne $(‘#links ul:lt(3)’).show(); permet d’atteindre les trois premières balises ul contenues dans la div#links. Les deux lignes suivantes appliquent respectivement : un comportemant onclick sur les titres h2, sur lequel la méthode slideToggle() est utilisée pour afficher ou masquer l’élément qui les suit :

$(document).ready(function() {
    $('#links ul, #calendar table, #archives ul').hide();
    $('#links ul:lt(3)').show();
    $('#links h3, #calendar h2, #archives h2, #categories h2').css('cursor','pointer').click(function(){
    $(this).next().slideToggle('slow');
    });
 });

$(document).ready(function() {
    $('#calendar h2, #archives h2, #categories h2').hover(function() {
         $(this).css('border-bottom','1px dotted #065f00').css('color','#065f00');
        },function() {
        $(this).css('color','#9E0050');
    });
 });

Plus d’informations sur la librairie jQuery.

Mettre en évidence le lien de la page en cours

Une fois que l’on a fait un effet de survol sur un bouton en utilisant la pseudo-classe :hover, on aimerait bien faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Suivez le tutoriel associé à cette fonction PHP

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

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

toggleClass()

Permet de permuter une classe avec une autre. Très pratique pour afficher-masquer un balise DIV ou autre :

function toggleClass(element,class1,class2) {
    elt = document.getElementById(element);
        if (elt.className == class1) {
        elt.className = class2;
        }
        else if (elt.className == class2) {
        elt.className = class1;
    }
}

popup()

Ouvre et centre une fenêtre popup en une seule opération depuis la page appelante. Trouvé sur wiki.media.box

function popup(l,h,url) {
    hauteur=Math.round((screen.availHeight-h)/2);
    largeur=Math.round((screen.availWidth-l)/2);
    window.open(url, "video", "toolbar=0,location=0,directories=0,status=0, scrollbars=0,resizable=0,menubar=0,top="+hauteur+",left="+largeur+",width="+l+",height="+h);
}

multiClass()

Permute deux classes sur un évènement. Voici l’exemple fonctionnel car une explication complète serait longue et fastidieuse :)

MAJ du 5 juillet. L’explication longue et fastidieuse ne l’était pas autant que ça ;) Voici le détail de la fonction multiClass.

function multiClass(eltId) {
    arrLinkId = new Array('_0','_1','_2','_3');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
    for (i=0; i<intNbLinkElt; i++) {
        strContent = "menu"+arrLinkId[i];
        if ( arrLinkId[i] == eltId ) {
            document.getElementById(arrLinkId[i]).className = arrClassLink[0];          document.getElementById(strContent).className = 'on content';
        } else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];          document.getElementById(strContent).className = 'off content';
        }
    }
}

getWindowHeight() et setFooter()

Ces deux fonctions permettent d’obtenir la hauteur de la fenêtre du navigateur pour afficher un footer calé en bas de page.

function getWindowHeight() {
    var windowHeight = 0;
    if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}


function setFooter() {
    if (document.getElementById) {
        var windowHeight = getWindowHeight();
        if (windowHeight > 0) {
            var contentHeight = document.getElementById('content').offsetHeight;
            var footerElement = document.getElementById('footer');
            var footerHeight  = footerElement.offsetHeight;
            if (windowHeight - (contentHeight + footerHeight) >= 0) {
                footerElement.style.position = 'relative';
                footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';           } else {
                footerElement.style.position = 'static';
            }
        }
    }
}

window.onload = function() {
    setFooter();
}
window.onresize = function() {
    setFooter();
}

Envoyer un formulaire avec la touche Entrée

(Quand le bouton n’est pas de type submit)

function submitForm(e) {
var code = e.keyCode;
if (code==13)
document.getElementById('formulaire').submit();
}
//onkeyup="submitForm(event) dans le formulaire<h3 class='related_post_title'>Articles sur le même sujet</h3><ul class='related_post'><li><a href='http://css.4design.tl/menu-a-onglets-tabs-idtabs-ou-domtab' title='Menu à onglets (tabs) &#8212; idTabs ou domTab ?'>Menu à onglets (tabs) &#8212; idTabs ou domTab ?</a></li><li><a href='http://css.4design.tl/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &amp; jQuery</a></li><li><a href='http://css.4design.tl/menu-html-et-css-portes-coulissantes-et-item-current-en-php' title='Menu HTML et CSS, sliding doors et item current en PHP'>Menu HTML et CSS, sliding doors et item current en PHP</a></li><li><a href='http://css.4design.tl/menu-a-onglet-avec-javascript-et-css' title='Menu à onglets avec javascript et css'>Menu à onglets avec javascript et css</a></li><li><a href='http://css.4design.tl/le-petit-journal-du-web-php-wordpress-javascript-css-ruby-responsive-webdesign' title='Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign'>Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign</a></li></ul>