IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Header fixe [HTML 5]


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 56
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 100
    Par défaut Header fixe
    Bonjour
    Je suis en train de développer un site "mobile" extensible, ce site a un header fixe, afin que la page de mon site ne soit pas recouverte par le header, je mets un padding.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    header{
      width:100%;
      background:#1f5689;
      color: white;
      position:fixed;
      z-index:100;
    }
     
    section{
      padding:87px 0px 0 0px;
    }

    Mon soucis est le suivant : mon padding devrait aussi être extensible car suivant la grandeur de l'écran d'affichage, les 87px ne sont des fois pas suffisants (titre masqué).
    Y aurait-il une autre possibilité : "dire" que le header est un block et rien s'inscrit en dessous?
    Merci pour votre aide
    Stéphane

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Avez-vous fixer une hauteur maximum pour votre header?
    Une technique possible est d'utiliser des REM (voir le support de REM). Ex :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html dir="ltr" lang="fr-FR">
    <head>
      <meta charset="UTF-8" />
      <title>Header fixe et gentil</title>
      <style type="text/css">
    /* Page pleine */
    html, body {
            margin: 0; padding: 0;
            height: 100%;
    }
    /* HEADER fixe */
    header {
            position: fixed;
            width: 100%;
            height: 3rem;
            z-index: 99;
            background: red;
    }
    /* Conteneur qui démarre juste après le HEADER */
    .conteneur {
            position: relative;
            top: 3rem;
    }
    section {
            margin-bottom: 10%;
            background: gray;
    }
      </style>
    </head>
    <body>
      <header>Dialogue<br />à deux.</header>
      <div class="conteneur">
        <section>Salut !</section>
        <section>Yo ! Tranquille ?</section>
        <section>Euh… Oui ! Et toi ?</section>
        <section>Wesh morray !</section>
        <section>Hein ?</section>
      </div>
    </body>
    </html>

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 56
    Localisation : France

    Informations forums :
    Inscription : Juin 2007
    Messages : 100
    Par défaut
    Merci beaucoup Muchos
    Ca fonctionne parfaitement, en effet, je n'avais pas donné de hauteur à mon header, cette hauteur était automatiquement dimensionnée par une image dont la dimension était proportionnelle suivant la taille de l'écran.

    J'ai donc utilisé cette fonction REM pour mon header, et le top de ma page mais aussi dimensionné la hauteur de l'image avec un REM.

    C'est donc résolu
    Encore merci
    Stéphane

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Header Fixe qui se charge pas avec le site
    Par DolomatS dans le forum Webdesign & Ergonomie
    Réponses: 2
    Dernier message: 26/10/2011, 19h24
  2. header fixed, contenu qui passe au dessus
    Par sebhm dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 26/09/2010, 13h32
  3. gridview avec header fixe
    Par tatayet_le_felee dans le forum ASP.NET
    Réponses: 1
    Dernier message: 07/10/2009, 19h34
  4. [CSS 3] Ancre nommée et Header fixe
    Par Midas1422 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/02/2009, 15h18
  5. Datagrid avec le header fixe
    Par jerome.fortias dans le forum C#
    Réponses: 1
    Dernier message: 14/09/2007, 16h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo