Compatibilité IE, FF

je crack. 60h que je cherche... en vain

Sujet résolu

10 juillet 2006 à 16:47:56

Bonjour.

J'ai un gros probleme de compatibilité. En apparence rien de grave, mais sur mozilla, mon "padding" recouvre completement mon menu horizontal.
Comment je peux parrer cela ?? Sous IE sa marche super en +. snif
pour voir le site cliquez ici

aidez moi svp. j'en peu plus. lol. sa fait 3 nuits presques blanches que je passe sur ce probleme :colere2:

merci d'avance.

strucky

10 juillet 2006 à 17:05:06

On t'as déjà dis de fermer tes balises <a>, c'est pas la peine de refaire un sujet, si c'est pour ne pas appliquer ce que l'on te dit :-°

Qu!ch3

10 juillet 2006 à 17:26:20

Je l'ai fait sa change rien. donc j'ai repris mon ancien code ( sans faire expres ) mais la n'est pas le probleme.

( le but sur ce forum c de casser ou d'aider ? )

strucky

10 juillet 2006 à 17:31:40

Sur ton site, c'est toujours pareil.

Citation : Qu!ch3

( le but sur ce forum c de casser ou d'aider ? )

C'est d'aider, d'ailleurs ce que l'on a fait, mais c'est quand même bien toi qui n'appliques ce que l'on te conseille.

Hiashi Hyuuga

10 juillet 2006 à 17:50:10

et sous opera ton site est enorme je te conseille de le rapticir un peu car c'est chiant d'aller sur le coté avec la barre

Qu!ch3

10 juillet 2006 à 17:51:49

Je te répete strucky que je l'ai fait, j'ai testé et sa ne change rien du tout. donc le probleme ne viens pas de la. ( et je repete aussi que j'ai uptade sur mon ftp le mauvais fichier , l'ancien, ce qui ne change rien )

merci quand meme pour ton aide.

Bizarre. tu peux faire une impression ecran stp Flo le kamikaze.
Car sous IE et FF les tailles son correct. ( tu ne serais pas en 800*600 ? )

Anonyme

10 juillet 2006 à 18:01:01

bonsoir,

ce que tu peux essayer c'est de mettre des z-index pour tes differentes parties dans le css qui concerne le menu horizontal pour êtres sur que le texte ce trouve bien au dessus du fond blanc.
Voir la doc du css pour les valeures j'ai un doute pour t'en indiquer. (essayer 0 pour le fond blanc et 1 pour le texte).

par contre je suis assez daccord avec "strucky" ny tes balises <a> pas plus que les <img> ne sont fermées. pour un lien <a href="lien">texte</a> et pour les images <img src="lien vers l'image" alt="texte alternatif"/> mais bon c'est a toi de voir.

Citation : Flo le kamikaze

et sous opera ton site est enorme je te conseille de le rapticir un peu car c'est chiant d'aller sur le coté avec la barre

Flo le kamikase soit un peut plus précis car moi sur Opéra V8 et en résole 1280*1024 pas de problème c'est le même résultat que sur ff sur netscape v8 idem par contre pour les liens ie et opera fonctionne , netscape et ff il ne fonctionne pas (pour le menu horizontal.

atly

10 juillet 2006 à 18:09:21

A quoi bon 3 topics pour un même problème... Et déjà résolu.
Revois ton positionnement

Surtout qu'il s'agit d'une mise en page plutôt simple. Il existe des gabarits que tu peux prendre et t'en inspirer.

Hiashi Hyuuga

10 juillet 2006 à 18:49:08

j'ai opera 9 et je suis en 800*600 mais les site qui font aussi gros sont rare
et la la barre en bas (je connais pas le nom) pour bouger sur le coter je peux la bouger au moin de 5 ou 6 centimetre alors que d'habitude je m'en sert pas

desolé jai essayez de mettre une image mais impossible de la uploader

Anonyme

10 juillet 2006 à 19:04:06

Citation : Flo le kamikaze

j'ai opera 9 et je suis en 800*600 mais les site qui font aussi gros sont rare
et la la barre en bas (je connais pas le nom) pour bouger sur le coter je peux la bouger au moin de 5 ou 6 centimetre alors que d'habitude je m'en sert pas

desolé jai essayez de mettre une image mais impossible de la uploader

Re
Une question c'est pour une raison matériel ou autre cette resole car perso je m'arrête dans la compatibilité à une résole de 1024*768 car je ne pensais pas que ces résolution était encore d'actualité vue les nouvelle possibilités?

Hiashi Hyuuga

10 juillet 2006 à 19:10:21

les nouvelle possibilité pense au vieux pc et oui il en reste
c'est pour ca que je dis sa c'est sur c'est rare mais il en reste

Qu!ch3

10 juillet 2006 à 20:27:59

le Z-index jousur l'image d'arriere plan qu'il met en avant ou pas, mais pas sur le contenu. dans mon site, le menu est dans un div et c'est un tableau. Je ne peux donc pas le faire passer sur le blok texte. sniff

strucky

10 juillet 2006 à 20:31:34

Y'a un truc que je ne comprends pas, pourquoi ne fermes-tu pas ces balises a ?

Si encore, tu le faisais, j'essaierais de voir le problème avec webdevelopper, mais comme je ne sais pas si le problème vient de ça.

Ton menu est afficher via du php je présumes vu l'indentation ?
Donne le code php.

Qu!ch3

10 juillet 2006 à 20:38:33

lol.

Désolé je pensais plus a up la new version.
Voila, cette fois toutes les balises sont fermés.

Voila mon code:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ASSOCIATION AIDONS CAMILLE A TOURY (FRANCE - 28)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="format.css"/>
<link rel="shortcut icon" type="image/x-icon" href="images/icone.gif"/>
</head>
<body>

<div id="haut_gauche">
</div>
<div id="haut">
</div>
<div id="menuhorizontal">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="index.php?page=accueil">
<img
<? if ($page=="accueil")
{?> src="images/fond/accueil2.jpg" <?;
}
else
{?> src="images/fond/accueil.jpg" <?;
}
?>
width="149" height="35" alt=""/></a></td>
<td>
<a href="index.php?page=aidez">
<img
<? if ($page=="aidez")
{?> src="images/fond/aidez2.jpg" <?;
}
else
{?> src="images/fond/aidez.jpg" <?;
}
?>
width="162" height="35" alt=""/></a></td>
<td>
<a href="index.php?page=contact">
<img
<? if ($page=="contact")
{?> src="images/fond/contact2.jpg" <?;
}
else
{?> src="images/fond/contact.jpg" <?;
}
?>
width="123" height="35" alt=""/></a></td>
<td>
<a href="index.php?page=forum">
<img
<? if ($page=="forum")
{?> src="images/fond/forum2.jpg" <?;
}
else
{?> src="images/fond/forum.jpg" <?;
}
?>
width="106" height="35" alt=""/></a></td>
<td>
<a href="index.php?page=liens">
<img
<? if ($page=="liens")
{?> src="images/fond/liens2.jpg" <?;
}
else
{?> src="images/fond/liens.jpg" <?;
}
?>
width="112" height="35" alt=""/></a></td></tr></table>
</div>
<div id="haut_droite">
</div>
<div id="blanc_haut">
</div>
<div id="milieu">
<div id="gauche">
<div id="menuvertical">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="index.php?page=presentation">
<img
<? if ($page=="presentation")
{?> src="images/fond/presentation2.jpg" <?;
}
else
{?> src="images/fond/presentation.jpg" <?;
}
?>
width="146" height="44" alt=""/></a></td>
</tr>
<tr>
<td>
<a href="index.php?page=methode">
<img
<? if ($page=="methode")
{?> src="images/fond/methode2.jpg" <?;
}
else
{?> src="images/fond/methode.jpg" <?;
}
?>
width="146" height="40" alt=""/></a></td>
</tr>
<tr>
<td>
<a href="index.php?page=progression">
<img
<? if ($page=="progression")
{?> src="images/fond/progression2.jpg" <?;
}
else
{?> src="images/fond/progression.jpg" <?;
}
?>
width="146" height="38" alt=""/></a></td>

</tr>
<tr>
<td>
<a href="index.php?page=manif">
<img
<? if ($page=="manif")
{?> src="images/fond/manif2.jpg" <?;
}
else
{?> src="images/fond/manif.jpg" <?;
}
?>
width="146" height="39" alt=""/></a></td>
<td>
</tr>
<tr>
<td>
<a href="index.php?page=parrainage">
<img
<? if ($page=="parrainage")
{?> src="images/fond/parrainage2.jpg" <?;
}
else
{?> src="images/fond/parrainage.jpg" <?;
}
?>
width="146" height="36" alt=""/></a></td>

</tr>
<tr>
<td>
<a href="index.php?page=album">
<img
<? if ($page=="album")
{?> src="images/fond/album2.jpg" <?;
}
else
{?> src="images/fond/album.jpg" <?;
}
?>
width="146" height="40" alt=""/></a></td>
</tr>
</table>

</div>
<div id="camille">
</div>
</div>
<div id="texte_corps">
<?php
$page = $_GET['page'];
if ($page=="")
{
include("pages/bienvenu.php");
}
else
{
include("pages/$page.php");
}
?>
</div>

</div>
<div id="pied">
</div>

</body>
</html>

et le CSS:

body
{
width : 992px;
height : 100%;
margin: auto;
background-color: #F222FF;
min-height : 582px;
}

a img
{
border:none;
}
#haut_gauche
{
width: 146px;
height: 123px;
background-image: url("images/fond/haut_gauche.jpg");
background-repeat: no-repeat;
float: left;
}

#haut
{
width: 846px;
height: 36px;
background-image: url("images/fond/haut.jpg");
background-repeat: no-repeat;
float: right;
}

#menuhorizontal
{
width:652px;
float: left;

}

#haut_droite
{
width: 194px;
height: 35px;
background-image: url("images/fond/haut_droite");
background-repeat: no-repeat;
float: left;
}

#blanc_haut
{

width: 846px;
height: 52px;
background-image: url("images/fond/blanc.jpg");
float: right;

}

#milieu
{
width: 992px;
height: 100%;
background-image: url("images/fond/contenu.jpg");
min-height : 412px;

}
#pied
{
width: 992px;
height: 47px;
background-image: url("images/fond/bas.jpg");
float: bottom;
}

#texte_corps
{
font-family: Comic Sans MS,verdana, arial, sans-serif;
text-align:center;
overflow:auto;
width:80%;
padding-top:100px;

}

#gauche
{
width: 146px;
float: left;
}

#menuvertical
{

width: 146px;
height: 237px;
float: top;
}

#camille
{

width: 146px;
height: 152px;
background-image: url("images/fond/camille.jpg");
float: bottom;

}

strucky

10 juillet 2006 à 21:59:33

Bon, j'ai corrigé le problème, mais ton html, c'est pas terrible.

Aussi, pour tes balises images, arranges-toi pour que la balise ne s'étale pas sur plusieurs lignes, et au lieu de if/else, utilises la version abrégée.

Exemple pour ta 1ère image de ton 1er lien :

<td>
<a href="index.php?page=accueil">
<img src="<?php echo ($page=="accueil") ? 'images/fond/accueil2.jpg' : 'images/fond/accueil.jpg'; ?>" width="149" height="35" alt="" />
</a>
</td>

Le css :

*{margin: 0; padding: 0}

body
{
width : 992px;
margin: 0 auto;
background-color: #F222FF;
}

a img
{
border: none;
}

#haut_gauche
{
width: 146px;
height: 123px;
background-image: url("images/fond/haut_gauche.jpg");
background-repeat: no-repeat;
float: left;
}

#haut
{
width: 846px;
height: 36px;
background-image: url("images/fond/haut.jpg");
background-repeat: no-repeat;
float: right;
}

#menuhorizontal
{
width:652px;
float: left;
}

#haut_droite
{
width: 194px;
height: 35px;
background-image: url("images/fond/haut_droite.jpg");
background-repeat: no-repeat;
float: left;
}

#blanc_haut
{

width: 846px;
height: 52px;
background-image: url("images/fond/blanc.jpg");
float: right;
}

#milieu
{
width: 992px;
background-image: url("images/fond/contenu.jpg");
min-height : 412px;
}

#pied
{
width: 992px;
height: 47px;
background-image: url("images/fond/bas.jpg");
}

#texte_corps
{
margin-left: 146px;
font-family: Comic Sans MS,verdana, arial, sans-serif;
text-align:center;

}

#gauche
{
width: 146px;
float: left;
}

#menuvertical
{
width: 146px;
height: 237px;
}

#camille
{
width: 146px;
height: 152px;
background-image: url("images/fond/camille.jpg");
}

Qu!ch3

11 juillet 2006 à 10:56:43

Oki mirci pour ton aide.
Mais j'ai réussi hier soir, en fait fallais que je fasse un div qui comprend toutes les pages du header, et sa marche.

Par contre, je vois pas ce que tu as changé ?
et *{margin: 0; padding: 0} sa veut dire quoi ?

atly

11 juillet 2006 à 12:36:34

Ah, sacré Strucky.
Je savais bien qu'il le mettait à chaque fois qu'il en avait l'occasion

Ca permet d'annuler toutes les marges (intérieures et extérieures) de tous les éléments ; tu évites donc les marges prédéfinies par les styles intégrés des navigateurs.

strucky

11 juillet 2006 à 12:49:28

Bah oui

Je procède toujours comme ça, et de plus, ça évite d'avoir à le spécifier sur chaques balises.