Centrer en plein ecran

Cro_mag Messages postés 172 Statut Membre -
arthezius Messages postés 3756 Statut Membre - 13 déc. 2009 à 15:52

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css">
<!--
#page {
	color: #999;
	background-color: #000;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: auto;
	margin-bottom: auto;
}
#image {
	text-align: center;
	margin : auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	clip: rect(auto,auto,auto,auto);
	overflow: visible;
	z-index: auto;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
</head>

<body bgcolor="#000000">
<div id="page">

<div id="image">
<img src="../grandes images/VENPO_3790.jpg" width="410" height="615" alt="VENPO_3790" />
</div>

</div>
</body>
</html>

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

Afficher la suite

A voir également:

Centrer en plein ecran
Double ecran - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée
Retourner ecran pc - Guide
Capture d'écran samsung - Guide
Capture d'écran mac - Guide

38 réponses

Réponse 21 / 38

Cro_mag Messages postés 172 Statut Membre 1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css">
<!--

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#image p {
	font-size: 12px;
	color: #9EE789;
}
-->
</style>
<link href="../../../style_page_agrandie_venise.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">
<div id="page">

<div id="image">
  <p><img src="../grandes images/VENPO_3790.jpg" width="410" height="615" alt="VENPO_3790" />
  </p>
  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>
</div>

</div>
</body>
</html>

Réponse 22 / 38

arthezius Messages postés 3756 Statut Membre 475

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:

<div id="page">

<div id="image">
  <p><img src="../grandes images/VENPO_3790.jpg" width="410" height="615" alt="VENPO_3790" />

En:

<?php
$taille=getimagesize('../grandes images/VENPO_3790.jpg');
$left=$taille[1]/2;
$top=$taille[0]/2;

echo'<div id="page" style="margin-left:-'.$left.'px;margin-top:-'.$top.'px;">

<div id="image">
  <p><img src="../grandes images/VENPO_3790.jpg" alt="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 ?

Réponse 23 / 38

Cro_mag Messages postés 172 Statut Membre 1

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).

Réponse 24 / 38

Cro_mag Messages postés 172 Statut Membre 1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css">
<!--

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<link href="../../../style_page_agrandie_venise.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">

<?php
$taille=getimagesize('../grandes images/VENPO_3865.jpg');
$left=$taille[1]/2;
$top=$taille[0]/2;

echo'<div id="page" style="margin-left:-'.$left.'px;margin-top:-'.$top.'px;">

<div id="image">
  <p><img src="../grandes images/VENPO_3865.jpg" alt="VENPO_3865" />




  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>
</div>
</div>
</body>
</html>

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;
}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 25 / 38

arthezius Messages postés 3756 Statut Membre 475

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;"

Réponse 26 / 38

Cro_mag Messages postés 172 Statut Membre 1

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css">
<!--

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<link href="../../../style_page_agrandie_venise.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">

<?php
$taille=getimagesize('../grandes images/VENPO_3865.jpg');
$left=$taille[1]/2;
$top=$taille[0]/2;

echo'<div id="page" style="margin-left:-'.$left.'px;margin-top:-'.$top.'px;">

<div id="image">
  <p><img src="../grandes images/VENPO_3865.jpg" alt="VENPO_3865" />




  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>
</div>
</div>
</body>
</html>

Réponse 27 / 38

arthezius Messages postés 3756 Statut Membre 475

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

C'est sur le <div id="page" qu'il fallait mettre ça. A la place de ce que tu avais.
Désolé je pensais que ça paraissait évident...

Donc remplace

<div id="page" style="margin-left:-'.$left.'px;margin-top:-'.$top.'px;">

Par:

<div id="page" style="height:'.$taille[0].'px;width:'.$taille[1].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px;>

Ensuite le CSS (pour que ça soit clair):

#page {
	color: #999;
	background-color: #000;
	text-align: center;
	position:absolute;
        left: 50%;
	top: 50%;
}

Je ne vois nul par la fin de <?php et du echo'. Serait-ce un oublie ? ou tu n'a pas mis la totalité du code ?

Réponse 28 / 38

Cro_mag Messages postés 172 Statut Membre 1

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

Réponse 29 / 38

Cro_mag Messages postés 172 Statut Membre 1

oualalala suis vraiment un boulet..

Maintenant l'image est scotché en haut a gauche
html

<body bgcolor="#000000">

