Imbrication de conteneurs qui ne fonctionne pas

Bonjour,

Débutante en CSS2, je travaille sur le design d'un site qui est presque terminé, mais je butte depuis plusieurs jours sur un problème d'imbrication de conteneurs, malgré la lecture de nombreuses pages, tutos, etc. Je ne sais pas si le problème se situe dans le code de ma page ou dans celui de ma CSS.

J'ai un conteneur appelé "boite-generale-2" (avec une image de fond) qui est censé en contenir 4 autres :
- à gauche : 2 conteneurs superposés : "boite-logo-rubrique" et "boite-localisation"
- au centre : boite-texte
- à droite : boite-pictos

Si j'allonge le texte contenu dans "boite-texte", le conteneur "parent" (boite-generale-2) s'adapte, de sorte que l'image de fond vient bien jusqu'au bas. Par contre, ce n'est pas le cas si j'allonge les colonnes latérales. Il semble que celles-ci ne soient pas réellement DANS "boite-generale-2".

Voici ma page : http://www.stay-on.net//TEMP/Decoupage-look6/look6.html
et ma CSS : http://www.stay-on.net/TEMP/Decoupage-look6/look6-noir-design.css

Une dernière précision : je ne peux pas donner une hauteur fixe à "boite-generale-2" (c'est destiné à un CMS et je n'aurai donc pas la maîtrise dans la hauteur des contenus).

Merci d'avance pour votre aide.

Bonjour,

Le problème viens du positionnement absolu, qui fait sortir les éléments du fux, ils ne sont donc effectivement, comme tu l'avais deviné, plus réellement dans leur conteneur.

ps. : pense à mettre des alt sur toutes tes images.

Bonjour Laurie-Anne,

Merci pour cette réponse. Je cherchais donc dans la bonne direction, ce qui me rassure déjà.
Qu'est-ce que je dois faire, alors ?

Avant de poster ici, j'ai essayé le positionnement des 3 conteneurs "récalcitrants" en utilisant position absolute, fixed, relative, etc. et que rien n'y fait ! J'ai même essayé en float. Tout mes essais ont eu pour résultat de déstructurer toute ma page. J'ai l'impression d'avoir épuisé toutes les solutions auxquelles je pensais, c'est ce qui m'a décidée à faire appel à l'équipe.

Il est certain que je ne maîtrise pas encore correctement l'utilisation des différentes notions de positionnement : c'est le premier site que je fais en 100% CSS et je découvre le dur passage de la théorie à la pratique.

PS : merci pour le rappel des "alt". Les images actuelles sont totalement provisoires et j'ai bien l'intention de faire en sorte que ce soit le CMS qui s'occupe de cette balise.

J'ai un peu de mal à voir ce que tu souhaite faire (ton design étant particulièrement déformé sous IE6, mais ce que je vois (mais je ne vois pas tout semble-t-il) ça ressemble à une simple imbrication de boites pour avoir un fond à bordure, ceci peut être réalisé avec une image de fond.

Sinon, peut-être pourrais-tu t'inspirer des gabarits de Florent qui fonctionnent partout et peuvent facilement être adaptés.

Ah oui, ça c'est la prochaine étape de mon apprentissage : rendre le bazar compatible IE et je crois que cela ne va pas être de la tarte !

Je comprends que tu aies du mal parce que sous ce navigateur, le site ne ressemble à rien ! Tu ne vois même pas les conteneurs dont je parle, en fait. Je vais aller voir les gabarits de Florent (que je ne connaissais pas) en espérant y trouver une solution. Merci de l'info.

Sinon, je viens de mettre ma "boîte-pictos" en float left et ça fonctionne.
Mais si je fais pareil avec les boîtes de la colonne de gauche, c'est la cata (ce qui me paraît logique).
Voilà ce que ça donne (pour ceux qui peuvent y voir qqch ) :
http://www.stay-on.net//TEMP/Decoupage-look6/look6-v2.html
Modifié par crazyweb (12 Nov 2009 - 10:51)

Rappelons les bases: Guide de survie du positionnement CSS.

Bonjour Florent,

Merci de t'intéresser à ma question. J'en suis en effet "aux bases", c'est sûr.

J'ai lu et re-relu cette page et des tas d'autres sur le site et cela m'a vraiment bien aidée : les premiers positionnements dans ma CSS étaient... comment dire... du plus haut folklorique pour tous les conteneurs. Je progresse donc, notamment grâce à vous.

Il me reste à régler cette question-ci mais ça fait des heures et des heures que je bloque et je n'en sors pas. A mon avis, ma réflexion tourne en rond sur mes propres erreurs. C'est certainement une bêtise, un truc que je ne comprends pas correctement, un déclic qui doit se faire mais voilà, je suis vraiment en rade.

J'ai encore fait des changements mais ce n'est pas mieux. Enfin si, les conteneurs semblent être +/- rentrés dans leur conteneur parent mais ils se repoussent mutuellement vers le bas. Par contre, c'est un peu moins pire en IE que dans la version précédente. lol

http://www.stay-on.net/TEMP/Decoupage-look6/look6-v3.html
CSS : http://www.stay-on.net/TEMP/Decoupage-look6/look6-noir-design-v3.css