Overflow et multi div

**Décibel** · 08/05/2013, 20h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**rodolphebrd** · 08/05/2013, 20h31

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.

**Décibel** · 08/05/2013, 20h39

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**rodolphebrd** · 08/05/2013, 22h33

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Décibel** · 08/05/2013, 22h40

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

**rodolphebrd** · 08/05/2013, 22h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Décibel** · 08/05/2013, 22h57

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

Merci !

**Décibel** · 08/05/2013, 23h03

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

**rodolphebrd** · 08/05/2013, 23h11

Avec l'overflow en auto j'ai le scroll horizontal.

**rodolphebrd** · 08/05/2013, 23h11

http://codepen.io/rodolpheb/pen/ufhnH

**Décibel** · 08/05/2013, 23h17

Yes, nickel !!

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**rodolphebrd** · 08/05/2013, 23h19

En positionnant le curseur sur la barre de défilement, non?....
C'est bien la question?

**rodolphebrd** · 08/05/2013, 23h21

J'ai compris la question: http://css-tricks.com/snippets/jquer...h-mouse-wheel/

**Décibel** · 09/05/2013, 00h37

Pas simple la chose...

Sinon je rencontre un autre problème

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#wrapper{
	position:absolute;
	top:340px;
	width: 100%;
	height:480px;
	overflow: auto;
}

Encore besoin d'aide...

**Décibel** · 09/05/2013, 00h46

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

Vais voir le scroll avec la souris...

**rodolphebrd** · 09/05/2013, 07h38

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.

**Décibel** · 09/05/2013, 08h44

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-top:340px; suffit largement.

**rodolphebrd** · 09/05/2013, 09h21

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

**Décibel** · 09/05/2013, 18h17

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 !

**Décibel** · 29/05/2013, 11h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Overflow et multi div

CSS

Discussions similaires

Partager

Partager