begin process at 2010 02 10 03:51:15
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Centrer une image quelque soit la résolution ou le navigateur.


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Centrer une image quelque soit la résolution ou le navigateur.

mercredi 20 mai 2009 à 14:22:03 | Centrer une image quelque soit la résolution ou le navigateur.

mquisuisje

Bonjour,

Grace à l'aide de Kazma et Bul3, j'ai réussi  à agrandir une image à partir d'une vignette et que celle-ci se superpose au texte. Mon problème maintenant est le suivant,  quand je positionne cette image de sorte qu'elle soit au centre du texte, celle-ci suivant la résolution de l'ecran ou le navigateur ne se retrouve jamais au même endroit. Comment résoudre ce problème ? L'image étant dans la même  </Table> que le texte, y-a-t-il un moyen de centrer l'image par rapport à cette table ? Cela résoudrait peut-être le problème ?

Merci de votre réponse

A+

mercredi 20 mai 2009 à 14:51:06 | Re : Centrer une image quelque soit la résolution ou le navigateur.

mquisuisje

Pour compléter: je précise que dans cette </table>, il y a 4 <td. Dans le 4ème se trouve le texte.

A+
mercredi 20 mai 2009 à 15:58:35 | Re : Centrer une image quelque soit la résolution ou le navigateur.

Bul3

Membre Club
Bonjour,
un ( ou une, je n'ai pas été présenté, je ne sais pas ) <table> s'adapte
     et à son contenu et à la taille de l'écran
     4 TD, déjà, on ne peut pas mettre dans le TD du milieu !
     mais en fait : pas tout à fait compris ce que tu cherches
     centrer l'image ? par rapport à la fenêtre ?
     centrer le ( ou la ) table ?
    
Cordialement [mon Site] [M'écrire] Bul
mercredi 20 mai 2009 à 20:19:59 | Re : Centrer une image quelque soit la résolution ou le navigateur.

mquisuisje

je reprends plus simplement, j'aimerais imposer le centrage de l'image qui apparait au passage de la vignette au centre de la fenêtre (qui si je ne me trompe pas commence par </table> ). Le problème est que si je centre pour IE, il y a un décalage pour Firefox et vice versa. De plus au niveau de la résolution l'image ne reste pas au centre de la fenêtre. Par ex sur mon écran 19" en 1280x1024 plein écran pas de problème, mais si je réduis la fenêtre l'image ne reste pas au centre de la fenêtre mais se positionne différemment suivant l'étirement. Alors que la fenêtre contenant le texte est visible entièrement. Donc je me posais la question si on ne pouvait pas imposer que l'image se centre par rapport à la fenêtre (même si celle-ci bouge lors d’un étirement ou un retrécissement du navigateur) comme ça je n'aurais plus de problème de résolution et de navigateur.

mon code est pour la position de l'image est:

<style type="text/css">
<!--
#texte {
z-index: 1;
}
#coucou {
z-index: 2;
left: 460px;
bottom: 100px;
position: absolute;
height: auto;
visibility: visible;
}
-->
</style>

et ensuite dans
<table width="100%" border="0">
........
</tr><td..avec le texte....</td>
<p><img id ='coucou' src ='image.jpg' ></p> (cette image est invisible à l'ouverture de la page)

voilà j'espère avoir été plus claire :-)

cordialement

je suis un :-)
jeudi 21 mai 2009 à 00:29:56 | Re : Centrer une image quelque soit la résolution ou le navigateur.

PetoleTeam

Membre Club
Bonjour,
je commence par la fin
voilà j'espère avoir été plus claire :-)
pas sûr !!!

...qui si je ne me trompe pas commence par </table>
pas exactement, cela commence par <TABLE> et fini par </TABLE>

de ce que je vois la construction de ta TABLE laisse à désirer, </tr><td..avec le texte....</td>, est incorrect on devrait retrouver un truc du style...
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>


Il existe plusieures méthodes pour centrer dans la fenêtre d'affichage dont une, l'alignement avec les marges negatives.

Je te livre un exemple que j'espère te permettra de mieux cerner la méthode...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>Alignement avec les marges negatives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
  font-family : Verdana;
  font-size : 13px;
}
td {
  text-align : center;
}
td:hover {
  color : blue;
}
/* affichage image sur le mouseover */
td:hover img {
  display : inline;
  background-color : #fff0f0;
}
/*-- Alignement avec les marges negatives des img --*/
td img {
  display : none; /* non visible au depart */
  border : 1px solid red;
  position : absolute; /* obligatoire */
  height : 200px;
  width : 400px;
  left : 50%;
  /* margin-left doit etre egale la moitie de la largeur */
  margin-left : -200px;
}
</style>
</head>
<body>
<table border="1" width="100%">
  <tr>
    <td>Ligne 1 Colonne 1</td>
    <td>Ligne 1 Colonne 2</td>
    <td>Ligne 1 Colonne 3</td>
  </tr>
  <tr>
    <td>Ligne 2 Colonne 1</td>
    <td>
      <!-- on place l'image dans la TD -->
      <img id="IMAGE" src="images.jpg" alt="Super Image 400x200">
      <b>
        &nbsp;<br>
        Survolez cette case pour faire<br>
        apparaître la superbe image<br>
        &nbsp;
      </b>
    </td>
    <td>Ligne 1 Colonne 3</td>
  </tr>
  <tr>
    <td>Ligne 3 Colonne 1</td>
    <td>Ligne 3 Colonne 2</td>
    <td>Ligne 3 Colonne 3</td>
  </tr>
</table>
<!-- un petit lien pour tester la position -->
<a href="#" onclick="document.getElementById('IMAGE').style.display = 'inline';"> Affiche Image </a>
</body>
</html>

nota :
- pour que le hover sur la TD fonctionne il faut un DOCTYPE Strict de préférence.
- dans cet exemple les images doivent avoir la même largeur, ici 400px.

Quoi dire de plus, surement plein de choses mais, à toi de jouer...
;O)


Cette discussion est classée dans : style, font, image, mso, 0cm


Répondre à ce message

Sujets en rapport avec ce message

Spry Accordion (pb sur focus) [ par nawakator ] Bonjour,<li Dépendances entre combobox [ par cool0501 ] <link rel="Fi Problème d'affichage des form avec Ajax sous ie [ par nemo_ulysse31 ] <link rel="Fi Question sur les Frames et DIV [ par Lobb88 ] <link rel="Fi picdem.net télésurveillance [ par brahimzemmal ] <link rel="Fi RemoveChild capricieux [ par armata ] <link rel="Fi Aiguillage de site [ par uniuc ] <link rel="Fi Faire apparaître une image avec un passage de souris [ par kouedic ] Bonjour,Je suis en train de réaliser un site internet et sur une page je souhaiterais faire l'application suivante : Le fait de passer la souris sur u Soumission d'un paramètre avec ajout des paramètres présents [ par fourmiel ] Bonjour J'ai un problème de conservation des paramètres dans la navigation de mon site. J'ai une entête en jsp présent sur beaucoup de page et des lie extjs bouton [ par jeud84 ] Salut à vous tous, débutant dans le domaine je cherche à reproduire ce genre de présentation : <meta name="Generator" content="M


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,328 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales