[CSS]Résolution et taille ajustée ?

Version imprimable

bonjour,

Je souhaite utiliser des div dans un site afin de créer un cadre.

j'aurai donc un code html comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<html>
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
  <link rel="stylesheet" type="text/css" href="styles.css">
 
  <title>Positionnement CSS</title>
</head>
 
 
<body>
 
 
<div id="bandeau">Ceci est le bandeau</div>
 
 
<div id="menu">
 
menu
 
    </div>
 
<div id="pied_page">Ceci est le pied de page</div>
 
</body>
</html>

J'essaie avec ce style suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
    text-align:center;
    }
div#bandeau {
    width:100%;
    height:20%;
    background-color:#00CCFF;
    }
div#menu {
    float:left;
    width:10%;
    height:80%;
    background-color:#33FF99;
    }
 
div#pied_page {
    clear:both;
    width:100%;
    height:20%;
    background-color:#33FF99;

Mais malgré le height:80%; sur div#menu , la hauteur de mon menu ne prend pas toute la hauteur du navigateur.

Une idée ?

merci d'avance

05/05/2006, 15h08
franculo_caoulene

Salut,

Chez moi ça dépasse et affiche les scrollbars. Je ne comprends pas ce que tu cherches à avoir.
05/05/2006, 16h19
masu
ca a l'air d'etre a la mode les auteurs proportionelles.
ajoute ca a ton css
Code:

1 2 3 4 5 6 7 * { margin:0; padding:0; } html, body { height: 100% }
puis debrouille toi pour que la somme des height fassent 100%

la tu a 20%+80%+20%=120% :p
voila
05/05/2006, 16h21
elitost

3 pièce(s) jointe(s)

En pièces jointes les fichiers nécessaires.

On voit sur la copie d'écran que le bandeau menu à droite ne prend pas toute la hauteur de la page, et c'est ce que je souhaiterais.

Par contre je n'ai pas de scrollbars comme tu peux le voir.

Des idées ?
05/05/2006, 16h24
elitost
Citation:
Envoyé par masu

ca a l'air d'etre a la mode les auteurs proportionelles.
ajoute ca a ton css

Code:

1 2 3 4 5 6 7 * { margin:0; padding:0; } html, body { height: 100% }

puis debrouille toi pour que la somme des height fassent 100%

la tu a 20%+80%+20%=120% :p
voila
Super ça fonctionne bien maintenant, merci .

Mais c'est quoi ce * dans ce que tu m'as fais ajouter ? cela veut dire, pour tous les éléments ?
05/05/2006, 16h55
masu

oui le * c'est pour tout les elements.
on est obligé d'enlever tout les margin padding et border car la place réelement prise par un bloc est taille=width+padding+margin+border
sauf sous IE qui ne respecte pas les recommandation

donc si tu met du padding ou margin ou border sur un element soit (top soit bottom), la hauteur de ton document sera 100%+les marges et la bordure d'ou une apparition de bar de scroll.
05/05/2006, 17h02
elitost

Super, je te remercie bien.