Discussion :

[slack457]

Bonjour,

je pensais pouvoir trouver facilement la réponse sur en allant voir quelques forums mais finalement je sèche...

j'aimerai avoir un menu vertical à gauche, et une gallerie d'images à droite.

pour faire ça je dois mettre un "float: left" sur mon menu (il me semble)

le problème c'est que les images de la gallerie (censés être à droite) passe en dessous du menu dès que celui-ci se termine.


Excusez moi je ne peux pas mettre ma page en ligne, mais je peux donner du code (simplifié) :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="menu">
    sous-menu1 <br />
    sous-menu2 <br />
    sous-menu3 <br />
</div>
 
<div id="gallerie_image">
    <img src="image1" />
    <img src="image2" />
    <img src="image3" />
    ...
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#gauche
{
	position: relative;
	width: 190px;
	height: auto;
	float: left;
}
 
#gallerie_images
{
	width: auto;
}

voila pour l'instant j'en suis ici...

et moi j'aimerai bien que les images ne passent pas sous le menu, mais continuent bien dans leur colonne (même si le menu s'arrête, il faut que la galerie puisse continuer à descendre, mais elle ne doit pas passer sous le menu)

[Ethyde]

Salut,

bon déjà à l'avenir sache qu'il vaux mieux fournir le code généré que le code source en php

Sinon pour régler ton problème, met ta div #gallerie_images en float:left elle aussi.

[slack457]

d'accord, j'ai édité le message, merci

mais quand je met la gallerie en "float: left" elle s'affiche directement en dessous du menu (et pas à droite du menu).

alors j'ai "enveloppé" le div du menu et le div de la gallerie dans un div "container"
et mis le div container en "display: inline" puis en "display: inline-block" mais ça ne change rien...

[EDIT]
ça ne change rien à cause de la largeur de ma div gallerie (width: auto)
si je met une largeur fixe en pixel ça marche. Mais ça m'embête beaucoup car maintenant mon site reste très "étroit" pour les personnes qui ont une large résolution. Est-ce qu'il n'y aurait pas un autre moyen ?
[/EDIT]

[slack457]

ok je commence à m'en sortir, la gallerie d'images "n'empiète" plus sur la colonne du menu.

