Salut,
J'essaie de me faire un ch'tit site web, et je rencontre quelques petits soucis avec la création de ma feuille de style, ce qui m'énerve passablement, ayant l'impression de perdre mon temps sur la présentation alors que je préfèrerais améliorer le contenu, mais bref.
Voilà le souci : je crée un bloc « panel » fixe, qui va me servir à gérer les menus, à gauche de l'écran. Jusqu'ici tout va bien. Je fixe sa hauteur à 100% de celle de la page. À l'intérieur de ce panel, je crée un bloc « menu ». Je voudrais le placer à une certaine hauteur dépendant de la taille de la page. Par exemple, je veux le faire disparaître de la page, en lui faisant une marge haute de 100% de la taille du bloc « panel » (je sais, c'est un peu con-con, mais évidemment c'est juste pour les besoins de la démonstration).
Et là, c'est le drame : les 100% ne correspondent pas à la hauteur du « panel », mais à sa largeur !!!
Je précise que l'effet est le même sous Firefox 3 et sous Opera 9.5. J'ai raté quelque chose ??
Un exemple simple :
Merci.
PS : Oui, j'utilise des feuilles de style séparées, là c'est juste pour faire simple.
PPS : Et quelqu'un peut me dire pourquoi dans AUCUN tuto ou cours CSS, il est expliqué qu'en CSS, la largeur réelle de la page n'est pas 100%, mais 100% PLUS les bordures, les marges et les paddings ??
Modifié par ze_Morlock (03 Aug 2008 - 19:11)
J'essaie de me faire un ch'tit site web, et je rencontre quelques petits soucis avec la création de ma feuille de style, ce qui m'énerve passablement, ayant l'impression de perdre mon temps sur la présentation alors que je préfèrerais améliorer le contenu, mais bref.
Voilà le souci : je crée un bloc « panel » fixe, qui va me servir à gérer les menus, à gauche de l'écran. Jusqu'ici tout va bien. Je fixe sa hauteur à 100% de celle de la page. À l'intérieur de ce panel, je crée un bloc « menu ». Je voudrais le placer à une certaine hauteur dépendant de la taille de la page. Par exemple, je veux le faire disparaître de la page, en lui faisant une marge haute de 100% de la taille du bloc « panel » (je sais, c'est un peu con-con, mais évidemment c'est juste pour les besoins de la démonstration).
Et là, c'est le drame : les 100% ne correspondent pas à la hauteur du « panel », mais à sa largeur !!!
Je précise que l'effet est le même sous Firefox 3 et sous Opera 9.5. J'ai raté quelque chose ??
Un exemple simple :
<head>
<style type="text/css">
div.panel
{
position: fixed;
left: 0;
top: 0;
width: 30%;
height: 500px;
border-style: solid;
border-width: 1px;
}
div.menu
{
margin-top: 100%;
height: 200px;
border-style: solid;
border-width: 1px;
}
div.main
{
position: fixed;
right: 0;
width: 70%;
height: 600px;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="panel">
<div class="menu">
</div>
</div>
<div class="main">
</div>
</body>
Merci.
PS : Oui, j'utilise des feuilles de style séparées, là c'est juste pour faire simple.
PPS : Et quelqu'un peut me dire pourquoi dans AUCUN tuto ou cours CSS, il est expliqué qu'en CSS, la largeur réelle de la page n'est pas 100%, mais 100% PLUS les bordures, les marges et les paddings ??
Modifié par ze_Morlock (03 Aug 2008 - 19:11)
