====== Cas 1 : centrage gauche et droite sur une même ligne ======
Etant en pleine conversion d'un site en css, je suis tombé sur cet os. Ca a pourtant pas l'air si compliqué que cela.
Explication : je voudrais mettre dans le flux courant du texte une ligne de largeur 100% qui me permet de mettre du texte à gauche, aligné à gauche et sur la même ligne du texte à droite aligné droite.
Exemple : footer ou header d'une page d'un livre (à gauche : "titre du livre" et à droite : "Page n°123").
===== Solution 1 : avec des tableaux =====
Je sais, je sais, ca va raller, mais ca fait rien.
plein de texte avant dans un paragraphe
| Titre du livre |
Page n°123 |
plein de texte après dans un paragraphe
Rendu ci-dessous dans une boite de 500 pixels de large avec du texte avant et après au bout :
plein de texte avant dans un paragraphe
plein de texte après dans un paragraphe
===== Solution 2 : flux courant plus un div float:right =====
Et oui, dans un paragraphe standard aligné gauche, rien n'empeche de mettre juste le numéro de page à droite avec un div float. Reste juste à s'assurer qu'il soit sur la même ligne que celle qu'on désire au départ.
plein de texte avant dans un paragraphe
Page n°123
Titre du livre
plein de texte après dans un paragraphe
Rendu de test :
plein de texte avant dans un paragraphe
Page n°123
Titre du livre
plein de texte après dans un paragraphe
Mes remarques sur ce cas :
* Il faut mettre le div avant le paragraphe sur lequel on veut s'ancrer. J'ai pas très bien saisi pourquoi, mais ca marche comme cela. Même si l'on met le div dans la balise p, cela ne marche pas. Pourtant, en faisant ainsi, le parent de div serait p et devrait avoir un rendu correct.
* Apparement cette façon marche bien cross-browser.
===== Solution 3 : ul, li horizontaux =====
J'ai comme l'impression que dans beaucoup de cas où l'utilisation des tableaux permettait d'arriver très rapidement à un résultat, la 'CSS way of doing that' c'est avec des ul, li.
plein de texte avant dans un paragraphe
- Titre du livre
- Page n°123
plein de texte après dans un paragraphe
Rendu de test :
plein de texte avant dans un paragraphe
plein de texte après dans un paragraphe
Remarques :
- Le rendu n'est pas bon car il y a interference entre la feuille de style du wiki et ce que je met dans le code. A regarder plus tard.
- Les menus par ul, il marchent vraiment très bien, mais dans ce cas particulier, il n'y a pas moyen de s'en sortir sans l'ajout de nombreuses propriétés. Ca me semble pas la bonne solution.
===== Conclusion =====
Temporaire ... Avant l'avis de spécialistes.
La solution est évidement d'utiliser des floats. Cette nouvelle propriété est vraiment versatile, car elle permet de bien séparer les données de la mise en forme.