float, position relative, et scrollbars
Bonjour à tous !
Je pensais toucher en CSS, mais apparemment il doit me manquer certains principes de base...
Je développe un site pour lequel j'ai pensé à ajouter un "panneau latéral" qui peut se cacher et s'afficher grâce à un bouton. Initialement il est caché.
Les mots importants sont : float, position:relative
Le problème est le suivant : quand je suis sur une page qui est contenue dans la fenêtre (pas de scrollbar pour le body), et que j'affiche le panneau latéral, il s'affiche au bon endroit (à gauche de mon conteneur principal, verticalement au milieu), mais on dirait que c'est "comme" s'il était affiché deux fois, car la scrollbar du body apparaît, et si on scroll il y a exactement la place prise en hauteur par ce panneau latéral. C'est pas logique, si ?
Evidemment, mettre un div clear: both après ces deux éléments (ou tout simplement virer le float: left) c'est encore pire.
Voici mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div id="topContainer">
<div id="mainContainer">
contenu de la page
</div>
<div id="friendsListButton" class="pointer" onclick="SDialogs.toggleFriendsList();"></div>
<div id="friendsList">
<h1>Mes favoris</h1>
blablabla
</div>
</div>
</body> |
Et le CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#friendsListButton
{
float: left;
width: 12px;
height: 36px;
position: relative;
left: -14px;
/*top: -265px; mis à jour dans footer.inc.php */
}
#friendsList
{
display: none;
float: left;
width: 0;
height: 250px;
position: relative;
left: -12px;
/*top: -450px; mis à jour dans footer.inc.php */
} |
En fait j'ai eu le même problème pour une petite popup de notification (à la msn) en bas à droite du body, car je l'avais mise en position: absolute. J'ai corrigé le problème en la mettant en position: fixed, bizarrement.
Si quelqu'un voit le souci, je suis vraiment preneur !
Merci à tous :)
PS : je ne peux pas utiliser le position: absolute (toutes façons il me semble que ça bug aussi d'après mon expérience avec la popup), ni un position: fixed (le seul qui semble marcher) car mon topContainer est centré sur la page.
