Bonjour tout le monde
Petite question d'ordre théorique.
J'utilise souvent le système suivant pour mes menus : un div avec un padding important à gauche, et dedans un li en absolute 0, 0, qui va se caser dans ce padding. Je trouve ça simple et bien pratique (bon après, faut quand même gérer les problèmes de différentiels de hauteur, mais c'est c'est quand même la solution que je préfère.
Mais je recontre un petit problème : si le premier élément de mon contenu a une margin-top, ben cette marge s'applique à tout le div parent, et fait donc descendre mon menu. Un comme comme si le div parent avait un padding-top.
Voici une version simplifiée du code de ma page :
et un lien pour voir le résultat : http://www.multibac.com/test.html
si je met une marge à 0 à mon h1, ou si mon contenu commence par un autre élément sans margin-top, ben le menu sera collé en haut.
Ce qui est bizarre, c'est que si je donne un border à #main, ben le menu sera de nouveau collé en haut.
Ca ressemble donc à un bug, mais je pense pas que ça en soit un, vu que tous les navs font pareil.
J'ai donc 2 questions :
- pourquoi ça fait ça
- comment faire pour simplement l'éviter (je sais que je peux mettre un "top" négatif de la même valeur que la margin de mon h1, mais je voudrais que le système marche quelque soit le contenu.
Merci.
Petite question d'ordre théorique.
J'utilise souvent le système suivant pour mes menus : un div avec un padding important à gauche, et dedans un li en absolute 0, 0, qui va se caser dans ce padding. Je trouve ça simple et bien pratique (bon après, faut quand même gérer les problèmes de différentiels de hauteur, mais c'est c'est quand même la solution que je préfère.
Mais je recontre un petit problème : si le premier élément de mon contenu a une margin-top, ben cette marge s'applique à tout le div parent, et fait donc descendre mon menu. Un comme comme si le div parent avait un padding-top.
Voici une version simplifiée du code de ma page :
<html>
<head>
<title></title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
#main {
padding-left:200px;
position: relative;
}
#menu {
position: absolute;
width: 190px;
border: 1px solid black;
top: 0px;
left: 0px
}
h1 {
margin:5px;
}
</style>
</head>
<body>
<div id="main">
<h1>titre</h1>
<p>texte</p>
<div id="menu">Menu</div>
</div>
</body>
</html>
et un lien pour voir le résultat : http://www.multibac.com/test.html
si je met une marge à 0 à mon h1, ou si mon contenu commence par un autre élément sans margin-top, ben le menu sera collé en haut.
Ce qui est bizarre, c'est que si je donne un border à #main, ben le menu sera de nouveau collé en haut.
Ca ressemble donc à un bug, mais je pense pas que ça en soit un, vu que tous les navs font pareil.
J'ai donc 2 questions :
- pourquoi ça fait ça
- comment faire pour simplement l'éviter (je sais que je peux mettre un "top" négatif de la même valeur que la margin de mon h1, mais je voudrais que le système marche quelque soit le contenu.
Merci.
