La validation XHTML "brise" la présentation de ma page

Version imprimable

13/08/2009, 16h06
FadeOut

La validation XHTML "brise" la présentation de ma page

Bonjour,

J'ai une page web que je suis en train de refaire, et je veux qu'elle soit valider selon les normes xhtml strict...

Lorsque je me plis à ces normes, ma page n'est plus très jolie

vous pouvez voir le tout a www.neotechinformatique.com

(le .css est situé à ./website.css)

vous pouvez aussi voir ce que la page devrait avoir l'air à www.neotechinformatique.com/profil.html

Avez vous une idée de ce que je fais qui est incorrect??

Merci
13/08/2009, 16h17
Bisûnûrs

Citation:

Envoyé par FadeOut

Avez vous une idée de ce que je fais qui est incorrect??

Développer pour IE.

De plus, enlève la déclaration XML qui passe IE en mode Quirks.
Si tu veux plus d'explications, je te propose un peu de lecture qui ne te fera pas de mal sur les bases du HTML :
http://j-willette.developpez.com/tut...bases-du-html/
13/08/2009, 16h20
Macmillenium

Citation:

Envoyé par FadeOut

Avez vous une idée de ce que je fais qui est incorrect??

Citation:

Envoyé par FadeOut

vous pouvez aussi voir ce que la page devrait avoir l'air à www.neotechinformatique.com/profil.html

Coder sans Doctype.

Citation:

Envoyé par FadeOut

Lorsque je me plis à ces normes, ma page n'est plus très jolie

Trop tard.
13/08/2009, 16h26
FadeOut

donc, si je comprends bien, j'enlève le <?xml au début... et je refais le .css pour reprendre la mise en page?
13/08/2009, 20h11
FadeOut

Bon, j'arrive presque à une solution, mais j'ai deux problème...

je ne peux reformater mes liens <a href> dans mon menu de droite avec l'attribut width (j'ai essayé de mettre un div dans le a, ça marche, mais ce n'est pas accepté en xhtml strict)

et je ne suis pas capable de voir le <div class="content"> qui devrait s'affifcher à droite du menu...

est-ce que vous avez des suggestions

salut fadeOut,

voici le css pour ton problème de div content:

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
body {
background-color:#FFFFFF;
color:#002299;
margin-left:14%;
margin-right:10%;
margin-top:3em;
}
div {
background-color:#EEEEFF;
margin-bottom:0.1em;
margin-left:0.5em;
padding-top:0.2em;
position:relative;
}
div.fullpage {
border:0.01em solid #AAAACC;
margin-left:0;
padding-top:0;
}
div.header, div.body, div.footer {
margin-top:0.1em;
width:98%;
}
div.header {
height:6em;
}
div.footer {
font-size:0.8em;
height:2em;
padding-bottom:1em;
padding-top:2em;
text-align:center;
}
div.w3cComp {
text-align:left;
}
div.logo {
display:inline;
width:45%;
}
div.topmenu {
display:inline-block;
text-align:right;
vertical-align:top;
width:50%;
}
div.leftmenu {
border:0.05em solid #002299;
display:inline-block;
padding-bottom:0.3em;
padding-top:0;
width:10em;
}
div.content {
display:inline-block;
vertical-align:top;
width:75%;
}
a.topmenu {
background-color:#EEEEFF;
color:#002299;
font-size:0.85em;
margin-left:0.1em;
margin-right:0.1em;
margin-top:0.1em;
padding:0.1em;
text-align:center;
}
a.leftmenu {
background-color:#EEEEFF;
}
a.topmenu:hover {
color:#0022FF;
}
a.leftmenu:hover {
background-color:#002299;
border-color:#333333;
color:#EEEEFF;
}
div.menuitem {
background-color:inherit;
border:0.05em solid #002299;
color:inherit;
margin-left:0.3em;
margin-right:0.3em;
margin-top:0.1em;
padding:0.2em;
width:9em;
}
a.leftmenu, a.leftmenuselected {
color:black;
text-align:center;
text-decoration:none;
}
a.leftmenuselected {
background-color:#DDDDFF;
text-decoration:none;
}
div.menuheader {
background-color:#002299;
color:#EEEEFF;
margin-left:0;
padding-bottom:0.2em;
text-align:center;
}
p {
text-align:justify;
}
.prop {
float:left;
width:1px;
}
.min200px {
height:100px;
}
.min350px {
height:350px;
}
.clear {
clear:both;
height:1px;
overflow:hidden;
}

;)

15/08/2009, 13h40
12monkeys
Bonjour

Citation:

Envoyé par FadeOut

Bon, j'arrive presque à une solution, mais j'ai deux problème...

je ne peux reformater mes liens <a href> dans mon menu de droite avec l'attribut width (j'ai essayé de mettre un div dans le a, ça marche, mais ce n'est pas accepté en xhtml strict)

Tu supprimes le div et tu attribut au <a> la propriété suivante :

Code:

display:block;

Citation:

Envoyé par FadeOut

et je ne suis pas capable de voir le <div class="content"> qui devrait s'affifcher à droite du menu...

Pour ça il faut que tu mettes un float:left sur <div class="leftmenu"> : en effet tu fait flotter content mais si tu ne fais pas flotter leftmenu tout ce qui se trouve après ira à la ligne...

Et pour éviter que <div class="body"> ait alors une hauteur nulle donne lui un contexte de formatage (une petite recherche sur ce terme) avec :
Code:

1 2 3 div.body { overflow:hidden; }