Developer Posté 19 Octobre 2006 Posté 19 Octobre 2006 Bonjour, je début en découpage et intégration (X)HTML/CSS. J'ai un design à découper et à intègrer, alors, afin d'expliquer mon problème j'ai préapré un maquette simple qui me servirai d'exemple pour les explications : https://213.150.161.220/css//w/exemplew.html Mon problème consiste à : - Je veux que la partie "contenu" soit extensible verticalement, c'est à dire elle s'aggrandi verticalement tant qu'il y a du texte à ajouter et la partie "footer" doit suivre (descendre plus bas). J'ai remarqué dans mon code que j'ai la valeur en CSS pour le footer "top:219px;" et pour le contenu "height: 100px;", donc à mon sense c'est tout à fait logique que la partie "footer" ne suit pas l'extension vertical de la partie "contenu". Comment puis-je résoudre ce problème ? Merci pour votre aide qui me sera préciseuse et j'espère que j'ai bien expliqué le problème, si vous aurez besoin de plus de détails n'hésitez pas à me le dire. Je vous souhaite une agréable fin de soirée.
oxerrois Posté 19 Octobre 2006 Posté 19 Octobre 2006 Il suffit que tu supprimes le [height:100px;} et le bloc s'adaptera à la taille de ton texte.
vincedo Posté 20 Octobre 2006 Posté 20 Octobre 2006 Il suffit que tu supprimes le [height:100px;} et le bloc s'adaptera à la taille de ton texte. Il faut surtout supprimer le "top:219px;". Cette instruction dit de "placer le bloc à 219px du haut de la page", donc forcément il ne bouge pas avec la taille du texte. Cela dit, ta question est un peu déroutante : ce que tu décris est le comportement naturel du html, autrement dit si tu n'ajoutes aucune CSS, tu obtiendras exactement ce que tu veux. Tu peux partir du code HTML suivant : <div id="header"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> S'il le faut, tu peux préciser une largeur pour des divs, mais en général, la hauteur est laissée libre en CSS.
Developer Posté 20 Octobre 2006 Auteur Posté 20 Octobre 2006 Il faut surtout supprimer le "top:219px;". Cette instruction dit de "placer le bloc à 219px du haut de la page", donc forcément il ne bouge pas avec la taille du texte. Cela dit, ta question est un peu déroutante : ce que tu décris est le comportement naturel du html, autrement dit si tu n'ajoutes aucune CSS, tu obtiendras exactement ce que tu veux. Tu peux partir du code HTML suivant : <div id="header"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> S'il le faut, tu peux préciser une largeur pour des divs, mais en général, la hauteur est laissée libre en CSS. Merci pour vos réponses. j'ai supprimés le "top:219px;" et le "height" mais j'aurai dans ce cas le "footer" tout en haut de la page. vincedo, si tu regardes le code source de la page que j'ai donné tu verra que j'ai employé exactement la même structure des div que tu viens de citer, donc ça changera rien J'ai pensé également que "ne pas donner d'instruction en CSS pour le "top:Xpx" et "height:Xpx;" fera descendre naturellement le footer juste en dessous du bloc contenu selon la hauteur du texte de ce dernier MAIS hélas c'était pas le cas en testant.
Raphael Posté 20 Octobre 2006 Posté 20 Octobre 2006 (modifié) j'ai supprimés le "top:219px;" et le "height" mais j'aurai dans ce cas le "footer" tout en haut de la page. Logiquement non. A moins que lui aussi ne sorte du flux (positionnement absolu par exemple). Sinon, il va sagement se placer à la suite des autres blocs, tranquilement dans le flux courant De toute façon, employer un positionnement absolu lorsque cela n'est pas absolument nécessaire est assez risqué sauf si l'on maîtrise parfaitement le sujet. Dans ton cas, ce positionnement est tout à fait inutile. PS : ah euh au fait : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS (voir le 1er modèle et afficher la source) Modifié 20 Octobre 2006 par Raphael
Developer Posté 20 Octobre 2006 Auteur Posté 20 Octobre 2006 Logiquement non. A moins que lui aussi ne sorte du flux (positionnement absolu par exemple). Sinon, il va sagement se placer à la suite des autres blocs, tranquilement dans le flux courant De toute façon, employer un positionnement absolu lorsque cela n'est pas absolument nécessaire est assez risqué sauf si l'on maîtrise parfaitement le sujet. Dans ton cas, ce positionnement est tout à fait inutile. PS : ah euh au fait : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS (voir le 1er modèle et afficher la source) Bonsoir, merci pour ta réponse Raphael, j'ai enregistré tous les modèles afin que je puisse les regarder à tête reposée ça m'aidera sûrement à résoudre mon problème
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant