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
Quelqu'un peut m'aider sur ceci ?
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; }
Partager