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 😀
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 :
- une déclaration pour le positionnement en absolu en bas
- 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 !
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.
Salut Cap° !
Si tu veux encore optimiser, tu peux omettre le "px" 😉
A part ça, ça roxx ?
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.