Overflow et multi div

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je souhaite faire une chose assez simple, mais rien ne marche...
Je veux mettre des div les uns à coté des autres et si cela dépasse l'écran qu'il y ait un overflow...
Voici le bout de code de ma page... :?

le css
Code:

1 2 3 4 5 6 7 8 .video { position:absolute; top:450px; width:100%; overflow : auto; height : 480px; display:inline; }
le html
Code:

1 2 3 4 5 6 <div class="video " align="center"> <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left"> Titre video 1<br /> <div style="width:300px;text-align:justify">bla bla</div> </div> </div>
Le div "mix" se répète dans le div "video" autant qu'il y a de données.
Les div se mettent bien à coté les uns des autres, sauf que l'overflow est vertical et moi je le souhaite horizontal...

la valeur 480px n'est pas respectée...

08/05/2013, 20h31
rodolphebrd

Bonjour,

vu ce que vous postez, je ne suis pas en mesure de bien situer votre problème.

Peut-être avec plus de code ou une page en ligne.

Merci pour votre réponse, je vais essayer de donner plus de code...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="video " align="center">
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
 
  <div id="mix" style="width:400px;height:450px;background-image:url(../../photos/22.jpg);float:left">
  Titre video 1<br />
  <div style="width:300px;text-align:justify">bla bla</div>
  </div>
</div>

Le div mix se répète...
Une fois que tout cela dépasse de l'écran, l'overflow est vertical et moi j'aimerais qu'il soit horizontal...
C'est à dire que j'aimerais que les div mix ne passent pas à la ligne et restent sur la même ligne...

Voici une solution avec table-cell et en fixant un min-width aux classes .mix (et non ID):

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
31
32
33
34
35
36
37
<!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=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
 
.video {
        overflow : hidden;
        height : 480px;
        display:table;
}
.mix{
        display: table-cell;
        min-width:400px;
}
</style>
</head>
 
<body>
 
<div class="video " align="center">
    <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/food);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
         <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/sports);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
         <div class="mix" style="width:400px;height:450px;background-image:url(http://lorempixel.com/200/200/cats);">
        	Titre video 1<br />
	<div style="width:300px;text-align:justify">bla bla</div>
    	</div>
    </div>
</body>
</html>

08/05/2013, 22h40
Décibel

Yes, les div se mettent bien sur une seule ligne, super !
Mais le scroll est en bas de page, pas sous les div...
J'ai essayé avec overflow:auto; mais cela ne change rien...

En créant un DIV wrapper le problème semble résolu:

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
31
32
33
34
35
<!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=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#wrapper{
	max-width: 1000px;
	height:480px;
	overflow: hidden;
}
.video {
	display: table;
}
.mix {
	display: table-cell;
    min-width:400px;
	width:400px;
	height: 450px;
 
}
</style>
</head>
 
<body>
<div id="wrapper">
<div class="video " align="center">
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/sports);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/cats);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
</div>
</div>
</body>
</html>

08/05/2013, 22h57
Décibel

Pardon, on a posté en même temps...
Je vais essayer !!

Merci !
08/05/2013, 23h03
Décibel

Non, ça ne fonctionne pas du tout...
Il n'y a plus l'effet de scroll et je ne veux pas avoir de width défini, le scroll doit s'ouvrir autant qu'il y a de données (soit de div mix)
Pour le moment la seule chose que j'ai et qui fonctionne c'est avec une bonne vieille table, mais bon, j'aimerais bien trouver autre chose... :cry:
08/05/2013, 23h11
rodolphebrd

Avec l'overflow en auto j'ai le scroll horizontal.
08/05/2013, 23h11
rodolphebrd

http://codepen.io/rodolpheb/pen/ufhnH
08/05/2013, 23h17
Décibel
Yes, nickel !!

Avec width: 100%; l'overflow s'ouvre sur toute la page, super !!
Code:

1 2 3 4 5 #wrapper{ width: 100%; height:480px; overflow: auto; }
Une dernière question, est-il possible de faire bouger un overflow horizontal avec la souris ?
08/05/2013, 23h19
rodolphebrd

En positionnant le curseur sur la barre de défilement, non?....
C'est bien la question?
08/05/2013, 23h21
rodolphebrd

J'ai compris la question: http://css-tricks.com/snippets/jquer...h-mouse-wheel/
09/05/2013, 00h37
Décibel
Pas simple la chose... 8O

Sinon je rencontre un autre problème :roll:
J'ai besoin de positionner le wraper dans la page à 340 px du haut et dès que je mets cela, plus rien ne marche, plus de srcoll...

J'ai essayé en mettant le wraper dans un container, mais pas bon...
Code:

1 2 3 4 5 6 7 8 9 10 .container { position:absolute; top:340px; } #wrapper{ width: 100%; height:480px; overflow: auto; }
J'ai essayé ça aussi, sans succès...
Code:

1 2 3 4 5 6 7 #wrapper{ position:absolute; top:340px; width: 100%; height:480px; overflow: auto; }
Encore besoin d'aide...
09/05/2013, 00h46
Décibel

j'ai fais un <div style="height:340px"> </div> juste au-dessus de lui et c'est top !!! :ccool:

Vais voir le scroll avec la souris...
09/05/2013, 07h38
rodolphebrd

Attention avec les position absolute! Dans ce cas ce n'est pas la bonne marche à suivre.
D'autant que créer un DIV vide pour un décalage vertical n'est pas bon non plus car ça alourdit le code Html inutilement.

Un margin-top:340px; suffit largement.
09/05/2013, 08h44
Décibel

Non, tous les autres div sont décalés aussi avec

Code:

margin-top:340px; suffit largement.
09/05/2013, 09h21
rodolphebrd

J'aimerais comprendre ce qu'il y a autour de ce contenu que vous voulez autant décaler.
Il y a certainement une méthode efficace...
09/05/2013, 18h17
Décibel

J'avais oublier de mettre top=... dans le div du haut...
Tout marche, merci, plus qu'à trouver un code javascript pour faire bouger l'intérieur du div et non toute la page...

Merci !

Bonjour,

je reviens vous voir car il semble que sur IE9 tout cela ne marche plus, bien que tout cela marchait parfaitement il y a quelques jours :

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
31
32
33
34
<!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=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
#wrapper{
	width:100%;
	height:480px;
	overflow:scroll;
}
.video {
	display: table;
}
.mix {
	display: table-cell;
    min-width:400px;
	width:400px;
	height: 450px;
 
}
</style>
</head>
<body>
<div id="wrapper">
<div class="video" align="center">
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/sports);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/cats);"> </div>
  <div class="mix" style="background-image:url(http://lorempixel.com/200/200/food);"> </div>
</div>
</div>
</body>
</html>

Je cherche depuis 2 jours sans trouver de solution...
Les div "mix" se mettent les uns sous les autres et non à côtés, comme je voudrais, du coup il y a un ascenseur vertical et je souhaite qu'un ascenseur horizontal...
Help...

Voir 40 message(s) de cette discussion en une page