centrer en plein ecran

Question

Bonjour, Voila mon petit soucis, ca faisait longtemps....lol Alors j'ai mis un agrandissement de photo qui s'ouvre dans une nouvelle fenêtre du navigateur. le truc c'est que lorsque je fais F11 donc plein ecran l'image est collée en haut de page, impossible de la centrer ! y aurait il une relation avec le z-index ?? Voila mon code Tuan-Gallery Photographie

Oui je sais y a pas mal de n'importe quoi dans #image, je teste ce qui peut marcher..lol Merci par avance de votre aide Cro_Mag

Ozimandias · Answer

Tes images font-elles toutes la même taille?

Si c'est le cas, ton css peut donner ça:

#image {
	text-align: center;
	left: 50%;
	top: 50%;
	margin-left : -205px;
	margin-top : -307px;
	clip: rect(auto,auto,auto,auto);
	overflow: visible;
	z-index: auto;
}

les valeurs de marge gauche et top correspondent respectivement à la moitié de la largeur et la moitié de la hauteur de ton image.

Au passage, ça correspond à quoi cette ligne: 	clip: rect(auto,auto,auto,auto);

@+

Cro_mag · Answer

Salut, 

Merci de ta réponse.
J'ai testé mais malheureusement ca ne marche pas.........

Ozimandias · Answer

J'ai mal lu ton code, il faut mon mettre le css sur la div "page"

Cro_mag · Answer

Ca ne marche toujours pas...


#page {
	color: #999;
	background-color: #000;
	text-align: center;
	left: 50%;
	top: 50%;
	}
#image {
	text-align: center;
	margin : auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	overflow: visible;
	z-index: auto;
}

arthezius · Answer

Il faut mettre un width et height sur le div avec les même valeurs que sur l'image. Tuan-Gallery Photographie

Ce simple code devrait suffire à te centrer l'image.

Cro_mag · Answer

oui ma div image est comprise dans la div principale qui est div page
comment je peux faire ??

arthezius · Answer

En même temps je suis pas persuader que deux div l'une dans l'autre soit vraiment utile pour cette page.
En tout cas de ce que j'en vois.
Maintenant, s'il y a une raison particulière, je veux bien modifier mon code en conséquence.

Ozimandias · Answer

Essaye ça:


#page {
	color: #999;
	background-color: #000;
	text-align: center;
	position:absolute;
        left: 50%;
	top: 50%;
	margin-left: -205px;
        margin-top: -307px; 
        width:410px;
        height:615px;
}
#image {
	text-align: center;
}

Cro_mag · Answer

Ca marche nikel !!
Merci Ozimandias

Ozimandias · Answer

pas de soucis, content de t'avoir aidé.

arthezius · Answer

Oui donc le div image ne sert à rien. Le text-align encore moins vu que le div page qui contient le div image a déjà la taille de l'image.
Donc ça reviens exactement a ce que j'avais mis.
Mais bon c'est pas grave...

arthezius · Answer

Ben si tu met le div page au format de l'image, le div image si se trouve dedans ne sert plus a rien.

Cro_mag · Answer

Re, j'ai un petit soucis.
Mes images types portraits se positionnent parfaitement; le probleme est que les photos type paysage ne vont pas dedans.

J'ai crée une feuille de style spécifique pour #page et #image. 
Est ce possible d'appliquer le css qui va bien aux photos verticales et un css adapté aux photos horizontales presentes sur la même page ?
Sachant que en tout j'ai une centaines de photos donc de pages agrandies et 11 pages de galeries.......

Merci par avance

arthezius · Answer

Le décallage qu'on ta indiqué correspondait au dimension de l'image indiqué au départ. Si tu affiches des images de taille différente, il faut adapter les valeurs.
margin-left est égal à la moitié de la largeur d'image.

Exemple:
Une images 400x300px.
margin-left:-200px;

Ozimandias · Answer

Le problème qu'il va rencontrer, c'est qu'il va devoir faire les changements à chaque nouvelle image. C'est pas franchement viable dans son cas.

Je vais te trouver une solution mais ce sera surement du javascript...

@+ (je cherche ;) )

Cro_mag · Answer

est ce que margin doit etre uniquement dans #page ou bien je peux le deplacer a #image et j'obtiendrais le même résultat ?? (si ca passe comme ca je cree un #imagehorizontale)
Comme j'ai parfois des images verticales et horizontales sur la même page....

