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 :

Fixed header sur un site ("boxed layout")


Sujet :

CSS

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Février 2011
    Messages
    21
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 21
    Points : 17
    Points
    17
    Par défaut Fixed header sur un site ("boxed layout")
    Bonjour,
    j'ai une div "page" qui contient tout le site en "boxed layout" (c'est à dire pas en pleine largeur).
    J'ai une div header-text-nav-container que je souhaite positionner en "fixed".
    Ensuite je souhaiterais faire passer le reste du site derrière cette div quand on scroll mais en sachant que le body a un padding-top de 30px.
    J'arrive à faire passer le reste du site derrière la div header-text-nav-container mais le problème est que ça ne prend plus en compte le padding-top de 30px.

    HMTL
    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
    <body>
    <div id="page">
    <header id="masthead" class="site-header clearfix">
      <div id="header-text-nav-container">
        <div class="inner-wrap">
          <div id="header-text-nav-wrap" class="clearfix">
    	  <div id="header-left-section">
    		 <div id="header-logo-image">
    			 <a href="http://....."><img src="http://...logo.png"></a>
    		</div><!-- #header-logo-image -->
    		<div id="header-text">
    			<h1 id="site-title"> <a href=".....">Title</a> </h1>
    		</div><!-- #header-text -->
    		</div><!-- #header-left-section -->
    		<div id="header-right-section">
                   <nav id="site-navigation" class="main-navigation" role="navigation">
    		[...]
                   </nav>					
    	       </div><!-- #header-right-section --> 
             </div><!-- #header-text-nav-wrap -->
        </div><!-- .inner-wrap -->
      </div><!-- #header-text-nav-container -->
      <section id="featured-slider">
    		[...]	
     </section>
    </header>

    CSS
    Code : 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
    body {
        padding-top: 30px;
        padding-bottom: 30px;
    }
     
    #page {
        max-width: 1268px;
        margin: 0px auto;
        background-color: #FFF;
    }
     
    #header-text-nav-container {
        border: 1px solid #F00;
        z-index: 999;
        position: fixed;
        background: none repeat scroll 0% 0% #FFF;
        display: inline-block;
    }
     
    .inner-wrap {
        margin: 0px auto;
        max-width: 1218px;
    }
    Quelqu'un peut m'aider sur ceci ?

  2. #2
    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 112
    Points
    44 112
    Par défaut
    Bonjour,
    un peu de mal à comprendre.
    en sachant que le body a un padding-top de 30px.
    pourquoi ne pas le mettre plutôt sur la DIV conteneur.

    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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Bandeau Fixed</title>
    <style>
    html, body{
      margin:0;
      padding:0;
    }
    #page{
      height:100em;
      padding-top:4.5em; /* un peu plus que la hauteur de l'entête */
    }
    #entete{
      position:fixed;
      background:#CDE;
      left:0;
      top:0;
      right:0;
      height:4em;
    }
    </style>
    </head>
    <body>
    <div id="page">
      <div id="entete"><h1>L'entête de la page</h1></div>
      <div>
        Le contenu de la page ici...
      </div>
    </div>
    </body>
    </html>

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

Discussions similaires

  1. [Silverlight] Afficher tous les page layout dispo sur un site
    Par PlaTyPuSs dans le forum Développement Sharepoint
    Réponses: 3
    Dernier message: 23/12/2010, 16h01
  2. [Joomla!] Quel est le layout utilisé pour les annonces sur le site officiel?
    Par _skip dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 0
    Dernier message: 07/06/2010, 12h40

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