28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de deux blocs fixes l'un à côté de l'autre

Bonjour,

Je vous écris ce jour, car je rencontre un problème important (à mon humble niveau) concernant la mise en page de mon blog. Je souhaite en effet positionner des blocs de cette manière:
*l'un à gauche = menu 1
*l'autre à droite = menu 2 contenant mes tags
* au centre, les posts

Ma difficulté est que j'aimerais fixer les deux menus de façon à ce que quand on scrolle sur la page ces éléments soient tjrs visibles.

Concernant les propriétés, j'ai essayé d'utiliser la fonction position en attribuant la valeur 'fixed' pour les menus, et pour la partie centrale la valeur 'absolue', mais le menu 2 vient se positionner en dessous du menu 1.

URL blog badenbaden.fr
sidebar:menu1
colonne:menu2

Ci-dessous la CSS
#sidebar {
width:180px;
height:auto;
float:left;
clear:both;
position:fixed;
z-index:auto;
}

#colonne {
width:50px;
height:auto;
float:left;
position:fixed;
z-index:auto;
}

#blogroll {
width:620px;
top:50px;
padding-left:200px;
position:absolute;
z-index:1;
min-height:300px;
padding-bottom:27px;
}

pour le html
<div id="container">
<div id="colonne"></div>
<div id="sidebar"></div>
<div id="blogroll"></div>
</div>

Si je vous fournis des infos incomplètes, dites moi je rectifie..etc.
Merci bcp pour votre aide

Julien
Bonjour,

Donc, pour que tu puisse fixer les deux éléments ( Sidebar et Colonne ), tu peux les positionner en FIXED, ensuite pour positionner un élément à gauche, tu mets left:0 et pour l'élément à droite right : 0.

Sinon, les float, il servent à rien quand on positionne ( en relative, absolute ou fixed ) un élément.

dis moi si ça te convent.
Bonjour,

J'ai un nouveau problème qui se pose concernant la position de mes colonnes.
Celles-ci sont désormais en fixed.

Pour la colonne de gauche, je l'ai positionné à l'aide de cette fonction: left:50; ce qui la place à 50 px du bord gauche de la page.

Néanmoins, en voulant faire de même avec la colonne de droite si je modifie la valeur de la fonction right à 200 par ex. la colonne de droite vient se positionner sur la colonne de gauche.

de plus j'ai l'impression que la colonne de droite n'est pas positionnée dans le container.

Auriez vous des solutions à ce pb.?

merci par avance,


Cdt


Julien
Sujet clos
Aller à