Placements de DIV

**bruman** · 11/09/2008, 11h04

Bonjour,

je cherche à positionner mes div comme ceci :

un bandeau vertical à gauche puis à coté, trois div : une pour le bandeau du haut, une pour un menu horizontal et une dernière pour tout afficher. Enfin, une dernière div verticale à droite.(équivalente à la première).

Schématiquement, ca devrait donner ça : (désolé pour le schéma...)

______________________________________________________________
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''div bandeau'''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|-----------------------------------------|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|''''''''''''''''''''''''''''''''div menu''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
| div Gauche |-----------------------------------------| div droite
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''div affichage''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
|''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''|'''''''''''''''''''''''''''''''''|
------------------------------------------------------------------------

Mon problème réside dans le placement des divs et des images en background de ces div:

- Sous internet explorer, l'image contenu dans les div droite et gauche se repète bien en fonction de la taille de la div d'affichage. Si cette dernière est grande, les div droite et gauche se mette à la même taille.
Par contre, ma div qui englobe toute ces div n'est pas centrée à l'écran.

- Sous firefox, ma div est bien centrée. Par contre, les div de droite et de gauche reste de taille fixe : la taille de l'écran. Si la div d'affichage est super grande (avec une scrollbar sur l'écran), les div gauche et droite reste à la même taille. Elle ne s'adapte pas à la div centrale. Donc mes images s'arrête.

Voilà. Y aurait-il un moyen de centrer ma div sous internet explorer et de faire en sorte que sous firefox, mes div gauche et droite s'adapte à la grandeur de la div d'affichage.

Merci.

Voici mon code (très simple pourtant...) :

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
 
<html>
   <head>
     	<title>tableaux</title>
   </head>
   <body bgcolor="#000000">
 
<div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:0px auto;">
 
	<div id="gauche_deco" style="background-image: url('bord_gauche.jpg'); float:left; clear:both; width:150px; height : 100%; background-color:#000000;">
	</div>
 
	<div id="conteneur" style="float:left; width:700px; ">
   		<div id="bandeau" style="background-image: url('bandeau2.jpg'); width:700px; height:173px; background-color:#00CCFF;">
   		</div>
 
   		<div id="menu" style="width:700px; height:50px; background-color:#000000;">
		</div>
 
		<div id="contenu" style="width:700px; height:2000px; background-color:#f8d05e;">
		</div>
 
	</div>
 
	<div id="droite_deco" style="background-image: url('bord_droit.jpg'); float:left; width:150px; height : 100%; background-color:#33FF99;">
	</div>
 
</div>
   </body>
</html>

**Helfima** · 11/09/2008, 12h13

il y a une erreur ici

Code :

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

<div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:0px auto;"

corrige pas ca déjà

Code :

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

<div style="background-color:#000000;width: 1000px; height: 100%; position:relative; margin:auto;"

**kohsaka** · 11/09/2008, 13h00

pour un design de ce type essaye plutôt ça :

HMTL :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="left"></div>
<div id="right"></div>
<div id="main">
    <div id="ban"></div>
    <div id="menu"></div>
    <div id="affichage"></div>
</div>

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
 
body {
    text-align: center;
}
 
#left {
    float: left;
    width: 200px;
}
 
#right {
    float: right;
    width: 200px;
}
 
#main {
    float: middle;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

attention height: 100% ne fonctionne pas sous ie6 je crois

**bruman** · 11/09/2008, 14h14

Le 0px ne change rien.

Concernant les float left, middle et right, cela ne fonctionne pas la div de droite se retrouve à droite de l'écran mais en dessous des deux autre div.

Merci. D'autres idées?

**c_s_s** · 11/09/2008, 14h38

Bonjour,

La proposition de kohsaka est bonne, mais les largeurs ne correspondent peut-être pas avec les tiennes.

kohsaka proposent 3 blocs qui font une largeur totale de 1100px (200 + 700 + 200). Tu sembles avoir une largeur totale de 1000px. Le décallage du bloc droit vient peut-être de là.

Par contre kohsaka, je n'avais jamais vu float: middle; avant.
Je ne sais pas si ça existe vraiment, mais de toute façon on peut s'en passer ici et ne pas préciser de float pour ce bloc (ni de largeur).

Pour complèter la proposition de kohsaka, je pense que ceci conviendrait à la structure que tu souhaites obtenir :

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
#main {
	width: 1000px;
	margin: 0 auto;	
}
#gauche_deco {
	float: left;
	width: 150px;	
	background: #000 url(bord_gauche.jpg); 
	height: 100%;	
} 
#droite_deco {
	float: right;
	width: 150px;		
	background: #33FF99 url(bord_droit.jpg); 
	height: 100%;
}

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="main">
	<div id="gauche_deco"></div>
	<div id="droite_deco"></div>
	<div id="conteneur">
	    <div id="bandeau"></div>
	    <div id="menu"></div>
	    <div id="contenu"></div>
	</div>
</div>

Au passage, si tu veux que tes colonnes de droites et de gauche prennent toute la hauteur de l'écran, il faut penser à définir une hauteur de 100% pour html et body dans le CSS.