<?php
$taille=getimagesize('../grandes images/VENPO_3865.jpg');
$left=$taille[1]/2;
$top=$taille[0]/2;

echo'<div id="page" style="height:'.$taille[0].'px;width:'.$taille[1].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px;>

<div id="image">
  <p><img src="../grandes images/VENPO_3865.jpg" alt="VENPO_3865" />';
?>


  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>
</div>
</div>
</body>
</html>

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...

Réponse 30 / 38

arthezius Messages postés 3756 Statut Membre 475

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css">
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#page {
	color: #999;
	background-color: #000;
	text-align: center;
	position:absolute;
   left: 50%;
	top: 50%;
}
</style>
</head>

<body bgcolor="#000000">

<?php
$img='jean-louis.jpg';

$taille=getimagesize($img);
$left=$taille[0]/2;
$top=$taille[1]/2;

echo'<div id="page" style="height:'.$taille[1].'px;width:'.$taille[0].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px;">
<img src="'.$img.'" alt="VENPO_3865" />';
?>


  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>

</div>
</body>
</html>

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.

Réponse 31 / 38

Cro_mag Messages postés 172 Statut Membre 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuan-Gallery Photographie</title>
<style type="text/css"> 
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#page {
	color: #999;
	background-color: #000;
	text-align: center;
	position:absolute;
   left: 50%;
	top: 50%;
}
</style>
 
</head>
 
<body bgcolor="#000000">
 
<?php
$img='../fr/venise/grandes images/VENPO_3865.jpg';
 
$taille=getimagesize($img);
$left=$taille[0]/2;
$top=$taille[1]/2;
 
echo'<div id="page" style="height:'.$taille[1].'px;width:'.$taille[0].'px;margin-left:-'.$left.'px;margin-top:-'.$top.'px;">
<img src="'.$img.'" alt="VENPO_3865" />';
?>
 
 
  <p>&nbsp;</p>
  <p>Taper F11 pour visualiser la photo en plein écran</p>
  <p>Photos &amp; Copyright © Tuan-Gallery Photographie<br />
    Tous droits réservés</p>
 
</div>
</body>
</html>

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....

Réponse 32 / 38

arthezius Messages postés 3756 Statut Membre 475

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 ?

Réponse 33 / 38

arthezius Messages postés 3756 Statut Membre 475

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.

Réponse 34 / 38

Cro_mag Messages postés 172 Statut Membre 1

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

Réponse 35 / 38

arthezius Messages postés 3756 Statut Membre 475

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

Réponse 36 / 38

Cro_mag Messages postés 172 Statut Membre 1

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 ?

Réponse 37 / 38

arthezius Messages postés 3756 Statut Membre 475

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 !<br />'.$sql.'<br />'.mysql_error()); 
while($data = mysql_fetch_array($req))
     {
     echo'<a href="photos.php?galerie='.$data['galerie'].'">'.$data['galerie'].'</a>';
     }
}

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 !<br />'.$sql.'<br />'.mysql_error()); 
while($data = mysql_fetch_array($req))
     {
     echo'<div class="pict"><a href="'.photos.php?galerie='.$_GET['galerie'].'&photo='.$data['id'].'.'"><img src="'.$data['chemin'].'" /></a></div>';
     }
}

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 !<br />'.$sql.'<br />'.mysql_error()); 
$data = mysql_fetch_array($req);
     
echo'<img src="'.$data['chemin'].'" alt="" />';
}

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.

Réponse 38 / 38

Cro_mag Messages postés 172 Statut Membre 1

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 ?

arthezius Messages postés 3756 Statut Membre 475

Je pense qu'il va falloir que tu commences à apprendre le PHP avant d'aller plus loin.
Sans connaissance des bases, ça ne sert à rien que je te mette des codes PHP que tu ne comprendra pas.
L'idéal étant quand même de comprendre ce que tu fais.

Regarde ici: https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql
Fait des essais avec le code pour uploader les images et parallèlement pour l'utilisation d'une base de donnée.
Quand tu aura commencé à comprendre comment le tout fonctionne, là on pourra parler du système que je te parlais pour gérer ta galerie.
Il faut faire les choses dans l'ordre.

Discussions similaires

Quel est le raccourci clavier pour le plein écran ?

les jeux ne s'affichent pas en plein écran

écran qui s'éteint mais pas le PC

Réduire jeu plein écran

Plein écran du menu LoL

Centrer en plein ecran

38 réponses

Votre réponse

Discussions similaires

Newsletters