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

Mise en page CSS Discussion :

Bandeau de titre prioritaire


Sujet :

CSS

  1. #1
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut Bandeau de titre prioritaire
    Bonjour,

    Je vous propose le code ci-dessous.

    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
    <!DOCTYPE html>
    <html>
     
    <head>
    <meta charset="utf-8">
    <style>
    h1 {
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            margin:0px;
            font-size: 1.3em;
            padding: 7px;
            padding-left: 15px;
            background-color: #444;
            background-image: linear-gradient(#666, #333);
            color: #ddd;
            text-align: left;
    }
    div {
     
    }
    </style>
    </head>
     
    <body>
    <h1>Le titre</h1>
    <div>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    </div>
    </body>
     
    </html>

    Il permet d'obtenir le résultat ci-dessous.
    Nom : im1.png
Affichages : 593
Taille : 21,3 Ko

    Je voudrais que la barre de défilement, à droite, n'empiète pas sur le bandeau du titre. Je voudrais d'obtenir le résultat ci-dessous.
    Nom : im2.png
Affichages : 354
Taille : 21,3 Ko

    Comment procéderiez-vous pour obtenir ce résultat? Merci par avance pour vos réponses.

  2. #2
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 450
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 450
    Points : 4 600
    Points
    4 600
    Par défaut
    tu rajoutes un margin-top a ton corps du site de la hauteur de ton header ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Doksuri a écrit : tu rajoutes un margin-top a ton corps du site de la hauteur de ton header ?
    C'est ce que j'ai essayé de faire, sans obtenir le résultat escompté.

  4. #4
    Membre régulier
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Juillet 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Juillet 2016
    Messages : 65
    Points : 103
    Points
    103
    Par défaut
    Tu peux faire ça:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
     
    <header>
    	Menu
    </header>
     
    <div class="content">
    <p>...</p>
    <p>...</p>
    </div>
     
    </body>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    body{
    	overflow: hidden;
    }
     
    .content {
    	height: 100%;
    	overflow-y: scroll;
    }

  5. #5
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Je viens d'essayer différentes manières d'intégrer la propriété overflow dans la feuille de style, mais je n'ai pas réussi à obtenir l'effet attendu.

  6. #6
    Membre régulier
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Juillet 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Juillet 2016
    Messages : 65
    Points : 103
    Points
    103
    Par défaut
    C'est surement du au fait que ton h1 soit en position fixed, réutilise le code que je t'ai donné en enlevant cette position fixed.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    il te faut mettre ton « content » en position absolute et l'étirer sur le reste de la fenêtre.

    Exemple :
    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
    42
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    html, body {
      overflow : hidden;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    h1 {
      margin:0px;
      font-size: 1.3em;
      padding: 7px;
      padding-left: 15px;
      background-color: #444;
      background-image: linear-gradient(#666, #333);
      color: #ddd;
      text-align: left;
    }
    div {
      overflow: auto;
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      top: 3em; /* à ajuster */
    }
    </style>
    </head>
    <body>
    <h1>Le titre</h1>
    <div>
    1st ligne
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    </div>
    </body>
     </html>
    On en avait parler il y à jadis dans cette discussion Div hauteur automatique sans dimension en absolu et on avait abordé les flex-box CSS ou JS.

    Résultats :
    • CSS3 Flexbox, en CSS3 en utilisant les flexBox.
    • JS 4 Flexbox, en javascript mais avec un autre positionnement que celui que tu utilises.

  8. #8
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,

    ecared a écrit : C'est surement du au fait que ton h1 soit en position fixed, réutilise le code que je t'ai donné en enlevant cette position fixed.
    En réponse à ecared : Pour que le titre soit toujours visible, il faut que h1 soit "en position fixed"?

    Je vais étudier ce que me propose NoSmoking, puis je vous tiendrai au courant.

  9. #9
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,

    Merci pour ta solution, NoSmoking. Les liens que tu proposes sont également très intéressants, je n'ai pas fini d'étudier ce sujet. Encore merci!

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

Discussions similaires

  1. [Débutant] Retirer le bandeau titre d'une Form (Lien mère - fille)
    Par EvT Chess38 dans le forum Visual Studio
    Réponses: 1
    Dernier message: 13/12/2012, 14h40
  2. Titre de page : Bandeau Graphique VS Texte
    Par AngelaG dans le forum Référencement
    Réponses: 6
    Dernier message: 13/10/2010, 12h31
  3. [VB6] masquer la barre de titre d'une form
    Par tiboleo dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 09/12/2002, 18h54
  4. [VB6] Déplacer la form sans cliquer sur la barre de titre
    Par Ingham dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 14/11/2002, 03h09
  5. Réponses: 2
    Dernier message: 17/10/2002, 17h16

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