Responsive Header ?

Bonsoir à tous.
Suite à la lecture de la page Alsacréation dédiée au centrage des éléments,
j'ai (tenté d')appliqué ceci dans un tempate que j'ai adapté, ici :

.wrapper {
background: url("/images/interf/photos-top1.jpg") no-repeat scroll center top;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width:1600px;
}

et

header {
background: url("/images/interf/header_bg.png") no-repeat scroll center top transparent;
height: 320px;
position: relative;
margin: 0 auto;
width: 1600px;
z-index: 3;
}

En fait, je cherche à centrer mon header, qui fait 1600 px de large, sans ascenseur horizontal.

Quelqu'un(e) a une idée ?
D'avance merci.
Soundy

C'est ton fond que tu dois centrer, pas la bloc qui le contient.

Donc tu vires le width:1600px; d'ailleurs BCP trop grand.

Et tu centres ton background

background:url(ton_image) 50% 0;

header {
background: url("../../../images/interf/header_bg.png") no-repeat 50% 0pt ;
height: 320px;
position: relative;
z-index: 3;
}

@Kenor : C'est plus compliqué que ça en a l'air, il y a un slideshow en position absolue.

En jouant d'overflow:hidden sur des blocs en 100% de largeur et en centrant le slideshow ça doit pouvoir se faire.

Si ça peut te mettre sur une piste…

Par contre ça ne sera pas "responsive" (ne pas faire d'amalgame avec le responsive web design).

Je viens de tester, ça centre bien son header à priori. A moins que je n'ai pas compris la question.

Bonsoir.
Désolé pour le delai, mais j'ai du trouver un plan B pour me connecter.
Ma carte réseau intégrée vient de me lâcher... 8-((

Alors, tout d'abord, merci pour vos contributions.

Je reformule :
Je souhaite proposer ce header en 1600px pour les écrans 16/9, et qu'il soit tronqué, mais centré et sans ascenseur, pour les résolutions plus faibles.

Je pense avoir résolu le problème de centrage des contenus dans le template grace à la réponse de Kenor. Mais j'ai toujours un ascenseur...

A cause de quelle valeur "trop grande" ce foutu ascenseur s'affiche-t-il ?
Je poursuis mes essais avec les infos de Kaelig...

Merci à vous.
Soundy

PS : Ok, pour le "responsive"... c'était juste pour l'accroche, merci ;-D.

Pour ton soucis d’ascenseur, comme j'indique, il faut que tu supprimes tous les width: 1600px; (aucune taille à donner, sinon width: 100%;)

Bonsoir à tous.
Suite aux conseils de Kenor,
j'ai bien supprimé mes largeurs de 1600px partout et surtout dans :

<wrapper>
<span id="headertop">
<header>

Mais l'ascenseur s'affiche toujours...

J'ai également testé du overflow:hidden, mais sans succès.
Une autre idée ?

@kenor : L'article de Raphael, propose de positionner le conteneur. C'est pourquoi j'ai agiscomme ça. Mais j'avoue n'avoir pas tout saisi de ce billet...


Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré (il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc s'il est positionné en absolu (voir la partie ci-dessous).

Cas des éléments positionnés
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
En effet, si votre conteneur est placé dans le flux (avec des marges) et que votre contenu est positionné (absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au dernier parent positionné : le document.

Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant une position relative, vous pouvez garder son centrage avec marges automatiques, tout en incorporant du contenu lui aussi positionné..

Alors, voici (enfin) la solution, ça peut peut être servir à quelqu'un :

#headertop {
display: block;
height: 250px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: absolute;
top: 35px;
width: 100%;
z-index: 2;
}

Ici, j'ai utilisé un <span>,
mais ça devrais également marcher avec un div et donc en retirant le style display: block;

Merci encore à tous.
@+ Soundy