Sujet Précédent Sujet Suivant

Souci d'affichage sur IE et sur mozilla

Résolu/Fermé
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 - 13 nov. 2012 à 00:02
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 - 13 nov. 2012 à 17:20
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.

21 réponses

  • 1
  • 2
Réponse 1 / 21
Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
13 nov. 2012 à 16:56
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
Réponse 2 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 00:48
up, une solution ?
0
Réponse 3 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 11:51
up, personne peut m'aider ?
0
Réponse 4 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
13 nov. 2012 à 11:54
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
Réponse 5 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:07
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
Réponse 6 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
13 nov. 2012 à 14:17
slt

c'est quoi le problème exact, sur chrome, ie et ff j'ai ça:
http://astuces72.free.fr/photoforum/Capture.JPG
0
Réponse 7 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:20
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
Réponse 8 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
13 nov. 2012 à 14:26
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
Réponse 9 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:39
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
Réponse 10 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:40
dis moi si tu comprend pas, je pourrais te mettre l'image des 3 navigateurs que tu puisse comparer ;)
0
Réponse 11 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
Modifié par astuces72 le 13/11/2012 à 14:43
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
Réponse 12 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:45
vi ^^ très coloré
heu par contre, mon code entie?? juste le code CSS ??
0
Réponse 13 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
13 nov. 2012 à 14:46
juste le code ne donnera rien, il faut voir la structure de tes div
en privé si tu veux :)
0
Réponse 14 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:46
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
Réponse 15 / 21
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
13 nov. 2012 à 14:47
Salut, 

float: center;

Je ne crois pas que ce style css existe ...
0
Réponse 16 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 14:50
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 mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
13 nov. 2012 à 14:58
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
Réponse 17 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
Modifié par astuces72 le 13/11/2012 à 14:56
float:left;

si c'est que ça je suis mauvais, bien joué tryan :)
0
Réponse 18 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
Modifié par Ika Pro le 13/11/2012 à 15:00
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
Réponse 19 / 21
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
Modifié par astuces72 le 13/11/2012 à 15:01
.................

edit:

ah non zut, tu veux le contraire :)

envoi ton code en mp
0
Réponse 20 / 21
Ika Pro Messages postés 149 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 30 octobre 2013 4
13 nov. 2012 à 15:05
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

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

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

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses