28173 sujets

CSS et mise en forme, CSS3

3 boites principales dont 2 qui s'adaptent...

Bonjour à tous, je viens d'arriver sur le forum, j'ai bien essayé de trouver une solution à mon problème, mais je n'en ai pas trouvé.. donc je vous le soumet ..

Bon, j'avais commencé à vous écrire le pourquoi du comment de mes besoins.. mais c'est long et ça ne vous servira pas à grand chose.. donc je recommence en allant à l'essentiel :

j'ai besoin de créer 3 boites css que je placerai dans des div : une à gauche, une centrale (qui doit être centrée), et une à droite. La boite centrale fait 850px de largeur et s'adapte au contenu en hauteur. Les deux boites de droite et gauche doivent s'adapter au reste de la taille de la fenêtre en largeur, et doivent faire la meme taille que la centrale en hauteur.

Je récapèpète :
- boite centrale : largeur : 850 px, hauteur : auto, centré.
- boite gauche : largeur : (taille de la fenètre - 850px)/2, hauteur : égale à la boite centrale.
- boite droite : largeur : (taille de la fenètre - 850px)/2, hauteur : égale à la boite centrale.

Les 3 ont un fond, qui doivent bien évidement se terminer en bas tous les 3.

j'ai essayé différentes methodes, en mettant tout en float left.. mais les boites des cotés ne s'adaptent pas à la largeur de la fenetre restante, et le bloc central n'est pas centré..

Que faire ? Comment faire ? merci d'avance pour votre aide...
Salut et bienvenue,

tu peux essayer un gabarit Alsa , mais je ne sais pas si les colonnes seront de même hauteur.

Pour les colonnes de même hauteur il me semble qu'il y a aussi un tuto à ce sujet. Tu peux voir également l'article "les colonnes factices" d'Openweb.
Modifié par Ralfman68 (18 Dec 2006 - 15:42)
Merci pour ta réponse, mais aucun modèle ne correspond : dans les modèles à 3 colonnes, les colonnes sur les cotés sont de largeur fixe.. or dans mon cas, c'est la colonne du milieu qui est de largeur fixe. Ce sont les deux colonnes sur le coté, de largeur égale (pour que la centrale soit bien centrée), qui s'adaptent...
Ben dans ce cas, je te conseille la bidouille d'Openweb.

Puisque c'est quasi-impossible d'obtenir deux colonnes de même hauteur en css/html affichées correctement sur les principaux navigateurs, tu n'as donc pas d'autre choix.

edit : openweb semble avoir supprimé cette page.

Voilà le lien d'Alsa
Modifié par Ralfman68 (18 Dec 2006 - 16:39)
En fait mon plus gros problème, ce n'est pas la hauteur, mais les 2 colonnes des cotés qui s'adaptent à la largeur de page restant pour avoir tout le temps la colonne centrale centrée.....
Sorry, j'avais pas bien lu.
Je ne sais pas si tu vas y arriver sans utiliser javascript. Smiley rolleyes
Modifié par Ralfman68 (18 Dec 2006 - 16:57)
Bonjour,

C'est un "emplâtre sur une jambe de bois", visuellement c'est correct mais au niveau de la gestion du contenu des 2 blocs latéraux ce n'est pas le top. m'enfin!!

<style type="text/css">
#conteneur{
width: 90%;
background: yellow;
height: 400px;
margin: auto;
position: relative;
}

#gauche{
float: left;
width: 35%;
height: 400px;
background: green;

}

#droite{
float: right;
width: 35%;
height: 400px;
background: blue;

}

#centre{
position: absolute;
margin-left: 50%;
left: -150px;
width: 300px;
height: 400px;
background: red;

}
</style>
</head>

<body>
<div id="conteneur">
	<div id="gauche"></div>
	<div id="droite"></div>
	<div id="centre"></div>
</div>

</body>
Euuuu bein en fait ça marche pas... tes blocs latéraux font 35% de la largeur de la fenetre... ce qui fait 70% pour les deux blocs... ça laisse donc 30% de la taille pour me bloc central. Or, le bloc central ne peu pas faire 30% tout le temps ! il est de taille fix.. donc ça dépend de la taille de la fenetre... un coup il fera peu être 30%, mais un autre coup il en fera peu être 60%..donc il faudrai changer le % des 2 autres..on ne s'en sort pas. D'ailleur, avec ta solution on le voit bien : si on agrandi beacoup la fenetre en largeur, un vide se créé entre les blocs... logique.

Merci quand même pour ta réponse...
Re,

tu peux pousser le width à 49% (50 ie n'aime pas) et là tu couvres quasiment toute la plage ... Mais bon c'est un peu tiré par les cheveux ...
Sujet clos
Aller à