Problème centrage image et background-repeat

**Edwardo39** · 19/06/2012, 12h14

Bonjour à toutes et à tous, voici mon problème.

Comme vous pouvez le voir sur la maquette suivante :

J'aimerais que l'image (= le dégradé) soit toujours centré peut importe la résolution de l'écran du visiteur (comme sur facebook, la bande prend toute la largeur de l'écran et pourtant l'interface ne bouge pas et reste centré).

J'ai essayé plusieurs façon.

La première :

J'ai extrait depuis la maquette que vous avez vu une bande, sur l'extrémité gauche, de 1px. J'ai ensuite créer une div dans laquelle se trouvais 3 autres div aligné. La première contenais la bande de 1px et une propriété css background-repeat: repeat-x. La 2ème contenais l'image(=le dégradé). Et la dernière similaire à la première mais de l'autre extrémité.
Pour être plus claire voici le code et le résultat (j'utilise des couleurs bien différentes volontairement pour mieux voir) :

HTML

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
 
<div id="top">
            	<div id="bande_gauche"></div>
 
                <div id="banniere">
 
            		<div id="logo-1"></div>
 
               		<div id="logo-2"></div>
 
                	<div id="menu">
                		<a href="index.php">Accueil</a>
                    	<a href="index.php?page=1">Présentation</a>
                    	<a href="index.php?page=2">Galerie photos</a>
                    	<a href="index.php?page=3">Contacts</a>
                   	 <a href="index.php?page=4">En savoir plus ?</a>
               		</div>
 
            	</div>
 
                <div id="bande_droite"></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
22
 
a {
	color: white;	
}
#bande_gauche {
	height: 279px;
	float: left;
	background-color: green;
	background-repeat: repeat-x;
}
#banniere {
	width: 1518px;
	height: 279px;
	float: left;
	background-color: red;
}
#bande_droite {
	height: 279px;
	float: left;
	background-color: green;
	background-repeat: repeat-x;
}

Reultat

Comme vous pouvais le constater, les bandes verte qui devrait encadré le rectangle rouge ne sont pas là...

La deuxième :

Cette fois si au lieu de répété l'image, je me suis dis autant prendre le code héxadécimal de la couleur de l'extrémité, l'intégrer dans la div top centrer mon dégradé sur ce fond. Le problème cette fois est le centrage. J'ai testé plusieurs margin (margin-left: XX%, margin: auto, margin-left: auto) mais le soucis est que dans le cas où l'intervention du fond pour combler l'espace blanc, le dégradé et quand même décalé(se qui peut provoquer des effet de scrollbar horizontale)

Quelques exemples :

- Avec un margin-left: XX%

(pour cette dernière le bloc semble centré mais j'ai mal choisit mon zoom ^^"car avec les autres il ne l'est pas...)

-Avec un margin-left: auto et un margin: auto

Je vous remercie d'avance pour votre aide, cordialement.

P.S: désolé pour les éventuelles fautes d'orthographe :S

**mcoutant** · 19/06/2012, 17h58

Salut Edwardo39,

Ton site prendra toute la largeur de l'écran ou à t-il une taille définis (exemple: 960px ?)

**Edwardo39** · 19/06/2012, 18h29

Ouais faudrait qu'il prenne toute la largeur de l'écran (et peux importe la résolution), mais comme tu peux voir sur la maquette il y a un dégradé radiale qui lui sera une image avec une taille définit et qui doit rester centré. En gros la première solution décrit bien se que je voulait faire (dommage qu'elle ne marche pas x)). En gros Rajouter de la couleur a chaque extrémité de l'image comme ceci :

(sauf qu'a la place du rouge, mettre la couleur qui correspond à la fin du dégradé)

Et oui j'ai fini par trouvé moi même ^^.

En tout cas merci de ton intérêt pour mon problème c'est cool !
Et si la solution t'intéresse je peux t'envoyer le code