Scroll horizontal dans un div

Version imprimable

Bonjour,
j'ai un div qui devrait scroller pour voir les autres div mais je ne vois que jusqu'à 9. Je pense qu'il ne scroll pas horizontalement car 10, 11, 12 se sont rangés en dessous.
Merci de votre aide.

Le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<style>
.slider{border:1px solid red; overflow-y:hidden; overflow-x: scroll; width:800px; height:100px;}
.slider div{border:1px solid blue; width:70px; height:70px; float:left; margin:5px;cursor: pointer;}
</style>
 
</head>
 
<body>
<div class="slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>

25/03/2009, 17h29
Macmillenium
Bonjour,

Le :
Code:

1 2 overflow-y:hidden; overflow-x: scroll;
Masque uniquement la scrollbar verticale et ne force pas le scroll horizontale ...
A mes connaissances, il faut passer par le JavaScript.
25/03/2009, 18h45
crazy_inf

Bonsoir !
Et si tu laisses le navigateur se débrouiller en mettant :

Code:

overflow:auto;
25/03/2009, 21h42
h.thierry

j'ai déjà essayé de mettre overflow:auto et le navigateur met le scroll-bar vertical et moi je veux que le scroll-bar horizontal.
overflow-y:hidden; overflow-x: scroll; va trés bien mais je pense que c'est les float left qui ne fonctionnent pas trés bien puisque le div "10" passe dessous le div "1" alors qu'il devrait se trouver à droite du div "9"

Merci
25/03/2009, 22h04
GihefBey

Bonjour,

Est-ce qu'un exemple à éplucher pourrait t'aider ?

-

Je me permet de réouvrir le sujet car j'ai le même problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div style="width: 200px; height: 25px; overflow-y: hidden; overflow-x: scroll;">
<div id="DIV_ONGLET_1" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_2" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_3" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_4" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_5" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_6" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_7" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_8" class="syo_floatLeft" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 50px; margin-right: 5px;">test</div>
<div id="DIV_ONGLET_PLUS" class="syo_floatLeft syo_pointer" style="border: 1px solid black; border-bottom: 0px; height: 25px; width: 10px; font-size: 20px;" ;="" onclick="ajouterDiametre()"> + </div>
</div>

Mes onglets se mettent sur plusieurs lignes au lieux de se mettre l'un au bout de l'autre.

Pourquoi ?

02/07/2012, 14h36
bmartin

bonjour,

Mets un display:inline comme attribut css à chacun de tes div que tu veut aligner
02/07/2012, 14h51
Bovino

Sémantiquement, il serait plus adapté de transformer les balises <div> en <span> ;)
03/07/2012, 21h19
Auteur

bonsoir Dark Ryus,

si tu cherches à réaliser un menu à onglet tu peux regarder cette page :
http://css.developpez.com/galerie/?page=menus-onglets