Salutations,

J'avais fait un joli site, bien mis en page, mais à base de Tables.
On m'a pas mal critiqué en montrant du doigt que les tables n'était pas W3C compatibles.
J'ai donc pris mon courage à deux mains, et j'ai refait l'intégralité du squelette pour une mise en page en CSS.
Seulement, maintenant, je me retrouve avec des soucis d'alignement verticaux.

Le site en question :
-=> http://mathieu.charreyre.net

Le premier pb est sur la home, la photo aléatoire n'est pas correctement centrée verticalement, alors qu'en tables, au moins, cela rendait bien.

Voici un bout du code en question :
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
(...)
<style type="text/css">
<!--
#HomeBlock {
	position: relative;
	float: left;
	left: 0px;
	top: 0px;
	border: #F00 solid 0px;
	width: 780px;
	padding: 0px 0px 0px 0px;
	background-color: #000000;
	color: #721741;
	font-size: 10px;
	z-index: 1;
}
 
#HomeContent {
	float: left;
	border: 0px;
	width: 660px;
	height: 500px;
	z-index: 1;
}
 
#HomeContent a:hover {
	color: #FFF;
}
 
#HomeContentItem {
	margin-top: 5px; /* Marge superieure des images aleatoires de la home */
	z-index: 1;
}
 
#HomeContentItem img {
	border: 5px solid white;
}
 
#HomeBlockMargin {
	float: right;
	width: 120px;
	border: 0px;
	font-size: 9px;
	font-weight: bold;
	z-index: 1;
}
 
.MarginItem {
	float: left;
	width: 120px;
	z-index: 1;
}
 
.MarginItem a {
	color: #FFF;
	font-size: 8px;
}
 
.MarginItem a:hover {
	color: #721741;
}
-->
</style>
 
<div id="HomeBlock">
	<div id="HomeContent">
        <div id="HomeContentItem">
 
        </div>
    </div>
(...)
Any idea ?