Souci d'affichage sur IE et sur mozilla

Résolu
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   -  
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je viens ici car, la renommé de ce site m'est venu au oreilles, j'ai un souci d'affichage pour mon site internet.

J'ai fais mon site sur notpad++ et bien entendu avec google chrome HORS, quand je test avec IE ou mozilla PAF!! j'ai un de mes menus qui se place pas au bon endroit sachant que dans IE et mozzila ce menu s'affiche au même endroit.

Si vous avez une solution pour que je puisse régler ce problème je suis preneur.

Il s'agis seulement du menu rapide (soit le menu du haut)
Je ne peux pas mettre le lien de mon site car, il est encore en localhost.
L'hébergement avec nom de domaine est fais, reste plus qu'à attendre qu'il soit en ligne (sous 48H, je mettrais le lien ici pour que vous voyez mon souci plus précisément à moins que vous ayez une solution à mon problème).

Je vous remercie par avance pour vos solutions possible.
A voir également:

21 réponses

Rodolphe_ Messages postés 1498 Date d'inscription   Statut Membre Dernière intervention   285
 
Pour centrer un div il faut lui appliquer en css margin: 0 auto;
et de pas de text-align ou autre float bizarroïde.
1
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
up, une solution ?
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
up, personne peut m'aider ?
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
slt

sans code tu veux que l'on fasse quoi ?
0

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

Posez votre question
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
Ah vi mince ^^

voila le code html :

<center><nav id="menu1">
<a href=""></a> |
<a href=""></a> |
<a href=""></a> |
<a href=""></a> |
<a href=""></a> |
<a href=""></a>
</nav></center>

Voila code CSS :

#menu1
{
border: 6px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-top: 12px;
width: 650px;
margin-top: 30px;
float: center;
margin-top: 10px;
clear: both;
background-color: grey; opacity: 0.7;
color: #6ed065
}

Voila la partie qui me fait défaut sur IE et mozilla mais pas sur google chrome.
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
slt

c'est quoi le problème exact, sur chrome, ie et ff j'ai ça:
http://astuces72.free.fr/photoforum/Capture.JPG
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
bin justement, tu as du voir que j'ai centré le menu mai ston affichage est différent que le mien car, sur mon IE le menu s'affiche un peu plus bas.

Moi je veux qu'il soit centré.

Mais le souci n'est pas sur chrome mais sur FF et IE ;)
Sur chrom l'affichage est nikel vue que je l'ai fais avec lui le site.
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
par ordre de test
chrome
ie
ff
http://astuces72.free.fr/photoforum/Capture2.JPG

je n'arrive pas a comprendre
tu parle de la hauteur des liens dans ton cadre ?
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
en faite, se serais plus facile si mon site été déjà dispo en ligne mais il ne l'ai pas encore sa fais pas 48H d'après ce que le support technique me dis fin bref.

Je vais faire mieux, je vais faire la structure et te dire ce qu'il ne va pas.

Voila c'est plus claire comme ça ? http://nsa32.casimages.com/img/2012/11/13/121113023841369289.png
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
dis moi si tu comprend pas, je pourrais te mettre l'image des 3 navigateurs que tu puisse comparer ;)
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
arf

ah ba c'est plus pareil !!!
il faut ton code entier et pas que ce morceau.

au passage, ton site, il est comment dire...coloré :D
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
vi ^^ très coloré
heu par contre, mon code entie?? juste le code CSS ??
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
juste le code ne donnera rien, il faut voir la structure de tes div
en privé si tu veux :)
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
pour te donner une idée sous FF :
http://nsa31.casimages.com/img/2012/11/13/121113024351631329.png

sous IE :
http://nsa32.casimages.com/img/2012/11/13/12111302462449421.png
0
tryan44 Messages postés 1288 Date d'inscription   Statut Membre Dernière intervention   220
 
Salut,

float: center; 

Je ne crois pas que ce style css existe ...
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
Ah mais oui, il existe pas ce style tu aurais une solution pour que je modifie le code pour avoir ce j'attend ?
0
tryan44 Messages postés 1288 Date d'inscription   Statut Membre Dernière intervention   220
 
Déjà <center> c'est merdique, il faut utiliser
<div style="text-align:center;"></div>
Jouer avec les éléments "margin" et "padding" et peut être "position". Comme on ne connait pas la structure votre site (html/css) il est difficile de donner une réponse précise.
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
float:left;

si c'est que ça je suis mauvais, bien joué tryan :)
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
j'ai retiré le float: center; et maintenant sa m'affiche pareil sur les 3 navigateurs sauf que mon affichage est comme ça

http://nsa31.casimages.com/img/2012/11/13/121113024351631329.png

Il existe pas un style pour qu'il soit comme ça http://nsa32.casimages.com/img/2012/11/13/121113023841369289.png

sur tous les navigateurs ?
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
.................

edit:

ah non zut, tu veux le contraire :)

envoi ton code en mp
0
Ika Pro Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   4
 
Je t'envoie le code css et html ici du menu seulement, si tu veux plus, dis moi et je t'enverrais en mp.

CODE HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Pokemon Forever : "Jeux en ligne"</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" /><META NAME="Author" LANG="fr" CONTENT="David Gascoin">
<META NAME="Publisher" CONTENT="">
<META NAME="Reply-to" CONTENT="">
<META NAME="Description" CONTENT="Vous souhaitez jouer à pokemon sur votre pc ? Vous êtes au bon endroit, vous trouverez emulateur, rom, et même un JEUX EN LIGNE par navigateur.">
<META NAME="Keywords" CONTENT="pokemon, pikachu, ligne, jeux, rom, emulateur, forever, online">
<META NAME="Indentifier-URL" CONTENT="http://www.pokemon-forever-online.com/">
</head>
<body>
<center><nav id="menu1">
<a href="index.php">Accueil</a> |
<a href="">Pokemon Forever</a> |
<a href="emulateur.php">Emulateurs</a> |
<a href="jeuxDS.php">Jeux DS</a> |
<a href="jeuxGBAC.php">Jeux GBA</a> |
<a href="NIN64.php">Jeux Nintendo 64</a>
</nav></center>
</body>
</html>

