Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Responsive Header ?
Auteur
Soundy
#
Citer
11 Posts
 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
^
kenor
#
Citer
399 Posts
 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;
}
^
Kaelig
#
Citer
81 Posts
 @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).
http://kaelig.fr 
^
kenor
#
Citer
399 Posts
 Je viens de tester, ça centre bien son header à priori. A moins que je n'ai pas compris la question.
^
Soundy
#
Citer
11 Posts
 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.
^
kenor
#
Citer
399 Posts
 Pour ton soucis d’ascenseur, comme j'indique, il faut que tu supprimes tous les width: 1600px; (aucune taille à donner, sinon width: 100%;)
^
Soundy
#
Citer
11 Posts
 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é..
^
Soundy
#
Citer
11 Posts
 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
^
Prévenir un modérateur
Répondre au sujet
Aller à