Forum « Re: Equivalent CSS des frames (1 menu, 1 bandeau, 1 contenu) »

Forum « Programmation HTML » (archives)

Re: Equivalent CSS des frames (1 menu, 1 bandeau, 1 contenu)

Envoyé: 28 avril 2004, 5h09 par honu

Merci pour ta proposition !
J'ai revu tout le code en repartant de zéro. C'est beaucoup mieux mais je coince toujours sur un calque, le principal, avec le menu déroulant).

Après analyse de ma situation désespérée :), j'en suis arrivé au fait suivant : tout mon problème peut se résumer à la question suivante :

Comment faire pour avoir un calque div :
* dont l'origine haut-gauche de ce calque commence en un point fixe de la page (ex: 250 pixels à partir de la gauche de la fenêtre et 250 pixels à partir du haut),
* dont la partie droite de ce calque colle toujours au bord droit de la fenêtre, quelquesoit la résolution choisie,
* dont le bas de ce calque n'ait d'autre limite que son contenu ; c'est à dire que si le texte que ce div contient est très long, on puisse scroller pour le voir en entier.

Parce que, pour l'instant, si j'applique cette position fixe (un peu vers le bas, un peu vers la gauche, que je lui indique un height et un width à 100%, cela fait comme si mon calque a pile poil la taille de la fenêtre mais qu'il se trouve décalé donc un peu en bas un peu à gauche. Résultat : le texte déborde à droite et en bas hors de la fenêtre.

Ci-joint mon code épuré pour n'en garder que ce qui concerne le positionnement (le calque qui me pose un problème est celui nommé "contenu") :

[code]
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
#menu {
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 230px;
height: 100%;
}
#bandeau {
height: 100px;
width: 100%;
left: 250px;
right: 250px;
padding-left: 250px;
}
#contenu {
overflow: auto;
height: 100%;
width: 100%;
padding-left: 250px;
}
[/code]
[code]
<html>
<body>
<div id="menu">
</div>
<div id="bandeau">
</div>
<div id="contenu">
</div>
</body>
</html>
[/code]

Merci de ton aide - dans la limite de ton temps dispo, bien sûr ! :)