Probleme décalage sur IE ( et png )
Résolu
user1579
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour.
J'ai un petit problème avec ma page :(
J'ai une entête avec une image de fond, sur laquelle je souhaite ajouter un logo, une bannière et un menu.
Pour la bannière et le menu, c'est fait et ça ne pose pas de problème.
Par contre dès que j'essaie d'ajouter le logo à gauche de l'entete, ça me décale tout et ça agrandit la taille totale de mon entete..:(
J'ai cherché mais je ne trouve rien qui fonctionne..
Pour info, sous firefox, ça marche super, mais pas sur IE.
Voila le code de l'entete :
La partie css :
J'espère que vous pourrez m'aider, sous firefox tout est nickel pourtant.. :(
Autre détail aussi, si quelqu'un a la solution, la transparence de mon logo ( en png ) ne fonctionne pas sur IE non plus.
Merci :)
J'ai un petit problème avec ma page :(
J'ai une entête avec une image de fond, sur laquelle je souhaite ajouter un logo, une bannière et un menu.
Pour la bannière et le menu, c'est fait et ça ne pose pas de problème.
Par contre dès que j'essaie d'ajouter le logo à gauche de l'entete, ça me décale tout et ça agrandit la taille totale de mon entete..:(
J'ai cherché mais je ne trouve rien qui fonctionne..
Pour info, sous firefox, ça marche super, mais pas sur IE.
Voila le code de l'entete :
<div id="header">
<table align="left">
<tr>
<td><img src="logo.png" border="0"></td>
</tr>
</table>
<table align="right" border="1">
<tr height="40">
<td> </td>
<td> </td>
</tr>
<tr height="60">
<td><img src="./images/banniere.gif" border="0"></td>
<td width="40"> </td>
</tr>
</table>
<div id="menu">
<table border="0" width="561" height="32" align="right" cellpadding="0" cellspacing="0" class="menu">
<tr>
<td> </td>
<td width="91" class="menuPadding" style="background-image:url(images/boutonPremier.gif);">Accueil</td>
<td width="91" class="menuPadding" style="background-image:url(images/boutonN.gif);">page 0</td>
<td width="91" class="menuPadding" style="background-image:url(images/boutonN.gif);">page1</td>
<td width="91" class="menuPadding" style="background-image:url(images/boutonN.gif);">page 2</td>
<td width="15"> </td>
</tr>
</table>
</div></div>
La partie css :
#header { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:186px; width: 784px; background-image:url(../images/header.jpg); padding: 0px 0px 0px 0px; margin-top: 0px;}
#banniere { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom:0px; height: 60px; width: 468px; padding: 0px 0px 0px 0px;}
#menu { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom:0px; height: 32px; width: 784px; padding: 154px 0px 0px 0px;}
J'espère que vous pourrez m'aider, sous firefox tout est nickel pourtant.. :(
Autre détail aussi, si quelqu'un a la solution, la transparence de mon logo ( en png ) ne fonctionne pas sur IE non plus.
Merci :)
A voir également:
- Probleme décalage sur IE ( et png )
- Ie tab - Télécharger - Outils pour navigateurs
- Ie 11 - Télécharger - Navigateurs
- Iptv decalage son image ✓ - Forum Gravure
- Décalage son image tv orange fibre ✓ - Forum Cinéma / Télé
- Png to pdf - Télécharger - PDF
14 réponses
salut,
pour la transparence du png sous IE6 ne la gérait pas. il faut donc se rabattre sur le format gif. IE7 le gère.
pour le décalage essaie de préciser la taille de l'image dans la balise
et pour la bordure, ajoute à la css.
pour la transparence du png sous IE6 ne la gérait pas. il faut donc se rabattre sur le format gif. IE7 le gère.
pour le décalage essaie de préciser la taille de l'image dans la balise
<img src="image.gif" width="??px" height="??px">
et pour la bordure, ajoute à la css.
div#header img{border:none;}
Bonjour vous,
Oui, ça manque d'informations.
Donne-nous au moins les dimensions des images.
Ou des copies d'écran de ce que tu obtiens dans les 2 navigateurs.
Ou mieux, l'adresse de la page.
Cependant, essaye en enlevant tous les espacements des <table> par
Oui, ça manque d'informations.
Donne-nous au moins les dimensions des images.
Ou des copies d'écran de ce que tu obtiens dans les 2 navigateurs.
Ou mieux, l'adresse de la page.
Cependant, essaye en enlevant tous les espacements des <table> par
cellpadding="0" cellspacing="0"D'ailleurs, je ne comprend pas bien l'utilité de ces tables pour tes images, et de la table de droite de 4x4 cellules… Et pourquoi cette border dans la table à bannière ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
ben finalement je vais pas me salir les mains. je ne comprends pas mois non plus l'utilité des trois <table>. mais contrairement à Gihef (j'en profite pour le saluer et regretter de ne pas le lire autant qu'il me plairait !), je ne réagis pas aussi vite (encore un truc qu'il faut que je copie sur lui !), il a fallu que j'ouvre le source de ta page dans l'éditeur pour vraiment lire le html alors qu'il était déjà collé plus haut… enfin, bref !
le plus surprenant restant le tableau de la bannière. quatre cellules pour afficher une seule image dans une seule cellule, je veux bien pester contre IE (et encore plus si je peux être de mauvaise foi…) mais là c'est toi qui cherche les embêtements !
si la <table> décale, c'est sans doute à cause du {padding-left:154px;} appliqué à div#menu. mais avant d'essayer je pense que tu devrais te poser la question de la façon dont tu souhaites structurer ton document html.
car le document et ta feuille de style partent un peu dans tous les sens alors que tu n'as codé que la bannière. en continuant ainsi tu vas accumuler les divergences d'affichage entre navigateurs. tu n'en finira jamais de corriger la css, un coup pour FF, un coup IE…
m'enfin moi, pour ce que j'en dis…
-;o)
c'est le matin donc,
BONNE JOURNEE A TOUS !!!
ben finalement je vais pas me salir les mains. je ne comprends pas mois non plus l'utilité des trois <table>. mais contrairement à Gihef (j'en profite pour le saluer et regretter de ne pas le lire autant qu'il me plairait !), je ne réagis pas aussi vite (encore un truc qu'il faut que je copie sur lui !), il a fallu que j'ouvre le source de ta page dans l'éditeur pour vraiment lire le html alors qu'il était déjà collé plus haut… enfin, bref !
le plus surprenant restant le tableau de la bannière. quatre cellules pour afficher une seule image dans une seule cellule, je veux bien pester contre IE (et encore plus si je peux être de mauvaise foi…) mais là c'est toi qui cherche les embêtements !
si la <table> décale, c'est sans doute à cause du {padding-left:154px;} appliqué à div#menu. mais avant d'essayer je pense que tu devrais te poser la question de la façon dont tu souhaites structurer ton document html.
car le document et ta feuille de style partent un peu dans tous les sens alors que tu n'as codé que la bannière. en continuant ainsi tu vas accumuler les divergences d'affichage entre navigateurs. tu n'en finira jamais de corriger la css, un coup pour FF, un coup IE…
m'enfin moi, pour ce que j'en dis…
-;o)
c'est le matin donc,
BONNE JOURNEE A TOUS !!!
Bonjour User 1579,
Pour l'extension .png, il te faut ajouter ce code (.htc) à l'aide d'une balise behavior. Attention, si tu fais du CSS, elle n'est pas valide, dans ce cas, tu peux la placer au travers d'un lien comme ceci: behavior: url(csshover.htc);} /* WinIE behavior call */ Ceci rend le .png lisible avant IE7. (Infos CSS par Eric Meyer)
Voici le code .htc ( http://www.libpng.org/pub/png/apps/pngquant.html )
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (erik(at)eae.net)
* for WebFX (http://webfx.eae.net)
* Copyright 2002
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.01
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
*
*/
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// Replace h1's contents with an image. -Porter
pngImg = 'ph-flower2b.png';
element.innerHTML = "<img src='" + pngImg + "' height=330 width=250 alt='' />";
// Get the newly created image for manipulation. -Porter
var img = element.firstChild;
// get src
var src = img.src;
// check for real change
if (src == realSrc) {
img.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/.test(realSrc.toLowerCase() ) ) {
// set blank image
img.src = blankSrc;
// set filter
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
// Remove the background image version of the PNG. -Porter
element.style.backgroundImage = "none";
}
else {
// remove filter
img.runtimeStyle.filter = "";
}
}
</script>
</public:component>
Internet ne vaut que s'il est partagé ...
Jacques
Pour l'extension .png, il te faut ajouter ce code (.htc) à l'aide d'une balise behavior. Attention, si tu fais du CSS, elle n'est pas valide, dans ce cas, tu peux la placer au travers d'un lien comme ceci: behavior: url(csshover.htc);} /* WinIE behavior call */ Ceci rend le .png lisible avant IE7. (Infos CSS par Eric Meyer)
Voici le code .htc ( http://www.libpng.org/pub/png/apps/pngquant.html )
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (erik(at)eae.net)
* for WebFX (http://webfx.eae.net)
* Copyright 2002
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.01
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
*
*/
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// Replace h1's contents with an image. -Porter
pngImg = 'ph-flower2b.png';
element.innerHTML = "<img src='" + pngImg + "' height=330 width=250 alt='' />";
// Get the newly created image for manipulation. -Porter
var img = element.firstChild;
// get src
var src = img.src;
// check for real change
if (src == realSrc) {
img.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/.test(realSrc.toLowerCase() ) ) {
// set blank image
img.src = blankSrc;
// set filter
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
// Remove the background image version of the PNG. -Porter
element.style.backgroundImage = "none";
}
else {
// remove filter
img.runtimeStyle.filter = "";
}
}
</script>
</public:component>
Internet ne vaut que s'il est partagé ...
Jacques
Voilà ton code qui marche sur n'importe quel navigateur "connu".
Le truc c'est de ne jamais laisser plusieurs tables se balader comme ça dans ta page surtout quand il sont l'un à côté de l'autre... Il faut toujours les englober en une seule.
Ah oui j'oubliais le code déjà ^^
####
####
Le truc c'est de ne jamais laisser plusieurs tables se balader comme ça dans ta page surtout quand il sont l'un à côté de l'autre... Il faut toujours les englober en une seule.
Ah oui j'oubliais le code déjà ^^
####
<HTML>
<HEAD>
<TITLE>ParolesDeWeb.com - Le site sur lequel vos webmasters vous disent tout !</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<LINK href="css/styles.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV id=header align="center">
<A id=haut name=haut></A>
<table align=center>
<tr>
<td rowspan="2"><IMG height=170 src="./images/logo.png" width=208 border=0></td>
<td>
<TABLE border=1>
<TR height=40><TD> </TD><TD> </TD></TR>
<TR height=60>
<TD><IMG src="./images/ban_vide.gif" border=0></TD>
<TD width=40> </TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td>
<TABLE class="menu" height="32" cellSpacing=0 cellPadding=0 width="561" border=0>
<TR>
<TD> </TD>
<TD class=menuPadding style="BACKGROUND-IMAGE: url(images/boutonN.png)" width=91>
<A href="http://max2gains.free.fr/temp/index.php?page=accueil">Accueil</A>
</TD>
<TD class=menuPadding style="BACKGROUND-IMAGE: url(images/boutonN.png)" width=91><A>1</A></TD>
<TD class=menuPadding style="BACKGROUND-IMAGE: url(images/boutonN.png)" width=91><A>2</A></TD>
<TD class=menuPadding style="BACKGROUND-IMAGE: url(images/boutonN.png)" width=91><A>3</A></TD>
<TD width=15> </TD>
</TR>
</TABLE>
</td>
</tr>
</table>
</DIV>
</BODY>
</HTML>
####
Bon, alors, essaye en te passant de tableaux.
Puisque tu utilises des CSS, tu peux créer la même structure à l'aide de div imbriquées et positionnées.
Tu trouveras des exemples dans cette page.
Voilà ce que mon navigateur affiche.
Teste ça dans IE.
Puisque tu utilises des CSS, tu peux créer la même structure à l'aide de div imbriquées et positionnées.
Tu trouveras des exemples dans cette page.
Voilà ce que mon navigateur affiche.
Teste ça dans IE.
j'ai un site web www.minerve.org concepté avec joomla ca tourne bien avec fire fox mais ne marche pas avec internet explorer
je cé pas svp visitez le site et donner moi la reponse le plus tot possible mon email est brahim.gamoudi@gmail.com
je cé pas svp visitez le site et donner moi la reponse le plus tot possible mon email est brahim.gamoudi@gmail.com
salut,
quand on poste un message sur un forum de CCM, il faut un minimum de politesse.
en plus tu ne décris pas ton problème, ce n'est pas à nous de le chercher.
et on ne répond pas par mail mais par le forum.
à plus.
quand on poste un message sur un forum de CCM, il faut un minimum de politesse.
en plus tu ne décris pas ton problème, ce n'est pas à nous de le chercher.
et on ne répond pas par mail mais par le forum.
à plus.
salut,
merci pour le tuyau de politesse;
et pardon d'etre impoli.
je suis un profane et le probleme que j'ai demander de l'aide a resoudre je ne peux pas l'exprimer; c'est pour cela d'ailleur que j'ai passe l'id de mon site, si vous voulez m'aider merci de bien vouloir jeter un coup d'oeil sur le site minerve.org en comparant ce qui apparait en utilisant firefox comme moteur de recherche et ce qui ce presente en utilisant internet explorer; le probleme s'autera aux yeux.
pardon une autre foix pour mon impolitesse; et j'espere cette foix ci repondre au minimum de politesse
merci pour le tuyau de politesse;
et pardon d'etre impoli.
je suis un profane et le probleme que j'ai demander de l'aide a resoudre je ne peux pas l'exprimer; c'est pour cela d'ailleur que j'ai passe l'id de mon site, si vous voulez m'aider merci de bien vouloir jeter un coup d'oeil sur le site minerve.org en comparant ce qui apparait en utilisant firefox comme moteur de recherche et ce qui ce presente en utilisant internet explorer; le probleme s'autera aux yeux.
pardon une autre foix pour mon impolitesse; et j'espere cette foix ci repondre au minimum de politesse
Bonsoir tout le monde je vous écrit car j'ai aussi un probleme avec mon header , sur une de mes pages il est complétement décalé (pages photos) https://www.packarbredenoel.com et je ne comprend pas pourquoi .
Bonsoir tout le monde je vous écrit car j'ai aussi un probleme avec mon header , sur une de mes pages il est complétement décalé (pages photos) [url]https://www.packarbredenoel.com[url] et je ne comprend pas pourquoi .
