Liste à puce et largeur

Bonsoir,

Je suis confronté à un petit problème :

Je souhaiterai réaliser une liste affichant des numéros de pages sur un fond choisi. J'aurais voulu réalisé cela à l'aide d'une liste à puce mais apparemment il m'est impossible d'obtenir le résultat escompté du fait qu'on ne peut donner de largeur à une balise <li>.

Un exemple en image de ce que je souhaite réaliser (fait ici avec des <p>) :

http://ouaibou.free.fr/example.png

J'ai essayé de le faire avec des listes à puces, mais étant donné que je n'arrive pas à donner une largeur aux <li>, cela coupe l'image de fond et m'empêche de centrer les numéros.

Connaîtriez-vous une solution ou bien une alternative pour éviter d'utiliser des <div> et <p> ?

Merci d'avance.

Cordialement,
Laurent
Modifié par Ouaibou (20 Dec 2006 - 23:10)

Bonsoir,

Tu peux donner des margin et padding par contre sur des Li, pourquoi ne pas tester ?

Ouaibou a écrit :
J'ai essayé de le faire avec des listes à puces, mais étant donné que je n'arrive pas à donner une largeur aux <li>, cela coupe l'image de fond et m'empêche de centrer les numéros.

Bonsoir,
As-tu pensé à spécifier que tes éléments de listes devaient être des blocs ?

li {
display:block;
}

comme c'est étrange, je viens de régler ce problème il y a quelques minutes et pendant que tu postais ton message, je postais le mien qui porte sur un autre problème

Il est possible de donner une largeur à une balise li, mais il ne faut pas que tu affiche tes li en ligne avec le css : display : inline mais avec float : left.Mais vu que je n'ai pas ton code, je suppose que tu avais fait un display : inline.

Voici ce que je te conseille :

li {
	list-style-type : none;
	background-image: url(ton_image);
	height: 30px;
	width : 107px;
	float : left;
	text-align : center;
	}

bien sur les tailles ne sont là que pour illustrer ce que je dis
Modifié par manu_css (20 Dec 2006 - 23:41)

Merci pour vos réponses.

Effectivement j'ai utilisé un display inline pour les li.

Je vais tester et je vous tiens au courant.

@+

Rebonsoir,

Alors j'ai fait quelques tests :

- Avec padding :

Impossible de résoudre le problème. Si le numéro des pages tenaient tout le temps sur 1chiffre alors on pourrait mais pouvant avoir des nombres de 2 chiffres, cela n'est plus possible :

( 8 ) ( 9 ) ( 10) ( 11) ( 12)
^
problème de décalage avec les paddings.

- Avec display: block appliqué aux <li> :

Là, on peut appliquer une largeur fixe, par exemple 20 px de largeur, et centrer le texte. A partir de là, le problème connu avec les paddings disparaît. Cependant, en utilisant le display:block, si on veut avoir les li alignés horizontalement, on doit appliquer un float left. Au finale, avec les float j'obtiens ce que je souhaite, mais je trouve dommage de devoir utiliser ça pour arriver à ce résultat.

Voici le code utilisé :

ul.pager {
    margin: 0px;
    padding: 0px;
}
   
ul.pager li {
    background-image: url(../images/background_pager.png);
    background-repeat: no-repeat;
    display: block;
    float: left;
    list-style: none;
    margin-left: 5px;
    text-align: center;
    width: 20px;
}

Code html :

<ul class="pager">
  <li><a href="">1</a> </li>
  <li><strong>2</strong> </li>
  <li><a href="">3</a> </li>
  <li><a href="">4</a> </li>
  <li><a href="">5</a> </li>
  <li><a href="">6</a> </li>
  <li><a href="">7</a></li>
</ul>

Si tu veux une largeur fixe identique pour chaque item quelque soit le contenu, ce sera forcément du display: block, et dans ce cas passer le tout en flottants est indispensable (note : un élément flottant a automatiquement un affichage de type bloc, donc le display: block sera superflu).

Si c'est du inline (affichage de type en-ligne), alors on perd certaines possibilités de mise en forme, dont la possibilité de fixer une largeur.

En inline, avec par exemple un padding: 0 6px, on obtient un résultat intéressant et équilibré, mais effectivement on aura une largeur différente suivant que l'on aura un ou deux chiffres.

Enfin, on peut signaler le display: inline-block, qui correspondrait bien à ta demande, mais qui n'est pas suffisamment implémenté (pas implémenté par Firefox, et partiellement par IE), donc peu utilisable. À défaut, on se contentera donc des flottants, si on doit garder des possibilités de mise en forme des blocs un peu poussées.

Ok merci bien.