J'ai un petit probleme actuellement en CSS.
Mon XHTML :
[div id="page"]
[div id="header"]
[/div]
[div id="menu"]
[/div]
[div id="main"]
[/div]
[/div]
Je cherche a avoir #header, #menu, #main en position absolute, et que je puisse avoir une bordure a droite de #page.
J'ai donc ca comme CSS
#page {
position: absolute;
width: 750px;
left: 50%;
top: 0;
height: 100%;
margin-left: -375px;;
}
#header {
position: absolute;
height: 150px;
width: 700px;
left: 25px;
}
#menu {
position: absolute;
top: 135px;
height: 50px;
width: 700px;
}
#main {
position: absolute;
top: 200px;
width: 700px;
}
Si je mets pas de height a #page, je n'ai pas de bordure (ou ridicule). Si je mets 100% et que le contenu sors de l'ecran, la bordure s'arrete des que l'on scrolle.
Si je mets #page en float: center, je me retrouve avec toute ma page collé a gauche.
Y a t il un moyen de passer outre cela ?
Merci
# W3C, CSS2, Chapitre 8 et 9
Posté par pierthi . Évalué à 3.
Il y a pas mal de trucs qui clochent dans ta css.
#page :
- margin-left : si tu veux centrer ton div avec une largeur fixe de 750px, met plutôt margin-left et margin-right à auto. De cette manière les marges seront calculées pour automatiquement centrer ton document dans le contenant (la fenêtre du navigateur en l'occurence). Le mieux est de ne pas spécifier de largeur, mais de spécifier une marge gauche et droite : comme ça ton contenu s'adaptera à la largeur de la fenêtre du navigateur : c'est mieux pour l'accessibilité.
- position : absolute. J'aurais rien mis ici et laisser ton élément dans le flot normal.
Les autres #div
- position : idem. Pas la peine de les mettre absolute. À moins que tu voulais dire "fixed" (marche pas sous IE, qui l'interprète comme absolute), pour conserver par exemple ton menu quelque soit l'endroit où tu scrolles ton document.
Petit exemple sur http://perso.b2b2c.ca/tpierron/test.html(...)
La clé c'est d'utiliser margin-left et margin-right à auto pour centrer tes éléments. Bref relis les chapitres en question ...
[^] # Re: W3C, CSS2, Chapitre 8 et 9
Posté par Toto . Évalué à 3.
Je pensais tout faire en absolute vu que c'est plus facile pour placer les elements (et que cela permet de ne pas se soucier de l'ordre des éléments dans le XHTML).
Mais avec cette méthode c'est vrai que c'est plus simple (et surtout ca marche)
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.