Centrer automatiquement

Independenza21
Invité n'ayant pas de compte PHPfrance

19 avr. 2013, 00:42

Bonjour,

J'ai besoin d'aide, j’essaie de créer une page d'introduction pour mon site qui est en court de construction lui aussi.
Sur cette page d'intro, je vais mettre mettre 2 zones réactives qui me permettrons d'orienter les visiteurs en fonctions de leurs besoins.
Au début, j’étais parti sur ce code:

Code : Tout sélectionner

<!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>Bienvenue</title> </head> <body> <style> html, body, #bg, #bg table, #bg td { height:100%; overflow:hidden; width:100%; } #bg { height:200%; width:200%; left:-50%; top:-50%; position:absolute; z-index:-200; } #bg td { text-align:center; vertical-align:middle; } #bg img { min-height:50%; min-width:50%; } </style> <div id="bg"> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="bggs3.jpg" alt="test" border="0" usemap="#ma_map"> </td> </tr> </table> </div> <p> <map name="ma_map" id="id_map"> <area shape="rect" coords="47,246,426,471" href="index.php" alt="Vers Index" /> <area shape="rect" coords="513,242,898,468" href="#google.fr" /> </map> </p> </body> </html>


Avantage, la page s'affiche correctement sur plusieurs écrans et résolutions différentes, problème, impossible de mettre en place les zones réactive.

Je m'oriente donc sur quelque chose de plus simple, enfin a premiere vu:

Code : Tout sélectionner

<!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>Test Intro</title> <style type="text/css"> <!-- body { background-color: #000; } --> </style></head> <body> <img src="logogs2.png" width="800" height="600" /> </body> </html>
Alors la c'est bon les zones réactives fonctionnent, mais par contre je n'arrive pas a faire en sorte que l'image soit centrer automatiquement en fonction de la résolutions des visiteurs.

Please: help me!!!!

Help me!!!!

soft1ne
Invité n'ayant pas de compte PHPfrance

19 avr. 2013, 06:39

Avec un simple
margin:auto;
?

Independenza21
Invité n'ayant pas de compte PHPfrance

19 avr. 2013, 09:19

cela ne change rien...

Code : Tout sélectionner

<body> <img src="logogs2.png" width="800" height="600" margin="auto"; /> </body> </html>

Petit nouveau ! | 3 Messages

19 avr. 2013, 10:23


Mammouth du PHP | 571 Messages

19 avr. 2013, 11:32

bonjour,
de mémoire la balise img est de type inline(enfin à confirmer) et par conséquent elle n'a pas de margin raison pour laquelle ça ne marche pas chez toi.
tu places ton image dans une div(ou dans tout autre élement de type bloc) puis tu centres la div en faisant un text-align:
<div id="image">
<img src="" >
</div>

 #image{
	 text-align:center;
	}
ou encore en utilisant les margin, il faut donner la largeur à ta div :
 #image{
	 margin:0 auto;
      width:22em;
	}