Ozimandias · Answer

Est-ce que tes images sont toujours déclarée comme suit:

<img src="../grandes images/VENPO_3790.jpg" width="410" height="615" alt="VENPO_3790" />

Les attributs soulignés sont ils toujours définis?

arthezius · Answer

Suffit qu'il détecte les formats du fichier et qu'il gère le code dynamiquement.

Pour récupérer les dimensions:

$taille=getimagesize('http://site/images.jpg');

$taille[0] correspondra à la largeur et $taille[1] à la hauteur.
Partant de là, c'est pas très dur de placer l'image dynamiquement.

<?php
$taille=getimagesize('http://site/images.jpg');
$left=$taille[1]/2;
echo'<img src="http://site/images.jpg" alt=""  style="position:relative;left:50%;margin-left:-'.$left.'px;"/>';
?>

Quelques chose de ce genre devrai fonctionner.

Cro_mag · Answer

Pour Ozimandias oui les attributs sont toujours soulignés.

Pour Arthezius, faut il que je supprime mes div et mette juste ton code dans ma page ???
Et avec ton code l'image qui s'ouvre dans une nouvelle fenetre de navigateur sera bien centré en taille normal et en plein ecran et s'adaptera automatiquement si c'est une image paysage ou portrait.

Parce que c'est ca qui me gene
$taille[0] correspondra à la largeur et $taille[1] à la hauteur.
[0] d'une photo portrait n'est pas le même que [0] d'un paysage...

Dsl je comprend pas tout, j'ai peut etre compris de travers, j'aime bien tout comprendre pour bien apprendre les choses.

Cro_mag · Answer

'; ?>

je comprends pas trop la facon d'incorporer tout ca. Sur le principe j'ai compris, mais dans l'application c'est plus dur. Si tu peux m'expliquer pour que je comprenne..

Cro_mag · Answer

Salut, J'ai a moitié compris, je vais quand même essayé de mon coté de codé ca, pour apprendre. je te mets mon css et html. pour info en fait j'ai une page gallerie, qui contient les vignettes et une page agrandie qui contient l'image agrandie (qui souvre donc dans une nouvelle fenetre navigateur). (faut definir le site comme toi ? http://blablabla/blabla ou direct ../images/blabla) code css de la page agrandie #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; margin-left: -205px; margin-top: -307px; width:auto; height:auto; } #image { text-align: center; } #image p { font-size: 12px; color: #9EE789; } code html de la page agrandie Tuan-Gallery Photographie

VENPO_3790

Taper F11 pour visualiser la photo en plein écran

arthezius · Answer

Donc dans: #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; margin-left: -205px; margin-top: -307px; width:auto; height:auto; } Tu supprimes les lignes margin-left et margin-top. Tu aura donc à la place: #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; width:auto; height:auto; } Ensuite dans la page, tu vas changer:

VENPO_3790 En:

VENPO_3790 '; ?> Ainsi, quelques soit l'image, ça devrait marcher. Les dimensions se mettront automatiquement à jours suivant l'image. Comment est géré ta page de galerie ? Tu modifie te liste de miniature directement en modifiant la page html ou tu la guère dynamiquement ?

Cro_mag · Answer

Salut, 

Je gère tout en modifiant chaque page html (et ouais plus de 100 pages a modifier par catégorie..)
Si t'as un moyen plus simple... j'ai fait comme ca car je ne connais pas le php

En tout cas merci je vais testé ca et je te tiens au courant.
En fait y a un truc que je ne comprenais pas, c'est taille[1] et taille[0] je savais pas si il fallait rentrer une valeur a la place de ces chiffres, car je ne voyais nul part que taille[1] equivaut a la largeur etc.. (bien sur toi tu l'as dit, mais je ne le voyais pas ecris clairement dans le code).

Cro_mag · Answer

Alors j'ai testé le problème c'est que la photo n'est pas centré dans le sens verticale. Elle est collé en haut ! le ode de ma page Tuan-Gallery Photographie

VENPO_3865

Taper F11 pour visualiser la photo en plein écran

mon css @charset "utf-8"; /* CSS Document */ #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; margin-left: -205px; margin-top: -307px; width:auto; height:auto; } #image { text-align: center; } #image p { font-size: 12px; color: #9EE789; }

arthezius · Answer

