Problème centrage image et background-repeat
Bonjour à toutes et à tous, voici mon problème.
Comme vous pouvez le voir sur la maquette suivante :
http://nsa30.casimages.com/img/2012/...2093163576.jpg
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:
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:
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
http://nsa30.casimages.com/img/2012/...0627733486.png
http://nsa29.casimages.com/img/2012/...2070414930.png
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%
http://nsa29.casimages.com/img/2012/...2222781523.png
http://nsa30.casimages.com/img/2012/...2409916663.png
(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
http://nsa29.casimages.com/img/2012/...2545396122.png
http://nsa29.casimages.com/img/2012/...2612700991.png
Je vous remercie d'avance pour votre aide, cordialement.
P.S: désolé pour les éventuelles fautes d'orthographe :S
