Titre: Problème de mise en page avec css
Posté par: isimar le le 09-10-2004 a 14:33:53
Je veux refaire complétement le graphisme de mon site en respectant xhtml et css (mon site actuel utilise les frames), mais je n'arrive pas à faire ma mise en page car je veux "mélanger" tailles fixes et tailles dynamiques...
J'ai :
- un entete qui dois faire 100% de la page en largeur et 100px en hauteur.
- un menu a gauche qui doit faire 150 px de largeur et prendre le reste de la page en hauteur (soit 100%-100px)
- la page principale qui doit prendre tout le reste de la largeur de la page aussi bien en hauteur qu'en largeur
- un pied de page qui prend la largeur de la page principale et 30 px de haut...
je n'arrive pas a obtenir cela fonctionnant dans toutes les résolutions...
comment faire cela ? |
Titre: Re:Problème de mise en page avec css
Posté par: willy le le 09-10-2004 a 14:51:31
Bonjour,
les % en css sont basés sur l'élément parent si lui même est défini. donc tu ne peux pas faire un div qui fait 100% de ta page - 100px d'entête. Suivant la résolution tu obtiendras toujours plus ou moins de décalage
Sur Alsacreations tu trouveras un super travail sur la mise en page, essaie de t'en inspirer
http://www.alsacreations.com/articles/ |
Titre: Re:Problème de mise en page avec css
Posté par: isimar le le 09-10-2004 a 15:17:46
| Ben oui ca je sais bien que je sais pas le faire mais il y a moyen en imbriquant des div mais c'est la que je m'y pert... |
Titre: Re:Problème de mise en page avec css
Posté par: jb_gfx le le 09-10-2004 a 16:21:53
Tu mets un div de 100px de hauts pour ton entete dans un div qui fait 100% dela hauteur.
|
Titre: Re:Problème de mise en page avec css
Posté par: MarvinLeRouge le le 10-10-2004 a 00:25:54
Salut,
Pour le modèle de base, je dirais (au jugé) :
Code:
<div id="entete">...</div>
<div id="contenant">
<div id="menu">...</div>
<div id="contenu">...</div>
</div>
<div id="pieddepage">...</div>
|
|
Avec pour tes css
Code:
#entete
{
height : 100px;
}
#menu
{
float : left;
width : 150px;
}
#contenu
{
margin-left : 150px;
}
#pieddepage
{
height : 30px;
}
|
|
Bon,
1) Je t'ai fait ça au jugé, sans tester
2) Je n'ai pas précisé de width 100%, car c'est la valeur par défaut pour les éléments de type bloc (ce qui est le cas du div)
3) le #contenant sert à englober le menu et le contenu, afin d'être sûr que le pieddepage sera bien sous l'ensemble des 2
4) le margin-left sur #contenu sert à donner l'effet colonne, afin que le texte dans #contenu ne continue pas "sous" le menu, mais reste bien aligné
NB : Si ta page est plus courte qu'une page écran, tu auras de l'espace sous ton pied de page. Il existe des astuces pour remédier à ça, mais elles nécessitent l'usage de javascript pour déterminer la hauteur effective du contenu complet de la page. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|