Vos positions s'affaissent ? Mettez le bottom à zéro…

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Vos positions s'affaissent ? Mettez le bottom à zéro…

Je livre ma copie en réponse à un défi de Cap° concernant la mise en place d’une liste dans laquelle l’ajout d’un ou plusieurs éléments ferait remonter le texte au lieu de le faire descendre. Tout ça dans le but de garantir à notre liste une base fixe. Rien de bien fou, mais un défi est un défi :D

Le plus dur finalement, c’est comprendre de quoi il retourne. Je vous invite donc à jeter un oeil sur l’exemple et son code source avant de revenir.

Le bottom à zéro !

Nous avons donc deux listes positionnées en absolute avec le bottom

à zéro… Vous avez peut-être remarqué l’utilisation de deux classes distinctes pour ces listes :

  1. une déclaration pour le positionnement en absolu en bas
  2. une seconde pour le placement à droite ou à gauche.

Deux classes, pour quoi faire ?

L’utilisation de ces deux classes pour le même élément permet de factoriser notre CSS et d’en faciliter la maintenance. Et pourquoi pas réutiliser éventuellement la classe .liste pour positionner ainsi n’importe quel autre bloc, sans oublier de lui donner un nom de classe plus générique.

Vous prendrez bien un peu de hauteur ?

La seconde chose dont nous avons besoin pour que notre liste remonte, c’est de déterminer une hauteur pour le bloc qui contient les listes. Dans l’exemple, j’ai utilisé des valeurs relatives en em pour le bloc container et des pourcentage pour le bloc parent des listes. Cela permet de redimensionner le contenu de la page sans rien perdre de nos efforts.

Et si on recentrait le débat ?

Pour centrer horizontalement et verticalement le bloc container dans la fenêtre du navigateur, j’ai utilisé la technique des marges négatives présentée sur Alsacreations dont je vous invite à suivre les explications.

Appel aux bonnes volontés en guise de conclusion

Pour mettre un peu de peps dans l’exemple, j’ai bidouillé une petite fonction qui manipule le DOM pour créer les balises li et une autre pour les supprimer. Je suis certain qu’on peut écrire un code beaucoup plus mieux ;)

A vous de jouer !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



3 commentaires pour “Vos positions s'affaissent ? Mettez le bottom à zéro…”

  1. Cap° dit :

    Le Défi du début pour le coup !!!! En effet après avoir repris mon style CSS pour une optimisation je suis passé au "bottom 0px" qui a, il faut bien le dire, changé ma vie. Mais promis je vais te trouver un défi à la hauteur de tes capacités.

  2. br1o dit :

    Salut Cap° ! Si tu veux encore optimiser, tu peux omettre le "px" ;) A part ça, ça roxx ?

  3. Cap° dit :

    En effet l’optimisation du code c’est une bonne chose !!! Mais j’ai encore un peu de mal retrouver les bonnes valeurs quand j’utilise du style générique comme "margin" ou "padding" :D…

    Le combat continu de toute façon, j’ai pas fini de me prendre la tête avec les CSS.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site