Déjà, il fallait enlever du fichier css:
margin-left: -205px;
margin-top: -307px;

Ensuite vérifie dans le code html de la page qui s'affiche à l'écran si dans le style="margin-left:-'.$left.'px;margin-top:-'.$top.'px;" tu as bien les valeurs qui remplace les variables.

Je pense qu'il va aussi falloir remplacer
width:auto;
height:auto;
par les dimensions de l'image.
style="height:'.$taille[0].'px;width:'.$taille[1].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px;"

Cro_mag · Answer

Salut, Alors j'ai remplacé ce que tu as dit. Ce qui fait que ma feuille de style donne ca : #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; style="height:'.$taille[0].'px;width:'.$taille[1].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px; } #image { text-align: center; } #image p { font-size: 12px; color: #9EE789; } Et le code de ma page agrandie donne ceci : Tuan-Gallery Photographie

VENPO_3865

Taper F11 pour visualiser la photo en plein écran

arthezius · Answer

style="height:'.$taille[0].'px;width:'.$taille[1].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px; C'est sur le

Par:

Cro_mag · Answer

euh oups dsl c'est moi qui est effacé la fin ?> et ; en fait y avait que ces symboles qui apparaissaient sur ma page en mode création j'ai supprimé pour voir si ca me mettait une erreur.

J'essaye ce que tu as mis de suite.
Je te tiens au courant
Merci Arthezius

Cro_mag · Answer

oualalala suis vraiment un boulet.. Maintenant l'image est scotché en haut a gauche html

VENPO_3865 '; ?>

Taper F11 pour visualiser la photo en plein écran

et le css #page { color: #999; background-color: #000; text-align: center; position:absolute; left: 50%; top: 50%; } J'ai donc supprimé #image puisqu"apparemment ca ne sert a rien Si je supprime la balise div image du code html ba j'ai plus d'image qui apparait...

arthezius · Answer

Pour faire très simple, j'ai testé chez moi et voici ce que donne le code qui fonctionne: Tuan-Gallery Photographie VENPO_3865

'; ?>

Taper F11 pour visualiser la photo en plein écran

A tester ici: http://tests.arthezius.fr/img_cent.php Il manquait " à la fin de la balise div. Un oublie de ma part à ma dernière modif visiblement. J'ai ramené le CSS du div page en debut de mon fichier pour mon test. Le plus simple serai de tout mettre dans un fichier css en fait.

Cro_mag · Answer

Tuan-Gallery Photographie VENPO_3865

'; ?>

Taper F11 pour visualiser la photo en plein écran

Je sais pas c'est moi qui suis débile y'a un truc. j'ai bien mis ce que tu as posté. mon image ne s'affiche meme pas, et le thumbs quand il n'y a pas d'image est toujours scotché en haut a gauche....

arthezius · Answer

Ton site est en ligne?
Si oui peux tu me mettre un lien ?

Autre question, est-ce que ce que j'ai fais sur mon lien s'affiche bien chez toi ?

arthezius · Answer

Je comprenais pas alors que ça DEVAIT fonctionner.

Arf...

Tu met du PHP dans une page html... Renomme tes pages en .php et ça fonctionnera.
Si tu tiens vraiment à les avoir en .html on verra avec l'url rewriting ensuite.

Cro_mag · Answer

Et bien oui ton exemple marche bien.
Mais si je veux que ca marche j'ai juste a les mettre en .php ??
URL rewrinting ???

arthezius · Answer

Oui il faut renommer les fichiers .html en .php
Le PHP permet de rendre dynamique des éléments statique. Exemple, Pour faire ta galerie, tu es actuellement obligé de faire une page pour chaque photo à priori ou d'utiliser un javascript.
Avec PHP, tu peux faire des pages qui ont une structure unique et dont tu fera évoluer un élément via une variable qui sera contenu dans l'url.
Par exemple:
photos.php?galerie=venise&photo=15
La page reste photos.php et dans cette page tu vas faire évoluer différente galerie qui seront défini par la variable galerie contenu dans l'url. La photo elle est défini par la variable photo.
On peux même supposer que:
photos.php?galerie=venise
t'affichera l'ensemble des miniatures et que l'ajout de la variable photo permette de visualiser une photo précise.

L'url rewriting est une technique qui avec l'usage de l'htaccess permet de réécrire l'url.
Exemple:
photos.php?galerie=venise&photo=15
Devient:
galerie-venise-15.html

