Ernestine Posté 17 Février 2005 Posté 17 Février 2005 Bonjour, Depuis deux bonnes heures, je suis sur un problème que je n'arrive pas à résoudre. J'ai un div Conteneur, contenant des divs en position absolute. Je souhaite que la hauteur du Conteneur s'adapte automatiquement à son contenu. Or elle reste inéluctablement à 0px... Si les éléments à l'intérieur sont en position relative, ou placés dans le flux, pas de problème. Mais quand ils sont en postion absolute, il n'y a rien à faire Avez-vous la solution ? Ernestine édit : ce n'est pas la largeur du Conteneur qui reste à 0 px, mais la hauteur !
Raphael Posté 17 Février 2005 Posté 17 Février 2005 Si les éléments à l'intérieur sont en position relative, ou placés dans le flux, pas de problème. Mais quand ils sont en postion absolute, il n'y a rien à faire Avez-vous la solution ? Tu le dis toi-même : lorsque les éléments sont positionnés en absolu, ils ne sont plus dans le flux, donc leur "conteneur" n'est plus du tout influencé par eux... sauf s'il est lui-même positionné.
Ernestine Posté 17 Février 2005 Auteur Posté 17 Février 2005 Salut Sibélius, J'entends bien, et c'est ce que j'ai fait, vu que j'ai lu tous tes articles. Mon div Conteneur est bel et bien en position:relative, et en effet, les éléments qu'il contient (en position:absolute) sont parfaitement positionnés. Non, le problème, c'est que ce fichu div Conteneur garde cette fichue hauteur de 0 px. C'est ennuyeux, car du coup, la couleur de fond est celle du body, et non pas celle du Conteneur. Mine de rien, le CSS a vraiment une lacune pour gérer les hauteurs de div. On trouve des milliers d'astuces sur tous les sites spécialisés, mais il n'y en a aucune d'universelle. A bientôt, Ernestine
Raphael Posté 17 Février 2005 Posté 17 Février 2005 Est-ce que tes blocs de contenu ont une hauteur définie ? Si non, il est normal - vu leurs schemas de positionnement - que leur conteneur n'ait pas de hauteur. Il faudrait peut-être adopter un positionnement flottant pour les éléments contenus, si tu veux influer sur la hauteur du conteneur.
Sarc Posté 18 Février 2005 Posté 18 Février 2005 Bonjour, Tu as raison, le positionnement vertical des div est franchement pas cool.... J'ai galéré pas mal de temps, moi aussi, pour poser mon footer à la suite du contenu ! L'idéal serait que tu puisses placer ton contenu non pas en position absolue mais en position relative... Tu repousserais alors les limites du conteneur. Exemple : conteneur en position relative tout le header en position absolue (sort du flux, ne modifie pas le conteneur) le menu de gauche en position absolue également... Ensuite, le contenu en position relative, qui prendra donc un positionnement par rapport au coin haut/gauche de ton conteneur, le dernier élément relatif : tu le places là où tu veux, et c'est donc lui qui modifiera la taille de ton conteneur. Voilà, ça devrait marcher normalement... Sinon, donne l'url de la page en question, on pourrait regarder comment c'est fait
Ernestine Posté 18 Février 2005 Auteur Posté 18 Février 2005 (modifié) Merci, J'ai essayé, Sarc, mais ça ne marche pas. Voici l'exemple avec des carrés de couleur : http://www.blog-ernestine.net/extras/Design/design.html (les styles sont dans le code source). Le carré rouge est en absolute, il n'intervient pas, je peux l'enlever de la page sans que ça influe sur le reste. Le carré vert foncé est en position relative, à top:350px et height:400px. Je m'attends donc à ce que le conteneur (vert clair) ait une hauteur égale à 350+400=750px. Il n'en est rien : sa hauteur est de 400 px, soit celle du carré vert foncé. Conclusion : le positionnement à 350px en hauteur n'a pas été pris en compte Ernestine édit : j'effectue tous ces tests sous FireFox ! Sous ie l'affichage est sûrement différent. Modifié 18 Février 2005 par Ernestine
Raphael Posté 18 Février 2005 Posté 18 Février 2005 Il faudrait peut-être adopter un positionnement flottant pour les éléments contenus, si tu veux influer sur la hauteur du conteneur.
Sarc Posté 18 Février 2005 Posté 18 Février 2005 #conteneur { position: relative; width: 800px; margin-left: auto; padding-top:350px;margin-right: auto; background-color: rgb(0, 255, 153); }#contenuabsolu { position: absolute; width: 200px; height: 200px; left: 100px; top: 100px; background-color: rgb(255, 153, 102); }#contenurelatif { position: relative; width: 400px; height: 400px; left: 350px; background-color: rgb(102, 204, 0); } Le tour est joué
Ernestine Posté 18 Février 2005 Auteur Posté 18 Février 2005 Sibélius > C'est vrai... Mais si les divs de ma page sont en position absolue, c'était par nécessité, et je n'aurais vraiment pas pu (enfin je crois) faire une mise en page avec des éléments flottants Sarc > Ca marche Merci ! A bientôt, Ernestine
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant