Header RC3

[_myky_]

Bonsoir,

Je teste depuis quelques jours la version 1.0 RC3.

Pour changer la couleur ou mettre une image en background, pas de soucis.
Mais je souhaitais ajouter un bandeau dans le header et j'ai un petit souci !!

/* global layout */
#page {
   width: 980px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
}
h1#logo {
   float: left;
   width: 29%;
   margin-top:0.6em;
}
#header {
   background: url(../img/header_background.png);     /* width: 1px  height: 150px */
   background-repeat: repeat-x;
   text-transform:uppercase;
   width: 100%;
   height: 150px;
   margin-bottom: 0px;

En mettant un "width" à 100%, je pensais que mon bandeau prendrait 100% de ma page, seulement il prend 100% de 980px indiqués d'origine dans la balise #page

Je n'ai pas encore trouvé quoi modifier pour que mon bandeau fasse bien toute le largeur de ma page et que tout le dessous de la boutique garde la largeur 980px !!

Si vous avez une indication, je vous remercie...

A+

[_myky_]

Bonjour,

Voici un petit visuel sur le test dont je parle.


Le bandeau fait bien la largeur de la boutique, comment lui faire prendre la largeur de la page ?


Merci d'avance.

[Cédric Girard]

Bonjour

Une solution simple est d'utiliser une image en background de ta page, de la hauteur de ton bandeau ;-)

Exemple sur mon site ou mon blog, ici par exemple => Galeries photo

J'utilise un bitmap rayé mais rien n'empêche d'utiliser un bandeau uni pour simuler un pavé coloré. Au niveau CSS, ça donne très simplement ceci :

...

html, body{
   margin: 0;
   padding: 0;
}

body{
   background: #EEE url(background.png) repeat-x;
   ...
}

...

Ton fichier background.png devant faire la hauteur de ton bandeau ;-)

[_myky_]

Bonjour,

Merci pour cette solution.

Je pensais vraiment distinguer et le "body" avec un fond image ou une création et le "header" avec une création.

Ta solution me permet de mettre mon bandeau comme un header et le reste de la boutique en fond uni.

De toute façon, comme tout le monde, j'attends la RC4 pour redétailler le CSS ;-)


A+