Forum Programmation.web Listes et overflow : comment ça marche ?

Posté par  .
Étiquettes : aucune
0
7
août
2008

Bonjour,

Je n'arrive pas à utiliser la propriété overflow avec une liste.
Je voudrais que mon div scrolle automatiquement lorsque la liste est trop grande.

Mais au lieu de ça, le texte de ma liste se met sur plusieurs lignes.

A noter que si je remplace mon texte par un mot long mais sans espaces, le scroll fonctionne. 



< html >


	< head >


		< style type="text/css" >


			ul { overflow: visible }


			li { overflow: visible }


			#container { width: 150px; overflow: scroll }


		< /style >


		< title > Test < /title >


	< /head >


	< body >


		< div id="container" >


			< ul id="list" >


				< li class="ligne" > Hello World Foo Bar Dev Null < /li >


			< /ul >


		< /div >


	< /body >


< /html >


Si quelqu'un a une idée...

Merci d'avance.

  • # ton style ne marche pas

    Posté par  . Évalué à 1.

    en simplifiant ca ne marche toujours pas et j'ai le meme comportement


    < html >
    < head >
    < style type="text/css" >
    #container { width: 150px; overflow: scroll }
    < /style >
    < title > Test < /title >
    < /head>
    < body >
    < div id="container" >
    < ul id="list" >
    < li class="ligne" > Hello World Foo Bar Dev Null < /li >
    < li class="ligne" > Hello World Foo Bar Dev Null < /li >
    < /ul >
    < /div >
    < /body >
    < /html >

    • [^] # Re: ton style ne marche pas

      Posté par  . Évalué à 2.

      En fait, avec un div, le problème est le même, ce n'est pas spécifique aux listes.

      Pour que le scroll sur conteneur fonctionne, il faut que le contenu ait une largeur fixe.
      Or dans mon cas j'ai absolument besoin d'avoir une taille dynamique...

      • [^] # Re: ton style ne marche pas

        Posté par  . Évalué à 2.

        Bonjour,
        En utilisant la propriété white-space: nowap, pour éviter une rupture de la ligne à chaque espace, cela devrait fonctionner.
        < style type="text/css" >
        #container { width: 150px; overflow: scroll; white-space: nowrap}
        < /style >

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.