[résolu] Gestion de blocks

Bonjour,

Pour mon projet, je dois gérer des blocks.

J'inclus mes blocks via des includes en php.



Pour le moment la largeurs de mes blocks est static. ex: 500px
Je suis donc dans le cas Numéro 1 du schéma.

Maintenant j'aimerais que lorsque les blocks de gauche (bleu) et/ou de droite (violet) sont absent, le block au centre (rose) s'adapte au niveau de la longueur. Sur le schéma ce serait le cas numéro 2 ou 3.

Au niveau css pour le moment j'ai quelques chose qui ressemble à ça :

#block_gauche {
  width: 200px;
  border-width: 2px;
  margin-left: 17px;
  float:left;
  margin-bottom: 2px;  
}

#block_centre{
  width: 540px;
  border-width: 2px;
  float:left;
  margin-left: 2px; 
  margin-bottom: 2px;
  padding: 5px;
}

#block_droite{
  width: 200px;
  border-width: 2px;
  margin-right: 17px;
  float:right;
  margin-bottom: 2px;
}

Actuellement, je ne vois pas comment je peux gérer cela en css. Je viens donc vous demandez de l'aide pour un solution ou même des pistes pour m'aider a trouver une solution.

NB : Désolé pour la qualité du schéma, j'ai fais ça avec paint. J'espère que c'est compréhensible tout de même.

Amicalement,

Torest.
Modifié par torest (25 Nov 2009 - 18:47)

Salut,

Si tu ne mets pas de position flottante sur ton bloc central, il prendra toute la place restant.

À vue de nez (quelqu'un me corrigera si je suis dans l'champ) Je dirait qu'il faut simplement enlevé 2 petite ligne de #block_centre

#block_centre{ 
  width: auto; /*peut-être faudra-t-il l'enlever, à tester*/ 
  border-width: 2px;
  margin-left: 2px;  
  margin-bottom: 2px; 
  padding: 5px; 
} 

Enlève width: 540px; qui se trouve à définir une largeur fixe à ton block, si tu l'enlève ou bien lui mets un auto (à tester), la largeur devrait s'adapter à l'espace disponible.

Ensuite float:left; dans ce cas-ci, est inutile. Le block par défaut se placera automatiquement à côté du block qui le précède, qu'il soit placé en float:left; ou en float:right;.

EDIT: Oups! Grillé!!!
Modifié par juliesunset (25 Nov 2009 - 16:35)

Bonsoir,

Je vous remercie pour vos réponses.
J'ai en partie résolus mon problème.

J'ai un autre petit soucis.
J'ai appliqué cela à une structure simple ressemblant à celle de mon projet.

   <div id="conteneur">
	<div id="contenu">
	  <div id="gauche">GGGGGGGGGGGGGGGGGGGGGGG</div> 
      <div id="droite">D</div> 
      <div id="centre"></div>   
	</div> 
   </div>

Mon problème étant que mon contenu dépasse de la div.

Salut,

Essaye peut être avec des vrais mots, il est rare d'avoir pleins de lettres à côté sans espace dans un texte, même si tu utilise les mots les plus longs de la langue française. Et encore, si tu donne une largeur suffisante, tu devrais même pouvoir rentrer les 26 lettres du mot "anticonstitutionnellement". Sinon, tourne toi du côté de la propriété overflow.

Effectivement avec un espace il y a bien un retour à la ligne.
Si jamais je rencontre ce genre de problème je penserais à regarder du coté de l'overflow.

Ce n'est pas la première fois que je viens sur ce forum. Mais c'est la première fois que je demande de l'aide.

Je suis très satisfait. Je vous remercie pour vos réponses très utile.

Amicalement,

Torest.