étaler une liste en css

Général
1

bonjour,
afin de réduire le bruit de NVDA j'ai repris un menu déroulant horizontal codé à partir d'un tableau pour le coder à partir d'une liste <ul> <li> mais pas moyen que l'ensemble s'étale automatiquement sur la largeur de ma page, j'arrive à le centrer mais pas à l'étaler, y a t-il une solution css ? ça fait des heures que je cherche sans rien trouver, une idée ?
(il semblerai que se ne soit pas possible ?)
cordialement
--
Signalez vos spams d'un simple clic. www.signal-spam.fr
<https://www.signal-spam.fr/>

2

bobof a écrit :

bonjour,
afin de réduire le bruit de NVDA j'ai repris un menu déroulant horizontal codé à partir d'un tableau pour le coder à partir d'une liste <ul> <li> mais pas moyen que l'ensemble s'étale automatiquement sur la largeur de ma page, j'arrive à le centrer mais pas à l'étaler, y a t-il une solution css ? ça fait des heures que je cherche sans rien trouver, une idée ?
(il semblerai que se ne soit pas possible ?)
cordialement

display: inline; ??

Eric

3

bonjour,
oui dans ma feuille css j’ai bien mis :
li{display:inline;}
merci tout de même.

j’ai bien les

  • sur une seule ligne mais je souhaiterai qu’ils se répartissent sur toute la largeur et non être regroupés soit à gauche, soit à droite ou soit au centre.
    actuellement ça donne ceci :
    à gauche
    [menu 1] [menu 2] [menu 3] [menu n] …espace vide…

    à droite
    … espace vide …[menu 1] [menu 2] [menu 3] [menu n]

    centré
    … espace vide …[menu 1] [menu 2] [menu 3] [menu n] … espace vide

    alors que je souhaiterai qu’il se répartisse sur toute la largeur automatiquement sans passer par des padding et margin
    [menu 1] [menu 2] [menu 3] [menu n]

    cordialement

    Eric L a écrit :

    • 4

    bobof a écrit :

    bonjour,
    oui dans ma feuille css j'ai bien mis :
    li{display:inline;}
    merci tout de même.

    j'ai bien les <li> sur une seule ligne mais je souhaiterai qu'ils se répartissent sur toute la largeur et non être regroupés soit à gauche, soit à droite ou soit au centre.

    Bonjour,
    de memoire me semble que c est assez galere a obtenir...
    en mettant un
    ul.width:100%
    et en mettant
    li.width:100% divise par le nombre de li composant le menu
    ca donnerait quoi ?
    Encore faut il connaitre a l avance le nombre de li du menu ou alors le calculer dynamiquement dans la boucle avec un #COMPTEUR_BOUCLE
    triton

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr <https://www.signal-spam.fr/&gt;

    ------------------------------------------------------------------------

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    5

    de memoire, un element inline ne gere pas de width. a verifier hein. mais sinon, au lieu de les mettre en inline, tu peux essayer en les mettant en float: left.

    Chag

    Le 09/01/2010 16:22, triton a écrit :

    bobof a écrit :

    bonjour,
    oui dans ma feuille css j'ai bien mis :
    li{display:inline;}
    merci tout de même.

    j'ai bien les <li> sur une seule ligne mais je souhaiterai qu'ils se
    répartissent sur toute la largeur et non être regroupés soit à gauche,
    soit à droite ou soit au centre.

    Bonjour,
    de memoire me semble que c est assez galere a obtenir...
    en mettant un
    ul.width:100%
    et en mettant
    li.width:100% divise par le nombre de li composant le menu
    ca donnerait quoi ?
    Encore faut il connaitre a l avance le nombre de li du menu ou alors le
    calculer dynamiquement dans la boucle avec un #COMPTEUR_BOUCLE
    triton

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr
    <https://www.signal-spam.fr/&gt;

    ------------------------------------------------------------------------

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    --
    Samuel BENARD
    GaiaService
    06-61-84-44-10

    6

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein. mais sinon, au lieu de les mettre en inline, tu peux essayer en les mettant en float: left.

    Chag

    Ah be oui ! c est pour ca que c est pas juste galere mais infaisable... en tout cas pas sur ie, sur firefox oui, me semble avec inline-block...
    Par contre, ca peut se faire avec des dl dt
    triton

    7

    Pour info, un display:inline-block est faisaible sous IE avec un
    zoom:1;display:block je crois

    -----Message d'origine-----
    De : triton [mailto:triton@pointcentral.net]
    Envoyé : samedi 9 janvier 2010 16:52
    Cc : spip@rezo.net
    Objet : Re: [Spip] étaler une liste en css

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein.
    mais sinon, au lieu de les mettre en inline, tu peux essayer en les
    mettant en float: left.

    Chag

    Ah be oui ! c est pour ca que c est pas juste galere mais infaisable...
    en tout cas pas sur ie, sur firefox oui, me semble avec inline-block...
    Par contre, ca peut se faire avec des dl dt
    triton

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    8

    bonjour,
    rigolo l’effet float même si ça ne résous pas le problème,
    avec li{float:left;…}
    l’ordre des menus est normal [menu 1] [menu 2] … [menu n]
    avec li{float:right;…}
    l’ordre est inversé [menu n] … [menu 2] [menu 1]
    merci pour le double effet kiss cool !
    cordialement

    samuel a écrit :

    9

    perso, je partirais plus sur l’idée de triton

    • un width à 100% pour le ul
    • un compteur_boucle pour connaitre le nombre d’item
    • une set et un get pour récupérer ce compte et le réutiliser dans un width divisé par ce nombre

    bobof a écrit :

    bonjour,
    rigolo l’effet float même si ça ne résous pas le problème,
    avec li{float:left;…}
    l’ordre des menus est normal [menu 1] [menu 2] … [menu n]
    avec li{float:right;…}
    l’ordre est inversé [menu n] … [menu 2] [menu 1]
    merci pour le double effet kiss cool !
    cordialement

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein. mais sinon, au lieu de les mettre en inline, tu peux essayer en les mettant en float: left.

    Chag

    Le 09/01/2010 16:22, triton a écrit :

    bobof a écrit :

    bonjour,
    oui dans ma feuille css j’ai bien mis :
    li{display:inline;}
    merci tout de même.

    j’ai bien les

  • sur une seule ligne mais je souhaiterai qu’ils se
    répartissent sur toute la largeur et non être regroupés soit à gauche,
    soit à droite ou soit au centre.

    • Bonjour,
    de memoire me semble que c est assez galere a obtenir…
    en mettant un
    ul.width:100%
    et en mettant
    li.width:100% divise par le nombre de li composant le menu
    ca donnerait quoi ?
    Encore faut il connaitre a l avance le nombre de li du menu ou alors le
    calculer dynamiquement dans la boucle avec un #COMPTEUR_BOUCLE
    triton

    10

    c'est normal avec le float right. chaque element vient s'empiler sur les autres elements en float right.

    donc, ton premier li se met tout a droite. Le 2eme se met a a gauche du precedent et ainsi de suite.

    Chag

    Le 09/01/2010 17:12, bobof a écrit :

    bonjour,
    rigolo l'effet float même si ça ne résous pas le problème,
    avec li{float:left;............}
    l'ordre des menus est normal [menu 1] [menu 2] .... [menu n]
    avec li{float:right;.........}
    l'ordre est inversé [menu n] ....... [menu 2] [menu 1]
    merci pour le double effet kiss cool !
    cordialement

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein.
    mais sinon, au lieu de les mettre en inline, tu peux essayer en les
    mettant en float: left.

    Chag

    Le 09/01/2010 16:22, triton a écrit :

    bobof a écrit :

    bonjour,
    oui dans ma feuille css j'ai bien mis :
    li{display:inline;}
    merci tout de même.

    j'ai bien les <li> sur une seule ligne mais je souhaiterai qu'ils se
    répartissent sur toute la largeur et non être regroupés soit à gauche,
    soit à droite ou soit au centre.

    Bonjour,
    de memoire me semble que c est assez galere a obtenir...
    en mettant un
    ul.width:100%
    et en mettant
    li.width:100% divise par le nombre de li composant le menu
    ca donnerait quoi ?
    Encore faut il connaitre a l avance le nombre de li du menu ou alors le
    calculer dynamiquement dans la boucle avec un #COMPTEUR_BOUCLE
    triton

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr
    <https://www.signal-spam.fr/&gt;

    ------------------------------------------------------------------------

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr
    <https://www.signal-spam.fr/&gt;

    --
    Samuel BENARD
    GaiaService
    06-61-84-44-10

    11

    bonjour,
    inline-block n’est pas concluant ça ajoute un peu d’espace entre les

  • sans occuper toute la largeur et en plus si faut faire des hacks pour le navigateur poubelle avec des zoom:1;display:block …et des machins trucs bidules … ça va pas le faire.
    je vais essayer la piste dl dt pour voir si c’est plus concluant et si ça ne fait pas trop de bruit pour NVDA.
    merci tout de même
    cordialement

    triton a écrit :

    • 12

    Jean-Christophe Villeneuve a écrit :

    perso, je partirais plus sur l'idée de triton
    - un width à 100% pour le ul
    - un compteur_boucle pour connaitre le nombre d'item
    - une set et un get pour récupérer ce compte et le réutiliser dans un width divisé par ce nombre

    oui, mais, mais pas avec de ul li... comme dit samuel, li est un element inline, on ne peut pas lui donner de width, juste des padding... je n ai pas essaye avec inline-block et zoom:1;display:block..

    Avec les float on doit pouvoir aussi, mais me semble qu il y a un probleme, ne me souviens plus lequel...
    J avais pas mal bataillé avant d'arriver a la solution des dl dt
    ici par exemple le menu horizontal :

    triton

    13

    Ton conteneur est en px ou en %?

    Bernard

    bobof a écrit :

    bonjour,
    inline-block n'est pas concluant ça ajoute un peu d'espace entre les <li> sans occuper toute la largeur et en plus si faut faire des hacks pour le navigateur poubelle avec des zoom:1;display:block .........et des machins trucs bidules ... ça va pas le faire.
    je vais essayer la piste dl dt pour voir si c'est plus concluant et si ça ne fait pas trop de bruit pour NVDA.
    merci tout de même
    cordialement

    triton a écrit :

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein. mais sinon, au lieu de les mettre en inline, tu peux essayer en les mettant en float: left.

    Chag

    Ah be oui ! c est pour ca que c est pas juste galere mais infaisable... en tout cas pas sur ie, sur firefox oui, me semble avec inline-block...
    Par contre, ca peut se faire avec des dl dt
    triton

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr <https://www.signal-spam.fr/&gt;

    ------------------------------------------------------------------------

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    --
    Bernard Blazin - Développement Internet Ingénieur ENSAM promo 1978

    Bernard Blazin Point Com

    9 rue de la Rose
    77320 Montolivet
    Tel 01 64 20 98 49
    http://www.bernardblazin.com

    14

    bonjour JC,

    Jean-Christophe Villeneuve a écrit :

    perso, je partirais plus sur l’idée de triton

    • un width à 100% pour le ul

    j’ai essayé, width:100% pour

      n’est pas nécessaire, par défaut il prend 100% de la largeur, ceci vu avec firebug.

      • un compteur_boucle pour connaitre le nombre d’item

      ça c’est pas un soucis, j’ai besoin de huit thèmes, le problème viens de la longueurs des titres qui ne peu être figée définitivement
      et le problème à l’intérieur d’un

    • inline c’est quand un titre est trop long il ne le passe pas sur plusieurs lignes comme le fait une cellule de tableau , c’est le
    • entier qui passe à la ligne s’il n’y a plus de place horizontalement dans le

    15

    merci triton, ça me semble plus adapté pour NVDA et propre au niveau XHTML Strict

    triton a écrit :

    16

    bonjour,
    c’est une div avec width:100% et dans tous les squelettes j’ai tous passé en em et % pour l’agrandissement des textes, menus, etc…
    seules les valeurs height sont en px

    Bernard Blazin a écrit :

    17

    Je ne saisis pas bien ton problème. Tes <ul><li> sont bien dans une div conteneur qui est soit en px soit en %
    Si tu as besoin de 8 <li> tu dois diviser la taille de tes <li> comme ceci: taille de la div conteneur sur 8 ( dans le cas des px) sinon pour le cas des % tu fais pareil en prenant garde que la taille des <li> ne soient pas supérieur à 99.9% du conteneur
    ex: si ton conteneur fait 800px tes li doivent faire 100px

    Bernard

    bobof a écrit :

    bonjour JC,

    Jean-Christophe Villeneuve a écrit :

    perso, je partirais plus sur l'idée de triton
    - un width à 100% pour le ul

    j'ai essayé, width:100% pour <ul> n'est pas nécessaire, par défaut il prend 100% de la largeur, ceci vu avec firebug.

    - un compteur_boucle pour connaitre le nombre d'item

    ça c'est pas un soucis, j'ai besoin de huit thèmes, le problème viens de la longueurs des titres qui ne peu être figée définitivement
    et le problème à l'intérieur d'un <li> inline c'est quand un titre est trop long il ne le passe pas sur plusieurs lignes comme le fait une cellule de tableau , c'est le <li> entier qui passe à la ligne s'il n'y a plus de place horizontalement dans le <ul>

    - une set et un get pour récupérer ce compte et le réutiliser dans un width divisé par ce nombre

    bobof a écrit :

    bonjour,
    rigolo l'effet float même si ça ne résous pas le problème,
    avec li{float:left;............}
    l'ordre des menus est normal [menu 1] [menu 2] .... [menu n]
    avec li{float:right;.........}
    l'ordre est inversé [menu n] ....... [menu 2] [menu 1]
    merci pour le double effet kiss cool !
    cordialement

    samuel a écrit :

    de memoire, un element inline ne gere pas de width. a verifier hein. mais sinon, au lieu de les mettre en inline, tu peux essayer en les mettant en float: left.

    Chag

    Le 09/01/2010 16:22, triton a écrit :

    bobof a écrit :

    bonjour,
    oui dans ma feuille css j'ai bien mis :
    li{display:inline;}
    merci tout de même.

    j'ai bien les <li> sur une seule ligne mais je souhaiterai qu'ils se
    répartissent sur toute la largeur et non être regroupés soit à gauche,
    soit à droite ou soit au centre.

    Bonjour,
    de memoire me semble que c est assez galere a obtenir...
    en mettant un
    ul.width:100%
    et en mettant
    li.width:100% divise par le nombre de li composant le menu
    ca donnerait quoi ?
    Encore faut il connaitre a l avance le nombre de li du menu ou alors le
    calculer dynamiquement dans la boucle avec un #COMPTEUR_BOUCLE
    triton

    --

    Signalez vos spams d'un simple clic. www.signal-spam.fr <https://www.signal-spam.fr/&gt;

    ------------------------------------------------------------------------

    _______________________________________________
    liste spip
    spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

    Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
    Discuter chez rezo.net

    Documentation de SPIP : http://www.spip.net/

    Irc : de l'aide à toute heure : http://spip.net/irc

    --
    Bernard Blazin - Développement Internet Ingénieur ENSAM promo 1978

    Bernard Blazin Point Com

    9 rue de la Rose
    77320 Montolivet
    Tel 01 64 20 98 49
    http://www.bernardblazin.com

    18

    merci bernard,
    mais ça reste du découpage à la hache, oui je sais je suis pénible.
    cordialement

    Bernard Blazin a écrit :