Cro_mag · Answer

oui je fais une page par galerie et une page par agrandissement donc pour venise ca me fait 11 pages de galeries et 100 pages agrandissements

j'ai bien compris le principe du php, tu as très bien expliqué.Merci
Donc si je veux utiliser ce système la, comment dois je faire ?

arthezius · Answer

J'avais à un moment donnée eu besoin de faire une galerie de photo (voir ici). J'avais utilisé l'attribut float de CSS. L'upload Via une page et un formulaire, je pouvais uploader l'image sur le serveur et l'enregistrer sur ma base de donnée. Pas l'image en elle même, mais mon script me permettais de renommer l'image avec une valeur aléatoire composé de chiffre et lettre. J'enregistre donc le chemin et le nom du fichier ainsi que la catégorie correspondante. Pas compliqué jusqu'à présent. Pour l'upload d'image: http://phpcodeur.net/articles/php/upload J'ai également rajouter un code pour créer des miniatures. Pour l'enregistrer, il faut une requête du genre: $sql='INSERT INTO table_img VALUES("", "'.$chemin.'", "'.$categorie.'", "'.$date.'")'; Rien de compliquer. Tu peux envisager rajouter les dimensions pour les retrouver facilement ou même enregistrer le nom de celui qui l'upload si tu veux ajouter un classement par membres. La galerie Pour cette partie, il te faut deux tables dans ta base de donnée. Une pour lister les images et une pour les galeries. Le tout sera paramétrable via ton panneau d'administration. Là, il faut faire une autre requête. On va supposer que tu défini la galerie dans l'url et on va reprendre l'exemple d'url que j'avais mis précédemment: photos.php?galerie=venise Ton il faut dans un premier temps lister les galeries. if(!isset($_GET['galerie']) && !isset($_GET['photo'])) { $sql='SELECT * FROM table_galerie ORDER BY galerie ASC'; $req = mysql_query($sql) or die('Erreur SQL !
'.$sql.'
'.mysql_error()); while($data = mysql_fetch_array($req)) { echo''.$data['galerie'].''; } } On vérifie au début que la galerie et la photo ne sont pas déclaré et on affiche la liste. Ensuite, dès qu'une galerie est déclaré, on affiche les images qui la compose. if(isset($_GET['galerie']) && !isset($_GET['photo'])) { $sql='SELECT * FROM table_images WHERE galerie="'.$_GET['galerie'].'" ORDER BY date ASC'; $req = mysql_query($sql) or die('Erreur SQL !
'.$sql.'
'.mysql_error()); while($data = mysql_fetch_array($req)) { echo'

'; } } On vérifie que la galerie est déclaré mais pas la photo et on affiche la liste des photos. Reste plus qu'a afficher la photo: if(isset($_GET['galerie']) && isset($_GET['photo'])) { $sql='SELECT * FROM table_images WHERE id="'.$_GET['photo'].'"'; $req = mysql_query($sql) or die('Erreur SQL !
'.$sql.'
'.mysql_error()); $data = mysql_fetch_array($req); echo'

'; } Ces trois morceaux de code étant dans un même fichier php et à la suite. L'exemple est très simple mais c'est juste pour le principe. Le tout est à mettre en forme. Sur le div.pict, tu peux mettre un float:left et régler un width et un height correspondant à la table d'une miniature. Rajoute des marges et ça te fera une suite de miniature les unes à la suite des autres. C'est ce que j'ai fait sur le site que je mentionne au début. Fait des essai à partir de ce que je viens de mettre et au besoin je t'aiderai encore. Avec un principe comme celui-ci tu t'épargne la création d'autant de pages que de photos. Une fois que tu sera parvenu à quelques chose de correct à par de ça, on pourra voir pour l'url rewriting. Avant ça sert pas à grand chose.

Cro_mag · Answer

C'est super sympa, mais le problème est que je n'y comprend pas grand chose. Mon niveau en php est de 0.
J'ai bien lu l'upload de fichiers, ca reste tres vague. Y a un fichier a envoyé sur mon espace web ?? Ca me cree une Base de données ??
Je suis largué complet et je m'enfonce.
Je souhaite la meme disposition de ma page, des vignettes etc.. meme design
Comment incorporé ca dans mon code ?

Centrer en plein ecran

38 réponses

Votre réponse

Discussions similaires

Newsletters