Centre une image d'en-tête, indépendamment de la taille de la page
Ma page web a une image d'en-tête, qui reste toujours en haut de la fenêtre. Lorsque la fenêtre est maximisée l'image d'en-tête est centré, mais lors de la visualisation dans une petite fenêtre (ou un smart-phone browser) l'en-tête est à gauche de la fenêtre, et le côté droit recadrée. Parce que l'en-tête div est plus large que le contenu de la page, à l'horizontale barre de défilement s'affiche lorsque la fenêtre est plus petite que l'en-tête, pas de la page.
Je voudrais l'en-tête de l'image afin de la centrer sur la page, en tout temps, avec les deux côtés gauche et droit d'être recadrée si la fenêtre est plus petite que l'en-tête. Aussi l'horizontale de la barre de défilement pour être activée uniquement si la largeur de la fenêtre est inférieure à la largeur de la page.
Cette image pourrait l'expliquer plus clairement:
http://postimage.org/image/49ne3k3o/
Mon code pour l'instant:
CSS:
#headerwrap {
position: relative;
width: 998px;
height: 100px;
margin: 0 auto;
pointer-events: none;
}
#header{
position: fixed;
top: 0;
width: 998px;
margin: 0;
background: url('../images/top.png') no-repeat;
height:100px;
z-index: 1;
pointer-events: none;
}
HTML et mise en œuvre:
<div id="headerwrap"\>
<div id="header">
</div>
</div>
(la page est 690px large, la tête est 998px)
Toute aide serait grandement appréciée.
OriginalL'auteur James | 2011-06-25
Vous devez vous connecter pour publier un commentaire.
Vous devez définir
left: 50%
sur l'élément d'en-tête qui aposition: fixed
, puis appliquer une marge négative de la moitié de la largeur de l'élément à centrer.Voici un petit violon: http://jsfiddle.net/blineberry/w8P2S/
Vous n'avez pas vraiment besoin d'un wrapper pour cela.
OriginalL'auteur Brent
Vous avez besoin de la marge négative-gauche, comme Brent dit, mais cette marge varie selon le navigateur de l'utilisateur résolution, et pourrait être un problème si l'utilisateur redimensionne le navigateur.
Pour comprendre que la marge j'ai utilisé une simple méthode jquery qui fonctionne comme un charme à chaque fois:
Cette fonction doit être appelée sur le document prêt pour la première fois, et puis elle est appelée chaque fois que le navigateur est redimensionnée par l'utilisateur.
OriginalL'auteur javlae
Serait-il acceptable pour l'en-tête de rétrécir à la taille de la fenêtre?
Aussi, avez-vous besoin de cela pour être un pur HTML /CSS solution?
edit:
Voici un petit script que j'ai juste écrit que va redimensionner les deux divs à la taille de la fenêtre du navigateur. Il ne nécessite pas de bibliothèques (comme jQuery).
Ou si vous voulez un écart sur les deux côtés, vous pourriez faire quelque chose comme:
Donc ya, en résumé:
Également, de modifier le wrapper de
position: absolute; top: 0px
l'intérieur de la div àposition: absolute; top: 0px;
Espérons que cette aide!
k juste un sec.. je suis en train d'écrire quelque chose pour toi
Il suffit de changer la valeur de rembourrage pour définir l'écart des deux côtés (ce qui sera toujours le même des deux côtés quelle que soit la taille de la fenêtre du navigateur)
OriginalL'auteur Inversus
Une autre option serait de retirer le fond bien de la #header div et le mettre dans le #headerwrap comme suit:
J'ai aussi un peu changé de style de rendre tout le centre de la croix-navigateur. Et pour garder la barre de défilement horizontale de révéler, vous définissez la #headerwrap's débordement propriété caché.
Qui devrait résoudre votre problèmes.
Oh, Haha. Désolé à ce sujet. Je ne peut pas faire beaucoup de programmation web plus. J'ai surtout faire c#, dont la syntaxe ci-dessus aurait fonctionné. Je vais changer cela.
OriginalL'auteur dbooth