float, position relative, et scrollbars

**Lideln75** · 30/04/2009, 13h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 
#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.

**Bisûnûrs** · 30/04/2009, 13h41

Quand tu renseignes des coordonnées alors que tu as un position:relative sur l'élément en question, il se décale effectivement mais prend en plus l'espace qu'il avait à l'origine (sans y être affiché).

Dans ton cas, il me semble que tu pourrais te passer du position:relative, et au lieu de renseigner left et top, plutôt renseigner margin-left et margin-top.

**Lideln75** · 30/04/2009, 14h25

Mmmh bonne idée ! J'aurais dû y penser, je vais essayer de suite !

Mais tu ne trouves pas ça "stupide" qu'il prenne la place "d'origine" alors qu'il n'y est pas affiché ? Enfin c'est sûr c'est pas moi qui écris les specs CSS, mais bon je trouve ça bizarre et pas très naturel.

float, position relative, et scrollbars

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager