Overflow et multi div

Version imprimable

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...

29/05/2013, 11h59
rodolphebrd

Avez-vous une page en ligne si possible...
29/05/2013, 12h20
Décibel

Oui, simplement il ne faut pas que cette page soit indéxée par google...

w w w . sarl - dbc .com / belieudomaine/fr/boutique/test.php
29/05/2013, 14h30
Torgar

Il serait intéressant de savoir quelles ont été les modifications entre le moment où ça fonctionnait et celui où ça ne fonctionne plus.
29/05/2013, 14h55
Décibel

En fait le code que j'ai mis dans l'avant dernier post est un code très simple, c'est celui de Rodolphe à 100%, qui marchait avant, et qui ne marche plus maintenant...
Peut-être une mise à jour de IE9.
Avez vous essayé la page avec IE9 ?
Sinon, tout marche bien sur Google Chrome, Firefox et Safari, mais aussi IE10 et même IE8.
J'aurai aimé savoir si cela vient de mon PC ou si c'est une réalité pour IE9...
29/05/2013, 16h00
Décibel

Tout ça me saoul grave...
C'est bien beau le CSS, les div et tout le toutim, mais c'est loin d'être facile, performant et rentable, et il y a une perte de temps terrible, tout ça pour avoir des aléas que mon client ne voudra jamais comprendre et il aura bien raison !
Alors je vais mettre une bonne vieille table, là au moins tout marche dans tous les navigateurs , même les Ipad et les truc much pas encore inventés...

Si un jour vous avez une solution, revenez en parler ici...
Merci !
29/05/2013, 16h14
Torgar

Actuellement, je ne peux pas consulter la page que tu donnes.

En revanche, je pense qu'un souci s'est glissé ailleurs que dans le code que t'as gentillement donné Rodolphe. Car si il n'a pas changé et que du jour au lendemain il ne fonctionne plus, c'est qu'une partie du développement qui a été fait ensuite doit entrer en conflit avec ce code.

Pour faire avancer le Schmilblik, tu as essayé de faire un Ctrl + F5 pour recharger le cache de IE ?
29/05/2013, 16h21
Décibel

Merci Torgar pour ta réponse, mais en fait ce que j'ai mis dans la page de test est le même code que ce qu'avait donné Rodolphe à 100%.

Donc rien n'est modifié, et cela ne marche plus.

Pour moi, soit c'est mon IE9 qui est en panne, mais j'en doute, soit il y a eu une mise à jour foireuse, soit, je ne sais plus rien...

Mais une chose est certaine avec une table en 2 min, tout marche et ça m'énerve d'avoir perdu 2 jours là-dessus.

Merci à toi !