Sujet Précédent Sujet Suivant

Probleme décalage sur IE ( et png )

Résolu/Fermé
user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007 - 25 avril 2007 à 16:07
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 30 sept. 2008 à 21:51
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 : 
<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 :)

14 réponses

Réponse 1 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
25 avril 2007 à 16:33
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 
<img src="image.gif" width="??px" height="??px">

et pour la bordure, ajoute à la css.
div#header img{border:none;}
0
Réponse 2 / 14
user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007
25 avril 2007 à 17:26
j'ai essayé mais ça ne change rien :(
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
25 avril 2007 à 17:48
grrrr…

as-tu une version en ligne ou peux-tu nous copier les codes complets, qu'on puisse mettre les mains dans le cambouis (miam!!!) ?
0
Réponse 3 / 14
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
25 avril 2007 à 18:33
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
    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 ?
0
Réponse 4 / 14
user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007
25 avril 2007 à 18:37
voila la page http://max2gains.free.fr/temp/

le border c'était juste pour visionner..
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007
26 avril 2007 à 05:50
personne pour m'aider ou me proposer un autre moyen pour mettre ces images ? :) merci
0
Réponse 6 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
26 avril 2007 à 06:22
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 !!!
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
27 avril 2007 à 00:57
Salut toi,

C'est que j'ai un peu moins de temps en ce moment.

Grâce à toi, le groupe de fainéants de CCM est toujours bien représenté (-;
0
Réponse 7 / 14
Jacobéo Messages postés 304 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 28 août 2008 79
26 avril 2007 à 06:35
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
0
Réponse 8 / 14
fady005 Messages postés 351 Date d'inscription vendredi 16 février 2007 Statut Membre Dernière intervention 5 novembre 2020 78
26 avril 2007 à 13:13
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à ^^

#### 
<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>&nbsp;</TD><TD>&nbsp;</TD></TR>
			<TR height=60>
			  <TD><IMG src="./images/ban_vide.gif" border=0></TD>
			  <TD width=40>&nbsp;</TD>
			</TR>
		  </TABLE>
		</td>
	  </tr>
      <tr>
        <td>
		  <TABLE class="menu" height="32" cellSpacing=0 cellPadding=0 width="561" border=0>
			<TR>
			  <TD>&nbsp;</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>&nbsp;</TD>
			</TR>
		  </TABLE>
		</td>
	  </tr>
	</table>
  </DIV>
</BODY>
</HTML>

####
0
user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007
26 avril 2007 à 17:51
Merci fady, ton code marche , le seul problème, c'est que mon menu n'est pas aligné en bas de mon header comme il devrait l'être :)

Merci pour vos aides et critiques , c'est en se trompant qu'on apprend ;)
0
fady005 Messages postés 351 Date d'inscription vendredi 16 février 2007 Statut Membre Dernière intervention 5 novembre 2020 78 > user1579 Messages postés 5 Date d'inscription mercredi 25 avril 2007 Statut Membre Dernière intervention 26 avril 2007
27 avril 2007 à 09:35
Aligné à droite tu veux dire ?
Un simple align="right" dans la case qui le contient devrait faire l'affaire...
0
Réponse 9 / 14
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
27 avril 2007 à 00:17
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.
0
Réponse 10 / 14
brahim
17 sept. 2007 à 10:25
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
0
Réponse 11 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
17 sept. 2007 à 10:52
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.
0
Réponse 12 / 14
brahim
17 sept. 2007 à 11:54
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
0
Réponse 13 / 14
Cata
30 sept. 2008 à 20:37
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 .
0
Réponse 14 / 14
Cata
30 sept. 2008 à 20:38
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 .
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
30 sept. 2008 à 21:51
salut,

commence par ajouter un DocType (en première ligne de ton code) : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

+ explication
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
Minette135 -

34 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Smart IPTV décalage de son
Cynco -
bazfile -

1 réponse
Arnaque frauduleuse Ireland ltd
Mymy -
mel -

4 réponses
Décalage son et image sur YouTube ?
Rubik4s -
Kybla -

7 réponses