28173 sujets

CSS et mise en forme, CSS3

[Resolu] Scrollbar horizontale, pas de retour a la ligne

Bonjour,

J'ai le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type">
</head>
<body>
<div style="width: 135px; height: 200px; overflow: scroll; text-align: left;">
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
</div>
</body>
</html>



La scrollbar verticale fonctionne bien, par contre je voudrais que le texte ne soit pas remis à la ligne et que l'on utilise la scrollbar horizontale pour le voir.

Comment faire?

Merci de votre aide.

Frédéric
Modifié par frederic_dumoulin (18 Jul 2007 - 14:40)
met des balises [ code ] autour de ton code, sinon tu risque la peine de mort ici... les modérateurs rodent... Smiley smile
Modifié par le.troll (18 Jul 2007 - 14:06)
c'est mieux comme ça?


<div style="width: 135px; height: 200px; overflow: scroll; text-align: left;">
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>
<div>toto toto toto toto toto toto</div>
<div>tutu tutu tutu tutu tutu</div>
<div>tata tata tata tata</div>
<div>titi titi titi</div>


Désolé

En plus la fenêtre dans laquelle apparaît le code se comporte justement comme ce que je cherche!


Frédéric
le mieux aurait été d'éditer ton premier post ^^ ...

pour ta solution apprement alsacréa utilise un overflow: auto... tente donc comme ca, avec eventuellement un div autour pour limiter à 135px;
Bonjour,

pour beneficier du scroll horizontal ce que tu peux faire c'est d'avoir dans ton div , un div qui a une largeur plus grande que 135px dans ton cas !

exemple :


<body>
<div style="width: 100px; height: 200px; overflow: auto; text-align: left;">

<div style="width:200px">toto toto toto toto toto totototo toto toto toto toto totototo toto toto toto toto totototo toto toto toto toto totototo toto toto toto toto</div>

<div>tutu tutu tutu tutu tutu</div>

<div>tata tata tata tata</div>

<div>titi titi titi</div>

<div>toto toto toto toto toto toto</div>

<div>tutu tutu tutu tutu tutu</div>

<div>tata tata tata tata</div>

<div>titi titi titi</div>

<div>toto toto toto toto toto toto</div>

<div>tutu tutu tutu tutu tutu</div>

<div>tata tata tata tata</div>

<div>titi titi titi</div>

<div>toto toto toto toto toto toto</div>

<div>tutu tutu tutu tutu tutu</div>

<div>tata tata tata tata</div>

<div>titi titi titi</div>

<div>toto toto toto toto toto toto</div>

<div>tutu tutu tutu tutu tutu</div>

<div>tata tata tata tata</div>

<div>titi titi titi</div>
</body>
</html>


normalement ca devrait fonctionner Smiley cligne
Sujet clos
Aller à