Discussion :

[kate59]

BONJOUR,
j ai créer un site avec trois colonne 1 menu a droite et a gauche et au centre le contenu j ai voulut enlever la bordure qui entourer le div du milieu cet div se deplace alors sans comprendre sur le div de droite sur le menu que faire?

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
<div id="general">
 
			<div id="header">
 
			</div>
 
 
			<div id="menu_gauche" class="png">
				<?php if($menu_gauche) { include("menu_gauche.php"); } ?>
				<img src="<?php echo $host;?>images/galet_elles.png" style="margin-top:40px;" alt="galet-elle-beaute-onglerie" class="png"/>
				</div>
 
 
 
 
 
		<div id="menu_droit"><img src="<?php echo $host;?>images/galets2.png"  style="margin-bottom:20px;" alt="galet-elle-beaute-onglerie" class="png"/>
				<?php if($menu_droit) { include("menu_droit.php"); } ?>
 
 
				</div>
 
			<div id="center">
 
	<?php echo $body;?>
				</div>	
 
				</div>

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
36
37
38
39
40
41
42
43
44
45
46
47
div#center {
 
width:55%;
background-color:white;
overflow: hidden;
padding: 0px 0 5px 0px;
margin:auto;
position:relative;
/*background-color:transparent;*/
 
}
#menu_droit {
font-family: Edwardian Script ITC, times news roman,arial;
height:auto;
float:right;
position:relative;
margin-top:30px;
width:20%;
}
#menu_droit a{height:18px; font-size:1.9em; font-weight:bold;color:black; text-decoration:none;margin-top: 15px; display:block;}
#menu_gauche {
font-family: Edwardian Script ITC, times news roman;
position:relative;
height:auto;
float:left;
margin-top:30px;
width:20%;
 
}
#menu_gauche a{height:18px; font-size:1.95em; font-weight:bold; color:black; text-decoration:none;margin-top: 15px; display:block;}
 
 #menu_gauche a:hover
    {text-decoration: underline;
        outline:none;
    }
QUI ENGLOBE LE TOUS
#general{ 
margin-left:auto;
margin-right:auto;
margin-top:5px;/*clear:left; */
min-width:600px;
max-width:900px;
height:auto;
text-align:center;
margin-bottom:20px;
 
} /* Bug centrage FF :

Je suis perdu je n ai jamais vu ca.

[kate59]

j'ai remarquer aussi que le div mileu descend completement en bas des deux autre avec ie?

[ploufleouf74]

Salut

J'ai eu le même genre de problème récemment alors je te fait profiter de ma solution, qu'il faudra que tu adaptes à ton cas.

En gros, il te faut un div "general" qui contient "menu_gauche" "contenu" et "menu_droit"

Ainsi dans ton html tu te retrouves avec ça :

Code :

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

1
2
3
4
5
6
 
<div id="general">	
    	<div id="menu_gauche"></div>
	<div id="contenu"></div>	
    	<div id="menu_droit"></div>	
</div>

Pour aligner horizontalement ces 3 blocs, il faut que tu mettes dans ta css quelque chose dans ce gout la :

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
 
 
#general > div {
display:inline-block; 
text-align:left; 
vertical-align:top;
}
 
#general{
height:100%;
whidth: --px;
}
 
#menu_gauche {
width:largeur de ton menu gauche;
}
 
#contenu {
width: largeur de ton contenu;
}
 
#actu3 {
width:largeur de ton menu droit;
}

[ploufleouf74]

j'ai remarquer aussi que le div mileu descend completement en bas des deux autre avec ie?

Si ton 2ème bloc descend sous les autres, c'est aussi lié à l'ordre des div dans ton html.

Ton bloc 2 doit être en 2ème position :

Code :

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

1
2
3
4
 
<div id="menu_gauche"> </div>
<div id="contenu"> </div>
<div id="menu_droit"> </div>

[5c0rPi0n]

Bonjour.

Hum, j'ai peut-être mal saisi le problème, mais tu veux trois divs en colonne à l'intérieur d'une div ?
Ce que j'ai fait récemment :

Code html :

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

1
2
3
4
5
<div id="container">
     <div id="gauche"> </div>
     <div id="centre"> </div>
     <div id="droite"> </div>
</div>

et le css :

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
#container
{
     width : ***px;
     height : ***px;
     border : 1px solid black;
     margin : auto;
}
 
     #gauche
     {
          width : ***px;
          height : ***px;
          float : left;
     }
 
     #centre
     {
          width : ***px;
          height : ***px;
          float : left;
          margin-left : ***px /* si tu veux un décalage par rapport à ta première colonne */
     }
 
     #droite
     {
          width : ***px;
          height : ***px;
          float : right;
     }

Et voilà :-)
Si c'est l'effet escompté, les deux colonnes de gauche en float left et celle de droite en float right, tu mets tes margins pour les placer horizontalement et ça marche niquel. Ainsi que pour des très vieils IE.

Si c'est pas l'effet escompté, désolé de cette perte de temps ;-)

Bonne journée !