probleme d'affichage css suite a l'insertion doctype

**hakurou** · 30/01/2007, 09h27

bonjour
j'ai un probleme, le but est de refaire mon site web, traditionelement designé par des <table> maintenant remplacé par du css pour être en bon accord, ca, pas de probleme, j'ai pas encore fini mais déja ca coince, je suis valide au niveau du w3c en xhtml mais j'ai la grosse impression que le doctype me bloque une partie de mon css du coup ca me creer une grosse Mer## au niveau de l'affichage, pourriez vous m'aider a comprendre ce qui ne va pas ?

en tout cas je pense que c'est moi qui est foiré dans le css mais je ne sais pas ou, surement avec l'utilisation des float

la page html :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!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></title>
<link href="yokoso.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body bgcolor="black">
 
 
 
 
<div align="center" >
  <? include ("menu_haut.php"); ?>
</div>
 
<center>
 <div id="block_central">
   <div id="elem1"></div>
   <div id="elem2"></div>
   <div id="elem3">
     <br />
     <div id="fond1">
       <div id="fond1_1">
 
 <br /><br />
 <center>Bonjour à tous !</center>
 
<br /><br />
<i>Bienvenue sur YOKOSO-JAPAN !!! <br />
Pour des raisons technique j&#39ai du changer de dns donc CAMNIHON est devenue YOKOSO-JAPAN .
<br />Pour 2007 le design change, et normalement, avec la <br />
fin de mes problèmes personnels je devrai être <br />
présent pour garder le site à jour et le compléter (enfin !).<br />
Désolé de ne pas avoir été là pour 2006.
<br /><br />
Désormais le site est optimisé pour firefox et est bien sur toujours utilisable sous IE.
<br /><br />Et enfin, <b>bonnes fêtes</b> a tous !!! (^_^) .
le WolfMaster</i>
<br />
<p style="font-size:10;color:red">/!\ <b>Attention</b> : certaines pages peuvent pour le moment présenter des incompatibilités avec Firefox.<br />Ces problèmes sont en cours de traitement.</p><br /><br /><br /><br />
       </div>
     </div>     
   </div>
   <div id="elem4"></div>
   <div id="elem5"></div>
 </div>
</center>
</body>
</html>

le 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
/* ///  MENU_HAUT.PHP //// */
 
div#reception_menu_haut {
              width:900;
             }
 
#elem1_menu_haut {
              float:left;
              cursor:pointer;
             }
 
#elem2_menu_haut {
	      float:left;
	      width:298;
	      height:100;
	      background-image:url('img/erable.jpg')
             }
 
#elem3_menu_haut {
              float:right;
             }
 
/* /////////////////////// */
 
/* ///  EN GENERAL //// */
 
#elem1 {
              float:left;
              background-color:white;
              width:120;
              height:450;
             }
 
#elem2 {
              float:left;
              background-color:white;
              width:20;
              height:450;
              background-image:url("img/fond3.gif");
             }
 
#elem3 {
 
              float:left;
              background-color:white;
              width:620;
              height:450;
              background-image:url("img/fond2.gif");
 
             }
 
#elem4 {
              float:left;
              background-color:white;
              width:20;
              height:450;
              background-image:url("img/fond1.gif");
             }
 
#elem5 {
              float:left;
              background-color:white;
              width:120;
              height:450;
              background-image:url("img/erable.jpg");
             }
 
#fond1 {
              background-image:url("img/doujou.jpg");
              width:100%;
              height:430;
             }
 
#fond1_1 {
              overflow:auto;
              height:420;
              text-align:left;
              font-family:Lucida Calligraphy;
              font-size:13;
             }
 
#block_central {
              width:900;
             }
 
/* /////////////////////// */

**Bisûnûrs** · 30/01/2007, 09h38

Je ne sais pas si ça vient de là, mais en CSS, toutes les valeurs de taille doivent obligatoirement être suivies de leur unités sous peine d'avoir des différences d'interprétation selon les navigateurs.

Exemple :

Code :

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

1
2
3
div#reception_menu_haut {
   width:900; /* pas bon */
}

Code :

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

1
2
3
div#reception_menu_haut {
   width:900px; /* bon */
}

**hakurou** · 30/01/2007, 10h33

j'y crois pas, c'était bel et bien ca, juste a cause d'une vieille manie de ne presque jamais mettre les unitées!

excelent, merci pour l'indication, ca m'apprendra a faire des codes de flemmards ! flemme de tout ecrire !

probleme d'affichage css suite a l'insertion doctype

CSS

Discussions similaires

Partager

Partager