Accueil > Forum > > > > Centrer une image quelque soit la résolution ou le navigateur.
 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
|
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
|
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>
<br>
Survolez cette case pour faire<br>
apparaître la superbe image<br>
</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
 Livres en rapport
|
Derniers Blogs
 XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|