probléme de proportion avec le doctype

**stars333** · 18/03/2007, 23h22

Bonjour,

j'ai dévellopé une page web avec des <div> dedans pour la subdiviser.
Mon probléme est venu lorsque j'ai ajouté le doctype, a partir de cet instant le navigateur n'a plus pris en compte les valeurs des <div> en % pour la hauteur (height=20% par exemple dans le css).

est-ce que quelqu'un aurais une solution ? je le remercie d'avance

**Bisûnûrs** · 19/03/2007, 07h33

Pour spécifier une hauteur en % à un élément il faut que son élément parent ait une hauteur renseignée, en % ou en px.

**Bisûnûrs** · 19/03/2007, 12h11

Envoyé par Bisûnûrs

Pour spécifier une hauteur en % à un élément il faut que son élément parent ait une hauteur renseignée, en % ou en px.

Donc si tu mets à son élément parent une hauteur en % également, revois ce que j'ai écrit au-dessus.

Et ainsi de suite ...

**stars333** · 19/03/2007, 17h08

Moi, je souhaiterais mettre des % pour que cela s'affiche en proportion comme je le souhaite quelque soit la dimension de mon écran.

J'ai un exemple rapide :
Je souhaite diviser ma page en deux blocs.
Pour cela j'utilise des <div>.

voici mon code source :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>ExcelArts&amp;Metiers</title>
 
	<link type="text/css" rel="stylesheet" href="1.css" />
	</head>
	<body>
	<div id="box1">
 
 
	<div id="box2">
	ssssssssssssssssssssssssssssssssssssss
	</div>
 
 
	<div id="box3">
	sssssssssssssssssssssssss
	</div>
 
 
	</div>
	</body>
	</html>

voici mon css qui se trouve dans le fichier 1.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#box1
{
text-align:center;
font-size: 12pt;
color: blue; 
font-style: normal; 
font-family: Times New Roman;
margin: 0cm 0cm 0pt;
background: black;
font-weight: bold;
width: 100%;
height: 100%;
}
 
#box2
{
text-align:center;
font-size: 12pt;
color: blue; 
font-style: normal; 
font-family: Times New Roman;
margin: 0cm 0cm 0pt;
background: red;
font-weight: bold;
width: 100%;
height: 50%;
 
}
 
#box3
{
text-align:center;
font-size: 12pt;
color: blue; 
font-style: normal; 
font-family: Times New Roman;
margin: 0cm 0cm 0pt;
background: green;
font-weight: bold;
width: 100%;
height: 50%;
}

J'ai tout renseigné comme tu me l'a dis mais cela ne marche pas.
Je ne vois pas où je me trompe.

**Bisûnûrs** · 19/03/2007, 17h11

Eh non, tu n'as pas tout renseigné.

Ton box1 a une taille de 100% en hauteur. Mais son parent ?

Rajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html,body{
   height:100%;
}

**stars333** · 19/03/2007, 17h26

merci, je n'avais pas pensé à cela

**stars333** · 19/03/2007, 12h07

j'ai essayé de mettre des renseignements de heigh au parents et il n'y a pas de modifications. Sauf si on met des px à la place des %

Sans le doctype il n'y a pas de problème, la hauteur en % fonctionne bien.
Je ne comprends donc pas d'où viens le problème.

probléme de proportion avec le doctype

CSS

Vue hybride

Discussions similaires

Partager

Partager