Maintenant le problème c'est que si on ajoute des images, le div de la gallerie "grandi" (ça c'est normal, ouf), par contre (et c'est là le problème) le div du container ne grandi pas.

Et le "background-color" est appliqué au div container (pour que le background soit appliqué uniformément au div "menu" et au div "gallerie")

Donc comme le div container ne "grandi" pas, il y a un espace vide sous le menu (et c'est très laid)

Vous voyez le problème ?

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
    <div id="menu">
        sous-menu1 <br />
        sous-menu2 <br />
        sous-menu3 <br />
    </div>
 
    <div id="gallerie_image">
        <img src="image1" />
        <img src="image2" />
        <img src="image3" />
        ...
    </div>
</div>

Code css :

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
#container
{
    background-color: black;
    width: auto;
    height: 100%;
    min-height: 900px;
}
 
#gauche
{
    position: relative;
    background-color: rgb(13,122,242);
    width: 15%;
    min-width: 80px;
    max-width: 190px;
    height: auto;
    min-height: 500px;
    float: left;
    margin-right: 5px;
    overflow: hidden;
    border: 1px solid white;
}
 
.gallerie_images
{
    background-color: black;
    width: 83%;
    float: left;
}

[the-destroyer]

yo a tous!

si j'etais toi j'enleverai le '<div id="gallerie_image" >'
de ne mettre qu'une seul photo dont tu change le src en javascript et dont tu lui donne les attributs css de gallerie_image.
Essaye en enlvent et en gardant le width:100% et voit ce qui va le mieux...

voila je t'es donne ce que je ferai! a toi dvoir!

@+

[sebhm]

Bonjour,

si j'etais toi j'enleverai le '<div id="gallerie_image" >'
de ne mettre qu'une seul photo dont tu change le src en javascript et dont tu lui donne les attributs css de gallerie_image.
Essaye en enlvent et en gardant le width:100% et voit ce qui va le mieux...

j'ai rien compris. Qu'est ce que tu essaies de faire ?

selon moi, pour revenir à ta premiere question, le mieux est d'avoir le DIV menu en

Code :

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

float : left

comme tu l'as fait, et ensuite d'avoir le DIV conteneur en positionnement normal mais avec une marge gauche (margin-left) égale à la taille de ton menu (+ un chouillat).
des idées ici

les 2 'float:left' marchent bien également.
pour ce qui est de la gestion du conteneur sur des fils flottants, c'est un probleme courant faq

[slack457]

salut à toi, c'est sympa de répondre, merci !

peut-être que je n'ai pas compris ce que tu veux dire mais je ne pense pas avoir besoin de modifier la façon dont je construit la galerie d'images (son contenu se construit bien). Et la largeur du site ne pose pas de problème.

L'ennui tu vois c'est que j'ai mon div "menu" et mon div "galerie" qui sont contenu tous les 2 dans un gros div "container",
quand il n'y a pas beaucoup d'images ça se passe bien (car le div "container" et encore plus grand que le div "galerie"),
mais quand je rajoute des images, le div "galerie" grandi, jusqu'à devenir plus grand que le div "container", et à ce moment là, il FAUDRAIT que le div "container" grandisse en même temps que le div "galerie" (alors que là... le div "galerie" grandi tout seul, en laissant le div "container" loin derrière)

le truc c'est que le background est appliqué au div "container" (obligé pour avoir un background uniforme sur toute la surface du site),
et là ben... comme le div "container" ne grandi pas... le background non plus... et c'est très laid

je galère toujours... j'espère que tu pourra m'aider

[slack457]

salut sebhm,

je te remercie pour le lien, ça à l'air d'être pile poil ce dont j'ai besoin

pourtant j'avais déjà lu ce tuto dans la faq,
dans la faq il y a un parent et un enfant qui en en "float: left",
il suffit de mettre un div vide en "clear: both" juste avant la balise fermante du parent),

moi j'ai 1 parent, et 2 enfants (tous les 2 en "float : left"),
je me suis dit que c'est le même style et que j'avais trouvé la solution, et pourtant je fais ça :

Code php :

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

1
2
3
4
5
 <div id="parent">
    <div id="enfant1"> </div>
    <div id="enfant2"> </div>
    <div id="clear"> </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#enfant1
{
    float: left;
}
 
#enfant2
{
    float: left;
}
 
#clear
{
    clear: both;
}

mais le div "enfant2" dépasse toujours du div "parent"
(dans mon cas, le div "galerie" dépasse toujours du div "container")

et je ne peux pas mettre un "overflow: hidden" sur mon div "container" (sinon on ne verra pas les images qui dépasse, et ce n'est pas le but)

[sebhm]

mais le div "enfant2" dépasse toujours du div "parent"

etonnant ca...

montre ton code avec cette technique stp

[slack457]

d'accord, voila exactement ce que j'ai, je n'ai rien enlevé :

Code css :

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
38
39
40
41
42
43
44
45
46
47
48
49
html, body
{
	position:relative;
	right: 2px;
	width: auto;
	max-width: 1255px;
	height: 100%;
	margin: auto;
	background-color: white;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; 
}
 
#container
{
	background-color: black;
	width: 100%;
	height: 100%;
	min-height: 968px;
	padding-right: 8px;
}
 
#gauche
{
	position: relative;
	background-color: rgb(13,122,242);
	width: 15%;
	min-width: 80px;
	max-width: 190px;
	min-height: 900px;
	max-height: 900px;
	float: left;
	margin-right: 5px;
	overflow: hidden;
	border: 1px solid white;
	margin-top: 10px;
}
 
.gallerie_images
{
	background-color: black;
	width: 83%;
	float: left;
	padding-top: 10px;
}
 
#clear
{
	clear: both;	
}

avec comme structure HTML :

Code php :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="container">
     <div id="gauche">
         ....
     </div>
     <div class="gallerie_images">
         ....
     </div>
     <div id="clear"> </div>
</div>

(il n'y a aucun "sous-div" à l'intérieur des div que je montre ici)

à l'intérieur du div de class "gallerie_images" il n'y a que des images. La suivante se positionne à droite de la précédente jusqu'a ce qu'il n'y ai plus de place à l'écran sur la ligne, à ce moment là, l'image suivante se positionne simplement à la ligne en dessous, etc.

[slack457]

ah ça y est c'est bon !!!

finalement c'était

Code css :

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

1
2
3
4
html, body
{
     height: 100%;
}

qui posait problème


donc finalement histoire de donner un code propre, pour avoir 2 div dans 1 gros div il faut bien utiliser l'astuce de mettre un div vide à la fin du dernier enfant, et de mettre ce div vide en "clear: both"

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="parent">
     <div id="enfant1">
         ....
     </div>
     <div id="enfant2">
         ....
     </div>
     <div id="clear"> </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#enfant1
{
    float: left;
}
 
#enfant2
{
    float: left;
}
 
#clear
{
    clear: both;
}

et surtout, ne PAS indiquer de hauteur fixe à aucun de ces div, NI à leur div parents (comme par exemple "body" et "html").
Cependant, et heureusement d'ailleurs, on peut indiquer un "min-height" à chacun de ces div indépendamment.


Je vous remercie beaucoup, je ne connaissais pas cette astuce du "clear: both".

encore merci