28172 sujets

CSS et mise en forme, CSS3

[résolu] Placement de trois blocs particulier...

Bonjour,

je cherche comment aligner trois blocs avec plusieurs contraintes :
-le bloc du milieu est le seul avec largeur fixe
-le bloc du milieu est centré
-les blocs aux extrémités sont extensibles et ont une taille identique

en gros, je veux obtenir ceci :
http://niko.vuegate.net/dl/colle.jpg

je bloque là dessus depuis un petit moment maintenant, une petite idée serait la bienvenue.

Merci de votre aidre.

Nico
Modifié par NikOo (07 Jan 2010 - 11:42)
Normalement les problèmes apparaisent plutôt quand on veut que tous les blocs soient de la même taille Smiley smile

Un simple float:left (et clear:left dans le footer) sur chacun de tes blocs ne suffit pas ?
comment centrer le bloc du milieu dans ce cas là ?

EDIT > je m'explique : si je ne connais pas la taille du bloc de gauche et que mes blocs sont en flotant, je ne peux pas centrer le bloc du milieu.
Modifié par NikOo (06 Jan 2010 - 19:13)
Bonjour,

sympa ces gabarits,je ne connaissais pas cette page.
Mais rien ne correspond à mon problème : là, la plupart du temps c'est la colonne du centre qui a une taille flexible ; dans mon problème la colonne du centre a une taille fixe.

c'est plus compliqué qu'il n'y parait Smiley cligne

a+

niko
Bonjour,

non, je veux mettre une image de background en repeat-x afin que ces colonnes soient extensibles et prennent toute la taille de l'écran.
Salut,

Je ne comprend pas pourquoi il est si important d'avoir des colonnes fluides alors que tu ne comptes rien y mettre. Dans ce cas, pourquoi vouloir une colonne centrale fixe ?
C'est une question d'affichage, et d'extensibilité d'un design :
http://niko.vuegate.net/dl/home.jpg

La barre du haut doit être extensible. Donc continuer avec du jaune sur la gauche et du gris sur la droite. bien sûr, ce sont des dégradés, donc il faut utiliser un pattern de 1px qui se répète sur le "x". Mais il faut aussi avoir un bloc central, qui contient l'image de "transition" entre le gris et le jaune, qui elle a une taille fixe.

Il faudrait mettre 3 div en float, fixer la taille de celle du milieu, mais dans ce cas là impossible de la centrer...

Mon "croquis" initial schématisait bien le problème Smiley cligne

voilà voilà,

merci de votre aide !
OK, c'est bien ce que je pensais : tu te complique la vie.

Ma proposition de solution : 
<body>
  <div id="centre"></div>
</body>



body{
  background:url(très grande image.jpg) repeat-y center; /* le repeat-y est facultatif suivant que tu as une image à répéter ou non */
}

#centre{
  width:taille en px;
  margin: 0 auto;
}


L'idée c'est d'avoir une image avec ton fond, séparée en deux au milieu. Cette image doit être assez grande pour pouvoir être vue partiellement même sur très grande résolution (elle doit donc être plus grande que cette résolution). Cette image sera ensuite centrée de façon à ce que la jointure soit toujours bien placée par rapport au div central.
mmm je me disais bien que je me compliquais la vie, aussi Smiley cligne

en effet la solution fonctionne !

merci bien !
Salut,

Une autre solution sans passer par une très grande image :

Créé un div conteneur en width:100% qui affichera ta partie centrale.
Rajoute deux divs à l'intérieur, un en float:left (fond jaune) et l'autre en float:right (fond blanc).

Hop ! 

<div id="col_centre">
<div id="col_gauche"></div>
<div id="col_droite"></div>
</div>
il faut alors utiliser une balise <img/> pour afficher la partie centrale, non ?
parce que sinon les background des deux div col_gauche et col_droite vont passer par dessus le background de col_centre ?!
ce design rentre dans du 1280, ce n'est pas moi qui choisis Smiley langue

mais le problème que je soulevais sur ta technique, c'est que le background de col_gauche et col_droite va passer par dessus le background de col_centre. Donc, dans ce cas là, il faut mettre la partie centrale en <img/> avec un text-align:center. Comme les deux autres blocs sortent du flux, ça va marcher. Par contre, je dois mettre un peu de contenu dans cette barre (le logo à droite qui doit être un lien).
Donc il faut que j'utilise un background-image pour la partie centrale aussi (ou mettre le logo en question en absolute...)


En fait, j'avais trouvé une solution aussi, mais je voulais avoir la vôtre Smiley langue
J'ai créé deux div en floatant, avec une width de 50% chacune. La div de gauche en jaune, et la div de droite en gris. Et par dessus, j'ai mis en absolute mon wrap qui est centré avec un left à 50% et un margin-left négatif.
Sujet clos
Aller à