Discussion :

[Strix]

Bonjour.

Alors voilà, je n'arrive tout simplement pas à centrer verticalement les éléments à la droite de ma page (logo google + texte), enfin dans un des éléments.

J'ai bien essayé avec "vertical-align" en "middle" mais ça ne marche pas.

J'ai récupérer un code là :

A partir de ce dernier j'ai maintenant ça

et voilà les codes

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
 
<div id="container">
<span class="Categorie">Furia</span>
<br><br>
<a class="gallery slidea" href="#nogo"><span>test<br><img src="images/furia01.jpg" alt"Furia"><br>test</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="images/furia02.jpg" alt"Furia"></span></a>
<a class="gallery slidec" href="#nogo"><span><img src="images/furia03.jpg" alt"Furia"></span></a>
<br><br><br>	
<a class="gallery slided" href="#nogo"><span><img src="images/furia04.jpg" alt"Furia"></span></a>
<a class="gallery slidee" href="#nogo"><span><img src="images/furia05.jpg" alt"Furia"></span></a>
<a class="gallery slidef" href="#nogo"><span><img src="images/furia06.jpg" alt"Furia"></span></a>
<br><br><br>
<a class="gallery slideg" href="#nogo"><span><img src="images/furia07.jpg" alt"Furia"></span></a>
<a class="gallery slideh" href="#nogo"><span><img src="images/furia08.jpg" alt"Furia"></span></a>
<a class="gallery slidei" href="#nogo"><span><img src="images/furia09.jpg" alt"Furia"></span></a>
<br><br><br>	
<a class="gallery slidej" href="#nogo"><span><img src="images/furia10.jpg" alt"Furia"></span></a>
<a class="gallery slidek" href="#nogo"><span><img src="images/furia11.jpg" alt"Furia"></span></a>
<a class="gallery slidel" href="#nogo"><span><img src="images/furia12.jpg" alt"Furia"></span></a>
<br><br><br>
<a class="gallery slidem" href="#nogo"><span><img src="images/furia13.jpg" alt"Furia"></span></a>
<a class="gallery sliden" href="#nogo"><span><img src="images/furia14.jpg" alt"Furia"></span></a>
<a class="gallery slideo" href="#nogo"><span><img src="images/furia15.jpg" alt"Furia"></span></a>
<br><br><br>
<a class="gallery slidep"  href="#nogo"><span><img src="images/furia16.jpg" alt"Furia"></span></a>
<a class="gallery slideq" href="#nogo"><span><img src="images/furia17.jpg" alt"Furia"></span></a>
<a class="gallery slider" href="#nogo"><span><img src="images/furia18.jpg" alt"Furia"></span></a>
</div>

CSS

Code css :

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
/* -------------------------------     P O R T F O L I O   H T M L    */
#container {
	position:relative;
	width:640px;
	height:370px;
}
a.gallery, a.gallery:visited {
	display:inline;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	width:40px;
	height:40px;
	float:left;
	margin:5px;
	cursor:default;
}
a.gallery span {
	visibility:hidden;
	display:block;
	position:absolute;
	width:475px;
	height:370px;
	text-align:center;
	background-color: #FFFFFF;
}
a.slidea, a.slideb, a.slidec, a.slided, a.slidee, a.slidef, a.slideg, a.slideh, a.slidei, a.slidej, a.slidek, a.slidel, a.slidem, a.sliden, a.slideo, a.slidep, a.slideq, a.slider {
	background-position: center center;
	background-repeat: no-repeat;
}
a.slidea span, a.slideb span, a.slidec span, a.slided span, a.slidee span, a.slidef span, a.slideg span, a.slideh span, a.slidei span, a.slidej span, a.slidek span, a.slidel span, a.slidem span, a.sliden span, a.slideo span, a.slidep span, a.slideq span, a.slider span {
	left:170px;
	top:0px;
}
a.gallery:hover {
	visibility:visible;
	white-space:normal;
	border:1px solid #cc3300;
	z-index:100;
	text-align:center;
}
a.gallery:hover span {
	visibility:visible;
	z-index:100;
}
a.gallery:hover span img {
	border:0px;
	z-index:100;
}
a.gallery:focus, a.gallery:active {
	border:1px solid #000;
	z-index:10;
}
a.gallery:active span, a.gallery:focus span {
	visibility:visible;
	z-index:10;
}
a.gallery:active span img, a.gallery:focus span img {
	border:0px;
	z-index:10;
}

Donc voilà, j'ai bien essayé mais rien n'y fait. Peut-être manque-t-il une classe ?

Merci d'avance

[Dan_A]

Il faut ajouter top:100px; dans a.gallery:hover span et réduire height d'autant dans a.gallery span
Ceci dit, la page s'affiche bien avec Firefox ou Opera mais pas trop avec ie 6.

[Strix]

Il faut ajouter top:100px; dans a.gallery:hover span et réduire height d'autant dans a.gallery span
Ceci dit, la page s'affiche bien avec Firefox ou Opera mais pas trop avec ie 6.

Pour afficher le logo oui mais ça marche avec n'importe quelle image ?

Les images Googles ne sont qu'un exemple, mes images sont plus grandes mais pas n'ont pas toujours la même taille !

[Strix]

Peut être auriez vous une idée pour jouer avec les marges ?

J'ai bien essayer mais je trouve pas la combinaison gagnante

[Strix]

Bon, depuis dix jours (et même un peu plus) j'ai pas laché l'affaire.

Je suis allé voir pas mal de tutos et de posts (et les liens qui allaient avec), j'ai essayé les "margin", "padding", "display:table-cell"...

Mais là je bloque un max...

[MasterOfChakhaL]

Salut,

Le vertical-align:middle; devrait marcher si tu mets aussi display:table-cell;
Malheureusement, ce mode d'affichage n'est pas reconnu par IE6, en ce qui concerne IE7... je n'en sais rien...

[Strix]

Salut,

Le vertical-align:middle; devrait marcher si tu mets aussi display:table-cell;
Malheureusement, ce mode d'affichage n'est pas reconnu par IE6, en ce qui concerne IE7... je n'en sais rien...

J'ai bien suivi pour le vertical-align:middle; le display:table-cell;, mais là je sais plus où le metre...

[Strix]

Bon, ben j'ai re-essayé avec le display et le vertical-align...
Marche toujours pô...

Là, je vous avoue que je ne sais plus quoi faire...

[modelix]

Salut !

Bon, il est ptet un peu tard pour répondre, mais j'ai eu un problème similaire : je n'arrivais pas à aligner verticalement mon texte au milieu dans un div (par contre j'arrivais à le centrer horizontalement avec text-align).
J'ai essayé avec des span, avec des marges, etc.

La solution la plus satisfaisante (disons en fait "la moins pire" ) que j'aie trouvé au final est la suivante :
- forcer line-height avec la même valeur que le height de la div (attention, visiblement ça ne fonctionne pas si la taille de la div est en pourcentage...)
- rajouter ensuite vertical-align:middle;

Exemple :
div#titrepage {
width:650px;
height:100px;
line-height: 100px;
text-align:center;
vertical-align:middle;
}

Et dans ce cas, ça aligne également toutes les images que tu pourrais mettre dans la div.

Voila, en espérant que cela pourra t'être utile...
@+

[Strix]

Tu sais que je t'aime toi ! Mais alors !!!

Rrrrrrrhhhhhaaaaaa !!!!!!!!!!