Discussion :

[alas70]

Bonjour a tous j'ai un petit probleme de conception avec mon site internet.
Mon site se décompose en 2 parties, une partie haut et une partir bas, c'est la partie haut qui nous concerne, dans cette partie je vais avoir la banniere de mon site.
Ma banniere fait 1024px de longeur pour 230px de hauteur.

Mon problème est le suivant : Si la résolution de l'écran est supérieur a 1024px je voudrais que les cotés droit et gauche de la banniere soit extensibles (plein écran) sachant que mon coté gauche et coté droit sont différents.

J'ai créer un image de 1px de large sur 230px de haut appelé banniere_gauche et une autre image avec les memes dimensions appelé coté droit.

voici mon code xhtml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
<div id="global">
<div id="haut_site">
 
				<div id="banniere_gauche"></div>
                                <div id="banniere"></div>	
				<div id="banniere_droite"></div>
 
	</div>
        <div id="bas_site"></div>
</div>

et voici mon code 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
/*********** partie haut du site -- contient banniere ************/
 
 
#haut_site{height:230px; width:100%; clear:both;}
#banniere{ background:url(img_interface/banniere.jpg) no-repeat; height:230px; 
width:1024px;
float:left;
}
 
#banniere_gauche{background:url(img_interface/cote_gauche_banniere.jpg) repeat-x; 
height:230px; 
width:100%; 
float:left;}
 
#banniere_droite{background:url(img_interface/cote_droite_banniere.jpg) repeat-x; height:230px; width:100%; float:left;}

Mon problème est que j'ai mon coté gauche qui s'etend sur tout le site, en dessous j'ai ma bannière et encore en dessou j'ai mon coté gauche qui s'étend également sur tout le site. Je n'arrive pas a centré ma banniere et avoir les deux coté gauche et droit extensible.

J'espere n'avoir pas trop été maladroit dans mon explication et merci pour votre aide

[Halleck]

pour ton header du centre :

Code :

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

1
2
margin-left:auto;
margin-right:auto;

[{F-I}]

Et margin: auto; seul ne suffit pas ?

[alas70]

Merci pour vos réponses mais le problème c'est que cela ne marche pas.

Mon problème est que mes div se placent l'une au dessus de l'autre et je n'arrive pas a les mettre sur la même "ligne", de plus, sachant que j'ai spécifié la taille de ma div

Code :

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

#haut_site{height:230px; width:100%; clear:both;}

je ne comprend pas pourquoi les div ne reste pas sur le même plan. ( Ce qui fait que ma hauteur de haut_site n'est plus respectée.)

[alas70]

Ahhh j'ai enfin trouvé la solution, je vais donc vous mettre mon code HTML et CSS vous comprendrez comme ca;

C'est peut etre pas une bonne solution mais le principal c'est que ca marche

En fait j'ai modifier un peut l'architecture de mon HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="conteneur">
 
			<div id="background">
				<div id="b_cote_gauche"></div>
				<div id="b_cote_droite"></div>
 
			</div>	
			<div id="banniere"></div>
 
 
	</div>

et voici mon code CSS :

Code :

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

1
2
3
4
5
6
7
8
#conteneur{height:200px; width:100%;}
 
#background{height:200px; width:100%}
 
#b_cote_gauche{background-color:#3300FF; width:50%; float:left; height:200px; z-index:1;}
#b_cote_droite{background-color:#6600FF; width:50%; float:right; height:200px; z-index:1;}
 
#banniere{ width:1024px; background-color:#006600; height:200px; margin-left:auto; margin-right:auto; margin-top:-200px; z-index:5; position:relative;}