Discussion :

[Casio]

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 ?

[HiRoN]

Bonjour,

As-tu tenté de rajouter un display:block + taille + marge sur ton #HomeContentItem img ?

[Casio]

Bonjour,

As-tu tenté de rajouter un display:block + taille + marge sur ton #HomeContentItem img ?

Salutations,

Vi, je viens de tester... Aucun changement.
L'image se colle automatiquement en haut de la cellule.
Si celle-ci fait la largeur definie par la cellule, ça ne pose aucun problème. Si elle est plus courte, cela donne un resultat assez moche car une grosse marge apparait en bas de l'image.

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
(...)#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 */
	height: 100%;
	vertical-align: middle;
	text-align: center;
	z-index: 1;
}
 
#HomeContentItem img {
	border: 5px solid white;
	display: block;
}(...)

Le site en question : http://mathieu.charreyre.net

Votre aide est la bienvenue...