//CODE CSS: //

html
{
height: 100%
}
body
{
background-color: grey; /* le fond de la page en couleur*/
background-image: url("images/fond.png"); /* le fond de la page en image*/
background-repeat: repeat;
color: blue;
height: 100%;
}
footer
{
clear: left;
width: 1140px;
padding: 10px;
color: #f6e07b;
background-color: #a21200; opacity: 0.7;
text-align: justify;
border: 6px blue groove;
border-radius: 5px;
margin: 20px auto;
margin-top: 20px;
text-align: center;
}
h1
{
color: red;
font-size: 40px;
font-family: "comic sans ms","time new roman",arial,serif;
text-decoration: blink;
text-decoration: underline;
text-align: justify; /*right = droit, center = centré */
}
#cen
{
color: #000000;
font-size: 30px;
font-family: "comic sans ms","time new roman",arial,serif;
margin-top: 350px;
margin-right: 250px;
}
#cen2
{
color: #000000;
font-size: 30px;
font-family: "comic sans ms","time new roman",arial,serif;
margin-top: 350px;
margin-right: 150px;
}
header
{
color: blue;
text-align: center;
font-size: 40px;
font-family: "comic sans ms","time new roman",arial,serif;
text-decoration: blink;
text-decoration: underline;
}
h2
{
color: #000000;
font-size: 30px;
font-family: "comic sans ms","time new roman",arial,serif;
}
p
{
color: black;
font-size: 14px;
font-family: "comic sans ms","time new roman",arial,serif;
background-color: black;
color: white;
opacity: 0.7;
text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */
}
mark /*Mettre un mot en valeur grâce à cette balise en surlignement
et une couleur différente */
{
background-color: #ff2822;
color: blue;
border: 2px blue groove;
}
nav
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 150px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
margin-top: 20px;
float: left;
font-family: "comic sans ms","time new roman",arial,serif;
}
#menu1
{
border: 6px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-top: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 650px;
margin-top: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
margin-top: 10px;
clear: both;
background-color: grey; opacity: 0.7;
color: #6ed065
}
#menu2
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 150px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
margin-top: 10px;
clear: both;
float: top;
background-color: grey; opacity: 0.7;
color: #6ed065
}
#menu3
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 150px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
float: top;
margin-top: 10px;
clear: both;
background-color: grey; opacity: 0.7;
color: #6ed065
}
#menu4
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 150px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
float: left;
margin-top: 20px;
clear: both;
background-color: grey; opacity: 0.7;
color: #6ed065
}
}
a /* liens par défaut (non survolé) */
{
}
a:hover /* apparence des liens survolé */
/*hover peut être utilisé pour le texte aussi */
{
text-decoration: underline;
color: green;
}
a:active /* couleur au moment du clique*/
{
background-color: pink;
}
a:focus /*quand le lien est selectionné */
{
background-color: orange;
}
section
{
margin-left: 230px;
margin-top: 20px;
border: 4px red groove;
box-shadow: 6px 6px 10px blue inset;
width: 1000px;
text-align: center;
border-radius: 10px;
float: center;
}
#visiteur
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 180px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
float: right;
margin-top: 20px;
clear: both;
background-color: grey; opacity: 0.7;
color: #23e6ff;
font-size: 16px;
font-family: "comic sans ms","time new roman",arial,serif;
}
#menu5
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
float: right;
margin-top: 20px;
clear: both;
background-color: grey; opacity: 0.7;
color: #ffff00;
}
#menu6
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
float: right;
margin-top: 20px;
clear: both;
background-color: grey; opacity: 0.7;
color: #6ed065
}
#menu7
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
position: absolute; bottom: 0; right: 0;
margin-top: 20px;
clear: both;
background-color: grey; opacity: 0.7;
color: #ffff00;
}
#JUKBOX
{
border: 4px blue groove;
border-radius: 10px;
border-top:3px solid blue;
border-bottom: 3px solid blue;
box-shadow: 6px 6px 10px red inset;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
position: absolute; top: 190px; left: 0;
margin-top: 20px;
clear: both;
background-color: grey;
color: #6ed065;
}
#don
{
border-top: 4px blue groove;
border-left: 4px blue groove;
border-right: 4px blue groove;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
margin-top: 20px;
color: #ffff00;
margin-bottom: 20px;
background-color: red; color: black;
}
#corps
{
color: black;
font-size: 20px;
font-family: "comic sans ms","time new roman",arial,serif;
color: white;
text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */
background-color: black; opacity: 0.7; color: white; border-radius: 10px;
}
#corps1
{
border-top: 4px blue groove;
border-left: 4px blue groove;
border-right: 4px blue groove;
padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */
width: 250px;
margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */
margin-top: 20px;
color: #ffff00;
margin-bottom: 20px;
background-color: red; color: black;
float: center;
}
#corps3
{
border: 4px blue groove;
color: black;
width: 1000px;
font-size: 16px;
margin-left: 230px;
box-shadow: 6px 6px 10px red inset;
font-family: "comic sans ms","time new roman",arial,serif;
color: white;
text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */
background-color: black; opacity: 0.7; color: white; border-radius: 10px;
font-style: bold;
}
#jeu
{
margin-left: 30px;
}
0