Discussion :

[bibile]

Bonjour,

j'ai une image:

Code :

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

<img src="im.png" width="1600" height="32" border="0">

mon image fait 1600 pixels de large.
mon ecran fait 1024 pixels de large.
je souhaiterais avoir le centre de l'image, au centre de l'ecran.
est-ce que qqu'un sait comment faire ?

merci !

[francis m]

normalement tu devrais insérer un style de centrage text-align: center; pour ton image, mais cela ne fonctionne pas quand l'image est plus grande que l'écran.
Pour ce faire, il faut mettre un left ou margin-left négatif, dans ton cas de 288px (1600-1024/2) mais cela ne fonctionne pas avec tous les navigateurs. De plus, TON navigateur est à 1024 pixels, mais pas forcément celui de ton client (la personne qui regarde ton site), qui peut très bien être en 800 de large, ou qui est en 1024 mais pas en plein écran.

Donc franchement, je pense que passer du temps, même très peu, pour faire un code qui ne fonctionne que chez une minorité de gens ne sert à rien.

[spirou]

Je suppose que cette image doit être le fond d'un bloc, car avec une largeur pareil

Donc en css :

Code :

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

1
2
3
4
 
#ton_image{ 
    background: url(im.png) 50% 50% fixed;
}

Et html :

Code :

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

1
2
 
<div id="ton_image"></div>

[bibile]

Je suppose que cette image doit être le fond d'un bloc, car avec une largeur pareil
Donc en css :

Code :

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

1
2
3
4
 
#ton_image{ 
    background: url(im.png) 50% 50% fixed;
}

Et html :

Code :

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

1
2
 
<div id="ton_image"></div>

interessant ca !
je vais tenter de l'utilser.
le hic, c'est que cette image est loin d'etre dans la partie la plus basse da la strucutre de ma page html. il va donc faloir que tout le reste s'adapte aux contrainte de cette DIV.
j'espere que ca va marcher ! parce que la solution est vraiment sympa (l'autre solution etant de jouer sur les ascenseurs de la page en javascript..)

[Anduriel]

Moi je ferai ça dans des tableaux:

Code :

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

1
2
3
4
5
6
7
<table align="center" width="100%" height="100%" cellspacing="0" cellpadding="0">
   <tr>
      <td valign="middle">
         <img src="im.png" width="1600" height="32" 
      </td>
   </tr>
</table>

[bibile]

Anduriel, ca ne fonctionne pas !

[balu]

Je dirais de découper ton image car 1600 pixels c'est énorme.

Ton image doit surement avoir une partie répétitive.

[bibile]

Spirou, je n'ai aps reussi a utiliser ta technique.
c'est sans doute de ma faute, parce que je n'ai pas reellement bien expliquer ce que je voulais faire.

je souhaite afficher 2 photos de resolution 640*480 cote a cote. ca ne passe donc pas sur un ecran en 1024*768.
il y a plusieurs facon pour avoir 2 photos cote a cote, j'ai fait rapidement une table:

Code :

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

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td>
      <img src="photo_1.JPG" width="640" height="480">
    </td>
    <td>
      <img src="photo_2.JPG" width="640" height="480">
    </td>
  </tr>
</table>

je souhaite donc que la page soit tjrs centrée entre les 2 photos.
Comme ca, pour une resolution d'ecran de PC en 1280*1024, la personne pourra simplement agrandir sa fenetre de browser et les gens en 1024*768 pourront avoir leur page centrée et devront faire bouger l'ascenseur du browser pour tout voir.

donc, finalement, ca revient a tenter de centrer la table sur la fenetre du browser qui peut etre plus petite !

une idee ?

[bibile]

Je dirais de découper ton image car 1600 pixels c'est énorme.

Ton image doit surement avoir une partie répétitive.

non, cf. post precendent (que j'ai ecrit pendant que tu me repondais ), c'est en fait 2 photos que je souhaite mettre cote a cote pour les comparer.

[bibile]

etant donné que ces photos sont dans une page avec plein d'autre chose, une bonne solution serait de reussir a avoir une astuce pour avoir tjrs le <body> centré au milieu du browser. cela, meme si dans le <body>, il y a des elements bcp plus large que la fenetre du browser !

[spirou]

une bonne solution serait de reussir a avoir une astuce pour avoir tjrs le <body> centré au milieu du browser. cela, meme si dans le <body>, il y a des elements bcp plus large que la fenetre du browser !

Je crois que ce que tu désires faire n'est pas réalisable avec du css, peut-être en JS.

Car faire qu'une page s'affiche avec la barre de scroll au milieu, n'est à ma connaissance pas possible.

Tu peux faire que la jonction de tes images soit bien au milieu de la page, du style :

Code :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
  <title></title>
  </head>
  <body style="overflow: hidden">
 
  <div style="width: 1280; height: 480px; position: absolute; left: 50%; margin-left: -640px; overflow: hidden">
 
  	<div style="width: 640px; height: 480px; float: left; background: #f00"></div>
 
  	<div style="width: 640px; height: 480px; float: left; background: #0f0"></div>">
 
  </div>
 
  </body>
</html>

En enlevant le overflow du body, tu pourras voir l'image de droite en entier , mais pas celle de gauche.

[francis m]

je tiens juste à dire que ce que spirou te propose, c'est bien de mettre un margin-left négatif

donc, au risque de parâître pour un rabat-joie, prière svp de bien vouloir se référer à ma première réponse de ce post...

[bibile]

je tiens juste à dire que ce que spirou te propose, c'est bien de mettre un margin-left négatif

donc, au risque de parâître pour un rabat-joie, prière svp de bien vouloir se référer à ma première réponse de ce post...

dans ta premiere reponse, tu disais que ca ne fonctionnait pas dans tous les browser. tu pensais auxquels en particullier ?

Si je reprends ton premier post, tu as raison quand tu dis que je ne peux pas savoir quelle est la taille de la fenetre de l'utilisateur. et donc, je ne pourrais pas lui centrer l'image.
je crois que je vais passer dans le forum javascript...
merci pour tout