28172 sujets

CSS et mise en forme, CSS3

Div conteneur: wrap

Bonjour

je mets ceci en nouveau sujet , car le problème est un peu indépendant de mon précédent post même si il s'y rapporte.
J'ai fait un conteneur global pour pouvoir donner une taille précise et un centrage horizontal.
Mais a-priori la largeur du wrap n'agit que sur le body et le site lui reste "fluide" sur toute la largeur.

Cordialement

www.cahue.net/test-4/


<body>
<div id="wrap">

    <div id="header">
        <h1>Header fixe, hauteur 100 px</h1>
    </div>

    <div id="col-gauche">
		<h3> Colonne fixe à gauche, de largeur 200 px </h3>
    </div>
	
    <div id="col-droite">
		<h3> Colonne fixe à droite, de largeur 200 px </h3>
    </div>
	
    <div id="contenu">
        <h2>Page de contenu scrollable</h2>
    </div>

</div>
</body>




 body {
			
        }
		
	#wrap {
		width: 1000px;
		margin-right: auto;
		margin-left: auto;
                height: 100%;			
	}
		
        #header {
            position: fixed 
            position: absolute; 
            height: 100px;
            width: 100%;
            top: 0;
            left: 0;
            background: blue;
            z-index: 2;
        }

        #col-gauche {
            position: fixed 
            position: absolute; 
            height: 100%;
            width: 200px;
            top: 0;
            left: 0;
            padding-top: 100px;
            background: yellow;
            z-index: 1;
	}
		
	#col-droite {
            position: fixed 
            position: absolute; 
            height: 100%;
            width: 200px;
            top: 0;
            right: 0;
            padding-top: 100px;
            background: red;
            z-index: 1;
	}
		
        #contenu {
            margin-top: 100px;
            margin-left: 200px;
	    margin-right: 200px;
        }
Salut,

C'est normal, puisque les éléments en position:fixed prennent pour référence la zone de visualisation et non leur parent positionné.

Pour placer correctement ta colonne gauche, tu peux lui mettre un left:50% et un margin-left:-500px.
Et pour la colonne droite, un right:50% et un margin-right:-500px.
ça fonctionne, mais en ayant aussi rajouter dans la balise css header



        left: 50%;
	margin-left:-500px;
	right: 50%;
	margin-right:-500px;


Mais lorsque l'on réduit la largeur de la fenetre du navigateur, l'effet n'est pas terrible

www.cahue.net/test-5/

Je vais essayer les min-width et max-width sur le body ou le wrap

Cordialement
Bonjour,

Comme le souligne Agylus, ton problème n'est pas un bug, mais une mauvaise compréhension du positionnement en CSS.

Est-ce que le positionnement absolu est vraiment nécessaire pour ton design ?
Et je viens de rajouter la même chose dans le body

     left: 50%;
     margin-left:-500px;
     right: 50%;
     margin-right:-500px;


Par contre je bute pour que le texte scrollable ne touche pas les bords des colonnes droite et gauche... ni les margin ni les paddings sur le contenu ou sur le body...

Par contre toujours le même effet lorsqu'on retrecit la fenetre du navigateur d'où mon idée d'utiliser un min-width...

www.cahue.net/test-6/
Bonjour,

le positionnement absolu n'était pas initialement une exigence.
J'avais un design fluide avec le header, et les deux colonnes en position fixed afin de simuler des frames.
Avec les écrans ayant une plus grande résolution, la zone contenu s'élargit avec des lignes devenant trop longues pour être agréables à lire.
D'où mon idée de renoncer un design fluide occupant tout l'écran et d'essayer un design centré avec une largeur maxi.

Cordialement
Sujet clos
Aller à