FAQ version Beta 0.5
Positionnement, alignement, centrage
Comment positionner un texte ou un bloc au bas d'un élément ?
Il y a deux cas de figure :
- soit le texte ou le bloc à positionner est le seul contenu de son élément parent ;
- soit l'élément parent contient plusieurs éléments.
Dans le premier cas, il suffit de créer un espace vide au dessus du texte ou du bloc à positionner en bas d'élément. On pourra utiliser :
- margin-top: value; pour "pousser" le texte ou le bloc vers le bas
- padding-top: value; sur le conteneur (élément parent).
Dans le deuxième cas (le conteneur contient plusieurs éléments, dont certains doivent se positionner normalement en flux), on utilisera le positionnement absolu, sur le bloc à positionner en bas du conteneur :
#conteneur {position: relative;}
#bas {position: absolute; bottom: 0;}
Pour que le bloc #conteneur, parent ou ancêtre direct du bloc #bas, soit le référent de ce bloc, il faut le positionner, soit en relatif, soit en absolu. Si on ne le fait pas, alors le bloc #bas se positionnera tout en bas du premier bloc positionné parmis ses ancêtres, ou bien tout en bas de la fenêtre du navigateur.
Pour ce dernier cas, voir cette page de démonstration :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html
- soit le texte ou le bloc à positionner est le seul contenu de son élément parent ;
- soit l'élément parent contient plusieurs éléments.
Dans le premier cas, il suffit de créer un espace vide au dessus du texte ou du bloc à positionner en bas d'élément. On pourra utiliser :
- margin-top: value; pour "pousser" le texte ou le bloc vers le bas
- padding-top: value; sur le conteneur (élément parent).
Dans le deuxième cas (le conteneur contient plusieurs éléments, dont certains doivent se positionner normalement en flux), on utilisera le positionnement absolu, sur le bloc à positionner en bas du conteneur :
#conteneur {position: relative;}
#bas {position: absolute; bottom: 0;}
Pour que le bloc #conteneur, parent ou ancêtre direct du bloc #bas, soit le référent de ce bloc, il faut le positionner, soit en relatif, soit en absolu. Si on ne le fait pas, alors le bloc #bas se positionnera tout en bas du premier bloc positionné parmis ses ancêtres, ou bien tout en bas de la fenêtre du navigateur.
Pour ce dernier cas, voir cette page de démonstration :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html
Liens complémentaires