La semaine dernière, je vous avais parlé d’une maquette à réaliser en urgence.
Cette maquette a été acceptée par le client, moyennant quelques petites modifications, mais le prestataire en charge de l’intégration m’est tombée dessus à propos de certaines libertés que j’avais prises d’un point de vue de la mise en page (coucou Myriam ;) ).
Euhhh, dis Aymeric, elle est sympa ta maquette, mais je ne rêve pas, ton pied de page là, il dépasse vers le haut, c’est super chelou à intégrer ça.
Tss tss femme de peu de foi dans les capacités des CSS (on notera au passage que ce pied de page est un mix entre ma proposition de maquette et celle de Myriam, donc je ne suis pas le seul fautif).
Je donne donc à Myriam deux ou trois trucs et astuces pour faciliter ce type d’intégrations (pour une fois que c’est dans ce sens, en général c’est moi qui appelle Myriam à l’aide pour des problèmes de php).
Donc, voici l’exercice.
Un pied de page qui dépasse sur le contenu de la page
- Objectif : à la fin de cet exercice, vous serez, normalement, capables, de positionner des éléments graphiques inclus dans la partie appelée « pied de page » de façon à ce qu’ils se superposent avec des contenus présents dans des éléments supérieurs de la page (voir image fournie pour une meilleure visualisation).
- Niveau de difficulté : complexe
- Difficulté détectée : Mise en page en trois colonnes, la colonne de gauche à un fond de couleur.
- Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement et leurs interactions est nécessaire (des sources sont fournies en bas de page).
- Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
- Informations complémentaires : Le design à une largeur fixe, les textes des colonnes visibles dans l’image jointe ne sont là qu’a titre indicatif, il faut, au final, que le texte du contenu central soit clairement positionné comme précisé sur le visuel. Comme toujours, le code html et CSS doivent être valides, c’est le minimum, je vous laisse tout liberté au niveau de contraintes supplémentaires si vous en avez envie. Bien sur au minimum compatible avec les principaux navigateurs du marché.
L’image
Tout est dans l’image, une version à taille réelle est récupérable en cliquant sur l’image affichée.
Tout est réalisable à partir de cette image, si le besoin s’en fait sentir, je vous fournirai les fichiers graphiques source de chaque élément, mais ce n’est pas vraiment le fond du problème.
Je vous demande donc, de fournir un fichier html, un fichier css (ou le css intégré dans le fichier html), ainsi que les images découpées, et de si possible, préciser vos choix techniques.
Les sources (pour rappel) :
- Balises HTML : http://www.laurent-bernat.com/
- Balises (X)HTML : http://www.siteduzero.com/
- Propriétés CSS : http://www.siteduzero.com/
- positionnement des éléments via CSS : http://css.alsacreations.com/
Voila, bon exercice et bon courage à vous.
24 réponses à “Exercice CSS : un pied de page qui dépasse sur le contenu”
Salut,
sur ton image le raccord visuel pied/colonne droite est sur fond blanc. Par contre le raccord pied/colonne gauche est bien sur fond de couleur.
Dans l’énoncé pourtant tu dis « la colonne droite a un fond de couleur »
ya quelque chose qui m’échappe.
Moi j’utiliserais bien un tableau à trois colonnes. :D
Ça fait longtemps que j’ai pas utilisé de tableau de mise en forme, ça me démange un peu. ;)
Sinon, on peut se permettre de ne pas reproduire tous les éléments, pour gagner du temps ? Genre le « Qui sommes-nous / Mentions légales » en bas à droite (flemme de faire un machin arrondi extensible), l’arrondi du bloc de droite, et l’encadré de la colonne de gauche ?
@clb56 : tu n’as rien vu, rien entendu… c’est corrigé.
à Florent,
je vois que tu n’es pas au courant du dernier concept structurant du web2.0…
… ça s’appelle la « contagion vendredÿenne » … Si, si …
Pour faire court ça donne :
Les tableaux c’est LE MAL !!!!!!!
:-))
–> Allez zao
(zao c’est dehors en breton … … enfin tt ça pour dire me exit)
@Florent : tout comme tu le sens, je ne suis pas un ayatollah des standards, j’ai vu des pages ou le layout général était structuré en tableau qui rendraient bien des points aux soit-disant mises en page faussement appelées « sémantiques » (parce que bon hein, on parle quand même de html là ;) ).
Bon, une petite proposition.
Globalement ça colle mais avec deux défauts :
. le premier n’est que de rendu, marge importante entre le bas du footer et le bas de la fenêtre.
. le second est sans doute rédibitoire, pas de liens possibles dans la partie du contenu qui vient se fondre dans le footer.
J’ai vérifié les trois cas correspondant aux hauteurs relatives des trois colonnes.
J’ai utilisé ton image parce que moi créer quelque chose j’en suis totalement incapable.
Voila le lien, il y a une page d’intro avant les exemples :
http://www.clb56.fr/test_css/aj_css_exercice3/
vala, vala :-)
Salut,
2ème proposition, beaucoup plus propre et sans les 2 défauts de mon précédent message.
Seule petit problème, marche pas avec IE si les colonnes gauche ou droite sont plus longue que le contenu.
Embêtant ça…
Ben il a pas pris mon lien le wiki :-(
http://www.clb56.fr/test_css/aj_css_exercice3bis/
:-)
Heu… chelou n’est pas un mot de mon vocabulaire Aymeric. Cependant, oui oui, je l’ai intégrée cette maquette, avec les astuces que tu m’as données et ça roule. Pas de soucis avec les marges pieds de pages ou autre. Cette méthode d’intégration deviendra désormais « la méthode Aymeric » :)
Bon finalement la solution 2 était bien la bonne, une dernière petite adaptation pour IE : remplacement de margin par des padding et suppression d’une couleur de fond inutile, et ça colle tout bien.
J’ai juste fait une mise à jour de la css concernée, le lien ne change donc pas :
http://www.clb56.fr/test_css/aj_css_exercice3bis/
PS : j’ai pris le soin de prévisualiser cette fois ci. Effectivement je n’arrive pas à créer des liens actifs avec ton interface Aymeric.
Hi, hi :-))
Mais bon j’ai réussi à passer d’un frisée complètement sauvage à une laitue on ne peut plus civile ;-)
Desolé pour les liens, il semble en effet que quand on passe en mode wikibar, le formulaire ne génère plus les urls à la volée.
Tu notera clb56 que je te laisse faire ta salade hein. ;)
Euhh Myriam, chelou pas de ton vocabulaire ? On parle bien de la même Myriam rassure-moi ? ;)
Alors voilà, j’ai fait ça pour ma part :
http://web.covertprestige.info/divers/ajblog/exo3.html
Ça m’a pris une heure et demi, ce que je trouve quand même pas mal long (faut dire qu’un bug – de HasLayout ? – d’IE m’a mené la vie dure sur la fin). Faut vraiment que j’arrive à travailler plus vite.
Je vois bien trois ou quatre autres possibilités pour ce pied de page. Pour ma part j’ai opté pour la technique du trompe-l’oeil avec une image de fond qui correspond au conteneur global et non pas au pied de page lui-même. À part ça, on peut tenter le positionnement relatif (c’est la solution de Christian je crois), ou encore le postionnement absolu du pied de page dans le conteneur positionné, ou bien de savants découpages.
Je pourrais améliorer ma solution en découpant l’image en deux : partie haute comme image de fond du conteneur des trois colonnes, et partie basse (couleur unie à part tout à gauche) pour le fond du pied de page. Avantage : un pied de page extensible en hauteur (plus souple).
‘Tain je me suis encore fait filtrer par l’anti-spam. Je suis maudit. :'(
Florent : « Ça m’a pris une heure et demi, ce que je trouve quand même pas mal long … … Faut vraiment que j’arrive à travailler plus vite. »
Je trouve ta réflexion très intéressante.
Bon le simple fait que tu te dises qu’il faut que tu arrives à travailler plus vite fait que tu y arriveras (oui ça à l’air bête, mais c’est vrai. Les choses n’arrivent que « quand on le fait exprès »).
Sauf que, comment travailler plus vite ? En mettant en place des procédures qui optimisent le temps passé ?
Avec les css c’est tout bonnement impossible ! Les css c’est le bordel !
Il y a bien quelques éléments de connaissance mais tout se passe finalement dans le maniement empirique et l’habileté résultant de la mémorisation des techniques (trucs) déjà mis en oeuvre. Personnellement j’appelle ça la jonglerie css, c’est très important : pas de talent de jonglerie = pas de css.
Dit autrement les css c’est du travail manuel en plein milieu d’un travail intellectuel.
Le html c’est bien autre chose et la tentation est effectivement grande d’utiliser « parfois » des <table> pour tavailler enfin sur quelque chose de sérieux. Les limites étant par ailleurs bien connues maintenant.
Mais bon, même sans devenir Lord Valentin de Majipoor la jonglerie ça s’apprend ;-)… Comme tu t’en doutes bien j’imagine.
Pas d’accord avec toi clb56. Il est vrai que j’ai eu du mal au départ à me mettre aux div (il y a longtemps maintenant). Mais comme toi, je me suis botté les fesses et je me suis forcée à respecter ce que devenait le web, d’autant plus qu’il allait dans le bon sens.
Hier j’ai reçu un bout de maquette à intégrer dans un site existant. Ce bout était en tables. ARggg !!!! je les ai détestés les webdesigners sur ce coup là ! Non seulement le code était illisible à cause des imbrications de tables td tr, mais en plus firefox voyait bien qu’on était en xhtml transitional et a tout envoyé bouler. J’ai récupéré les morceaux d’images à la pince à épiler et j’ai reconstitué tout ça en css avec de jolis div et Firefox s’est mis à parler ma langue.
Tu dis qu’on perd plus de temps. Je ne pense pas. Une fois ta css bien calibrée, les modifs deviennent nettement plus faciles qu’avec des tableaux.
Persévère, continue à fréquenter Aymeric, et tu vas muter ! ;)
En fait Myriam, je crois qu’il y a une mauvaise compréhension de ce qu’a dit clb56.
En gros je suis pas loin d’être au contraire d’accord à 100% avec toi clb56 : les css c’est le bordel.
En fait pour être plus précis, l’interprétation des CSS par les différents navigateurs c’est le bordel.
On ne peu en effet que se baser sur des « bugs » connus et les garder en mémoire pour se rappeler au bon moment pourquoi tel ou tel comportement diffère d’un navigateur à l’autre.
Il faut bien se l’avouer, à part si on se limite à des structures « simples », dés que l’on veut aller vers des travaux plus évolués, c’est du tâtonnement. Des fois même, on biaise, pas toujours de façon élégante, mais qui a le mérite de fonctionner un peu partout de la même façon.
Pour infos Myriam, je ne crois pas me tromper en pensant que Florent et clb56 ont certainement poussé l’étude des CSS bien plus loin que moi. ;)
Je ne connais pas nos deux compagnons de ce fil de commentaires mais je suis ravie de les rencontrer ici. J’irai voir ce qu’ils font car ça m’intéresse évidemment.
Pour revenir à la discussion, voilà pourquoi j’aime bien les css, même si on galère avec. Ca se rapproche de la prog. On sépare les objets, on crée des classes, on affecte des propriétés, on réutilise, on décline et finalement, même si on galère, on optimise. Et pour moi qui bosse plus dans le code que dans le wysiswyg, il est nettement plus facile de s’y retrouvé dans un site conçu au moyen de css plutôt que de sinuer entre les tables, truffées de colspans.
Sans compter l’assistance que nous apportent les plugins de Firefox qui nous permettent de retrouver facilement toutes les propriétés css d’un élément afin de corriger ce qui ne va pas.
En revanche, je te rejoins complètement sur les problèmes d’interprêtation des navigateurs, mais ça, c’est pas nouveau. Je pense même que les choses se sont améliorée depuis quelques années. On ne parle plus des balises propriétaires de tel ou tel navigateur et c’est déjà pas mal. Il y a encore du boulot pour que le web soit perçu de la même façon par tous les navigateurs mais ce n’est pas propre aux css (j’ai eu un problème sur des sessions non reconnues par IE6, bug connu visiblement).
Coucou myriam, moi c’est christian :-)
En fait l’histoire du <table> c’était une petite provo iconoclaste et aussi une taquinerie pour Florent qui parlait d’essayer une mise en page tableau 3 colonnes :-))
Cela dit il vaut mieux éviter d’associer les css seulement à la balise div, les css c’est fait pour préserver un code html utile et pertinent et c’est bien à ce code qu’il faut les associer. Evidemment à un moment ou à un autre il y aura bien des div. On en parle dans les commentaires de l’exercice css 2 d’Aymeric.
Sinon pour en revenir à mes salades, je crois que je vais aussi proposer une endive :-))
En fait pour tout dire il y a quelque chose qui me chiffonne dans le html que j’ai pris comme support (organisation contenu puis menu) je met ça au propre et je vous donne le lien.
Bon voila c’est fait :
http://www.clb56.fr/test_css/aj_css_exercice3ter/
Même si cela peut paraitre très peu renversant j’ai la faibesse de trouver cela vraiment important. Toute mise en oeuvre de css ne s’appuit que sur un codage html réel avec ses propres exigences.
L’exemple précédent que j’ai fourni (contenu puis menu) se trouve être très fortement contesté et donc, à tout le moins, il était intéressant d’envisager la situation inverse (menu puis contenu).
En l’occurence l’adaptation de la feuille de style reste minime.
Bonjour Christian :)
Je parlais des div versus table bien sûr. Mais il est évident que la css s’applique à toute la sémentique de la page html pour obtenir la mise en page voulue en utilisant les balises qui respectent leur utilité. Ex : l’utilisation des listes et leur affichage en ligne, des labels et leur positionnement dans le formulaire… Je suis encore loin de la perfection puisque j’en découvre tous les jours mais j’essaie d’y faire attention. Au passage, j’ai pas mal appris en montant des sites WordPress qui est plutôt fait dans cet esprit.
Fairweb : « Je parlais des div versus table bien sûr »
Oui, oui, mais en fait le déplacement n’est pas celui là. Ce qui permet d’éviter les table ce n’est pas les div mais le positionnement css lui même. Suivant le html natif dont on dispose pour mettre en oeuvre ce positionnement css, on peut avoir besoin de <div>. Mais, et c’est très important, on peut tout aussi bien ne pas en avoir besoin.
Ben alors, on a que deux propositions ? 20cent est en vacances ? Bon, je propose le corrigé Mercredi si ça vous va.
je suis debutant et je voudrai bien metriser (css) rapidement ,jai besoin des exercices avec corrections et de image c.à.d le resultat du travail