Discussion :

[Nerva]

Bonjour.

A partir d'une page contenant les vignettes, j'affiche la photo en popup.

Lien vers le popup dans la page des vignettes :

Code :

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

<td width="140" height="140"><div align="center"><a href="photos/test.htm" onClick="window.open('','popup','width=1024,height=768,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img class="thumb" src="photos/test.jpg" alt="Afficher la photo"></a></div></td>

Code du popup :

Code :

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

1
2
3
4
5
6
7
<center>
<table>
	<tr>
		<td valign="middle"><a href="Javascript:window.close();"><img class="photo" src="test.jpg" alt="Fermer"></a></td>
	</tr>
</table>
</center>

Ce système me convient parfaitement (le fond noir du popup en plein écran fait bien ressortir la photo) mais il y a un "bug" que je n'arrive pas à résoudre : malgré la déclaration d'alignement "middle", la photo dans le popup ne s'affiche pas au centre de celui-ci mais est alignée en haut.
Je voudrais essayer de baliser l'alignement dans la feuille de style mais je ne connais pas le code.

Si vous avez une solution ou une autre.

Merci.

[Djakisback]

Salut,
normalement une pop-up est une page comme les autres, elle doit donc contenir un body etc. auquel cas tu peux mettre la propriété CSS "text-align: center" au body.
Bye

[edit]Je viens de voir que tu cherchais à aligner verticalement, désolé pour la réponse erronée :/[/edit]

[DreamPush]

Salut !

Peut-être en testant ce CSS ou en l'améliorant pour toi...

Bon Code

[Nerva]

/* Centrage vertical et horizontal dans une page */
#container {
position: absolute;
width: 760px;
height: 420px;
top: 50%;
left: 50%;
margin: -210px 0 0 -380px; /* Margin : Top Right Bottom Left */
/* Margin: -(hauteur/2) 0 0 -(largeur/2) */
}

Dans un certain sens, ce code fonctionne, mais...
Toutes mes photos font 600 x 900 px en portrait et 900 x 600 px en paysage ; et chaque galerie contient des photos en portrait et en paysage. Donc, tel quel, ça ne fonctionne pas.

J'ai essayé également vertical-align: middle; soit :

Code :

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

1
2
3
4
5
6
img.photo {
border-width: 2px;
border-style: solid;
border-color: #E8E8E8;
vertical-align: middle;
}

Pour le code complet du popup, mais ça ne marche pas non plus...

Précisions.

A l'origine, je ne cherchais pas à afficher la popup en 1024 x 768 et j'avais formaté chaque ligne en fonction de la taille de la photo, soit 670 x 970 en portrait et 970 x 670 en paysage, les 70 pixels supplémentaires étant destinés aux différentes "encadrements" de la fenêtre (barre, défilement, etc...).
Seulement, si dans Firefox c'était satisfaisant, dans IE 6, il y avait un problème pour les photos en portrait : malgré scrollbars=1 l'ascenseur vertical était grisé, il fallait obligatoirement double-cliquer sur la barre système pour qu'il devienne disponible, ce qui ne faisait pas très sérieux (je ne sais pas ce qu'il en est pour IE 7 et encore moins pour les autres navigateurs).
J'ai donc décidé d'afficher le tout en 1024 x 768, une taille supérieure à toutes les photos, qu'elles soient en portrait ou en paysage.

[Nerva]

Alors on vient de me donner la solution, tellement simpliste !

Il suffit de remplacer <table> par <table height="100%"> et la photo est automatiquement centrée verticalement...