Structure css comportement non voulu.

Version imprimable

20/11/2013, 16h07
jameson

Structure css comportement non voulu.
bonjour, je vous explique ma structure.

j'ai un header où j'ai une un menu horizontal avec un scrool horizontal.

en dessous de ce header, j'ai un container qui comprend une liste.

ce container est scrollable verticalement.
de plus je peux avoir des li qui sont scrollable horizontalement dans ce container.

Le problème que je rencontre :

- mon header doit etre fixe et doit rester en position lors du scrool de la liste (de ce coté ça fonctionne bien j'ai dans mon css pour mon header position: fixed;)

- mais quand je scrool mon container, celui passe en dessous de mon header alors que je voudrais que celui scroll dans ça div personnelle sans gener les scrool hotizontal et vertical.

header css :
Code:

1 2 3 4 position: fixed; z-index: 1; width: 100%;
container css:
Code:

1 2 3 4 5 padding-top: 100px; overflow: hidden; z-index: 2; overflow-y: hidden; text-decoration: none;
j'ai plus ou moins resolu le probleme en faissant ça :
j'ajoute une div autour de mon container
Code:

1 2 3 4 5 6 position: fixed; height: 85%; margin-top: 100px; overflow: scroll; width: 100%;
et je supprime le padding-top du container.

Probleme par la suite la focntion scrollTop javascript ne focntionne plus car position == fixed.

je sais pas comment mieux faire si j'enleve la position fixed tous mon header descend donc pas top
20/11/2013, 16h53
rodolphebrd

Bonjour,

ça serait intéressant de voir le code HTML pour éviter de l'écrire.

voila

Code:

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
43
44
<header id="header" style="display: block;">
    <hgroup>
      <div id="headerApp">
        <img src="images/logo.png">
        <input id="paramsButton" type="button">
      </div>
    </hgroup>
 
 
  <div id="menuContainer">
    <nav id="menu">
      <ul>
        <li class="m0"><a href="#app/m0">val1</a></li>
        <li class="m1"><a href="#app/m1">val2</a></li>
        <li class="m2"><a href="#app/m2">val3</a></li>
        <li class="m3"><a href="#app/m3">val4</a></li>
        <li class="m4"><a href="#app/m4">val5</a></li>
        <li class="m5"><a href="#app/m5">val6</a></li>
        <li class="m6"><a href="#app/m6">val7</a></li>
      </ul>
    </nav>
  </div>
</header>
 
<div class="scroll" style="position: fixed; height: 85%; margin-top: 100px; overflow: scroll;width: 100%;">
 
    <div id="container" style="display: block;">
 <ul>
 
	<li class="mea" idcontent="446588">
 
		</li>
<li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li><li class="mea" idcontent="446588">
 
		</li>
     </ul>   
      </div>
  </div>