Introduction

Il existe beaucoup de façon faire une ligne avec trois texte [gauche, centre, droite]. Voici donc quelques méthodes expliquées. Les styles CSS sont inclus dans la balise à titre pédagogique. Il est recommandé de créer des règles CSS dans un fichier .css ou dans une balise style.

Liste avec largeur en pourcentage

S'il s'agit d'une liste d'éléments, que ne connaissons pas la largeur du contenu et nous voulons disposer également chaque éléement, on peut utiliser facilement une liste avec une largeur donnée en pourcentage.

Le code:


<ul style="list-style-type:none;padding:0;">
 <li style="display:block;float:left;width:33%; text-align:left;">Gauche</li>
 <li style="display:block;float:left;width:33%; text-align:center;">Centre</li>
 <li style="display:block;float:left;width:33%; text-align:right;">Droite</li>
</ul>
<div style="clear:both;"></div>

Le résultat:

  • Gauche
  • Centre
  • Droite

Désavantages: il existe des problèmes lorsque le texte est trop large pour l'écran. De plus, nous sommes obligé en utilisant un float d'utiliser clear:both dans un div qui suivrait le ul. On ne peut pas utiliser background ou border sur l'élément ul puisqu'il n'a pas de hauteur définie.

Liste avec largeur fixe

S'il s'agit d'une liste d'éléments et que nous connaissons la largeur du contenu, on peut utiliser facilement une liste (avec ou sans largeur fixe). Voici des exemples de code.

Le code:


<ul style="list-style-type:none;padding:0;">
 <li style="display:block;float:left;width:100px; text-align:left;">Gauche</li>
 <li style="display:block;float:right;width:100px; text-align:right;">Droite</li>
 <li style="text-align:center;">Centre</li>
</ul>

Le résultat:

  • Gauche
  • Droite
  • Centre

Le problème de cette méthode réside dans le fait que les éléments ne suivent pas un ordre familier. De plus, le texte du milieu re ne semble pas centré. Il y aura aussi un problème lorsque la hauteur du centre sera plus petite que celle de gauche ou de droite.

Paragraphe avec largeur fixe

Exactement la même technique que la première technique ul+li mais avec des div+p. J'utilise des largeurs fixes (3 fois 200px = 600px) mais les % pourraient fonctionner. Problème: dans une page à largeur dynamique, le div principal peut être plus large que la page. Si on réduit au maximum la largeur du bloc div, on obtient un texte à gauche, en dessous un texte centré et en dessous un texte aligné à droite. Il y a encore le problème du clear:both nécessaire après.

Le code:


<div style="list-style-type:none;padding:0;">
 <p style="margin:0;float:left;width:200px; text-align:left;">Gauche</p>
 <p style="margin:0;float:left;width:200px; text-align:center;">Centre</p>
 <p style="margin:0;float:left;width:200px; text-align:right;">Droite</p>
</div>
<div style="clear:both;"></div>

Le résultat:

Gauche

Centre

Droite

Position absolue

Méthode sans problème de float, mais avec celui du texte caché si la hauteur de la division, donné par l'élément non absolue n'est pas assez grand. On n'évite pas les surchargements de chaque côté.

Le code:


<div style="position:relative;">
 <p style="margin:0;position:absolute;left:0;top:0; text-align:left;">Gauche</p>
 <p style="margin:0;text-align:center;">Centre</p>
 <p style="margin:0;position:absolute;right:0;top:0; text-align:right;">Droite</p>
</div>

Le résultat:

Gauche

Centre

Droite

On pourrait aussi modifier cette méthode pour spécifier des largeurs pour le côté gauche et droit. Il ne resterait qu'à mettre les mêmes largeurs aux padding du p central. Cependant, le gauche ne se redimensionne pas et lorsque la largeur de l'écran n'est pas assez grande, Droite et Centre se chevauchent.

Le code:


<div style="position:relative;">
 <p style="margin:0;position:absolute;left:0;top:0;width:10em; text-align:left;">Gauche</p>
 <p style="padding:0 10em; text-align:center;">Centre</p>
 <p style="margin:0;position:absolute;right:0;top:0;width:10em; text-align:right;">Droite</p>
</div>

Le résultat:

Gauche

Centre

Droite

Liste en tableau

Pourquoi ne pas utiliser un tableau avec des UL et LI?

Le code:


<ul style="display:table;list-style-type:none;padding:0;width:100%;">
 <li style="display:table-cell;text-align:left;">Gauche</li>
 <li style="display:table-cell;text-align:center;">Centre</li>
 <li style="display:table-cell;text-align:right;">Droite</li>
</ul>

Le résultat:

  • Gauche
  • Centre
  • Droite

Désavantage: La méthode ne fonctionne pas avec des vieux navigateurs (Ex.: Internet Explorer 6, Netscape 4).

Lire les commentaires | Laisser un commentaire