Se connecter / S'enregistrer

Résolu Probleme d'affichage sous Mozilla et sous IE

Solutions (9)
Tags :
  • Google Chrome
  • mozilla
  • Php
  • Programmation
|
BOnjour j'ai un immense probleme :
Sous IE


Sous Mozilla :( 




Que dois je faire pour que ça s'affiche correctement sur Mozilla ? Et ne parlons pas de Google Chrome ou C'est une page blanche -_- ! Merci

Voici le code html :

Citation :
<html>
<head>
<link rel="stylesheet" media="all" href="css.css" />

</head>
<body>
<center><div id="conteneur"></center>
<div id="header"></div>

<div id="menu">

<div id="menu_left"></div>



<div id="menu_liens">
| <a href="index.php">Index du Site</a> |
<a href="Mairie.php">Mairie</a> |
<a href="Eglise.php">Eglise</a> |
<a href="Divers.php">Divers</a> |
<a href="Contact.php">Contact</a> |
</div>
<br>
<br>

<center><H2>Quelques petits trucs :</H2></center>

<ul class="cercle">
<H5>
<li>Tocqueville est une commune française, située dans le département de l'Eure et la région Haute-Normandie.</li><br>
<li>Les habitants sont les tocquevillais</li>
</H5>
</ul>
<br/>
<br/>

<center><H2>Géographie :</H2></center>
<ul class="carre">
<H5>
<li>Latitude : 49°24'32" Nord</li>
<li>Longitude : 0°36'37" Est</li>
<li>Altitude : 65 m (mini) - 134 m (maxi)</li>
<li>Superficie : 2,48 km²</li>
<li>Population : 141 (2006)</li>
<li>Votants : 98</li>
<li>Densité : 52 hab/km²</li>
</H5<
</ul>


</div>
</body>
</html>


Voici le code css :

Citation :
body
{
font-family: "Trebuchet MS", Verdana, sans serif;
color: black;
font-size: 12px;
}
#conteneur
{
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
padding-bottom: 1px;
background-color:#ffffff;
margin: auto;
padding-left: 1px;
width: 800px;
padding-right:1 px;
border-top: #000000 1px solid;
border-right: #000000 1px solid;
padding-top: 1px;
}
#header
{
BACKGROUND-IMAGE: url(tocqueville.jpg);
WIDTH: 800px;
FLOAT: right;
HEIGHT: 221px
}

#menu
{

PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 800px;
PADDING-RIGHT: 0px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 29px;
PADDING-TOP: 0px
}
#menu_left
{

WIDTH: 59px;
BACKGROUND-REPEAT: no-repeat;
FLOAT: left;
HEIGHT: 29px;
MARGIN-LEFT: 17%
}
ul
{
text-align:center;
}


#menu_liens
{
LINE-HEIGHT: 29px;
FLOAT: center;
COLOR: #000000;
MARGIN-LEFT: 28px
}
H2
{
BORDER-BOTTOM: #ffffff 1px dotted;
TEXT-ALIGN: center;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
BACKGROUND:#e0e0e0 no-repeat left 50%;
COLOR: #000000;
FONT-SIZE: 14px;
BORDER-TOP: #ffffff 1px dotted;
PADDING-TOP: 10px
}

H5
{
MARGIN: 0px;
COLOR: #000000;
TEXT-ALIGN: center;
}
Contenus similaires
Meilleure solution
partage
|
Salut,

Bonne année a toi aussi...

1) menu à gauche

Ton menu est déjà a gauche, maintenant a toi de voir quel mise en page que tu souhaite pour ton site, si tu veux que ton menu soit vraiment isolé a gauche ou si tu veux qu'il soit aligné avec ta bannière, la 2éme mise en page est meilleur (pour moi...), d'ailleurs c'est ce que j'ai utilisé pour mon site : Exemple.

Donc pour ton menu il suffit de paramétrer des dimensions :

  1. #menu_left
  2. {
  3. margin-right:...px; /* espace à droite du menu séparant ton menu au conteneur */
  4. width:...px; /* largeur de ton menu */
  5. height:auto;
  6. }


=======================

2) formulaire PHP

ETAPE 1 :

Tu as plusieurs possibilité je vais t'en donné une, en occurrence une des plus simple :

  1. <form method="??" action="cible.php" >


Déjà ici tu choisis la méthode de poste que tu souhaites :
?? = post
ou
?? = get

Pour plus d'information je te retourne vers ce tutoriel : ici.


ETAPE 2 :

Ensuite une fois que l'utilisateur envoie le formulaire il y a une page de traitement qui vérifie ce que tu as demandé (il va pas le faire tous seul :D  ), dans mon exemple c'est la page : cible.php.

Je te donne une des solution possible :
  1. <?php
  2. if (isset($_POST['nom']) AND isset($_POST['prenom']) AND isset($_POST['email']) ) // Si les variables existent
  3. {
  4. if ( $_POST['nom'] != NULL AND $_POST['prenom'] != NULL AND $_POST['email'] != NULL ) // Si on a quelque chose à enregistrer
  5. {
  6. // D'abord, on se connecte à MySQL
  7. mysql_connect(adresse, nom, motdepasse);
  8. mysql_select_db(database);
  9.  
  10. // sécurité : si une personne entre par exemple : <div style="color:red"> , ça va afficher ce code mais il ne mettra pas son texte en rouge
  11. // pourquoi sécurité car on peux te hacker comme ça
  12.  
  13. $nom= mysql_real_escape_string(htmlspecialchars($_POST['nom']));
  14. $prenom= mysql_real_escape_string(htmlspecialchars($_POST['prenom']));
  15. $email= mysql_real_escape_string(htmlspecialchars($_POST['email']));
  16.  
  17.  
  18. // Ensuite on enregistre le message
  19. mysql_query("INSERT INTO `nom_de_ta_table` ( `id` , `nom`, `prenom` , `pseudo`)
  20. VALUES(''','$nom', 'prenom', '$email')");
  21.  
  22.  
  23. // On se déconnecte de MySQL
  24. mysql_close();
  25.  
  26. ?>


Ce code fais :

SI tous les champs du formulaire sont remplis
=> SI il ne sont pas nul
==>On enregistre les valeurs des champs dans la table

Le plus dur est fait, maintenant pour prévenir l'utilisateur qu'il y a une erreur tu ajoutes des messages d'information :

  1. <?php
  2. if (isset($_POST['nom']) AND isset($_POST['prenom']) AND isset($_POST['email']) ) // Si les variables existent
  3. {
  4. if ( $_POST['nom'] != NULL AND $_POST['prenom'] != NULL AND $_POST['email'] != NULL ) // Si on a quelque chose à enregistrer
  5. {
  6. // D'abord, on se connecte à MySQL
  7. mysql_connect(adresse, nom, motdepasse);
  8. mysql_select_db(database);
  9.  
  10. // sécurité : si une personne entre par exemple : <div style="color:red"> , ça va afficher ce code mais il ne mettra pas son texte en rouge
  11. // pourquoi sécurité car on peux te hacker comme ça
  12.  
  13. $nom= mysql_real_escape_string(htmlspecialchars($_POST['nom']));
  14. $prenom= mysql_real_escape_string(htmlspecialchars($_POST['prenom']));
  15. $email= mysql_real_escape_string(htmlspecialchars($_POST['email']));
  16.  
  17.  
  18. // Ensuite on enregistre le message
  19. mysql_query("INSERT INTO `nom_de_ta_table` ( `id` , `nom`, `prenom` , `pseudo`)
  20. VALUES(''','$nom', 'prenom', '$email')");
  21.  
  22.  
  23. // On se déconnecte de MySQL
  24. mysql_close();
  25.  
  26. echo"Votre formulaire a bien étais envoyé";
  27.  
  28. }
  29. else
  30. {
  31. echo"Une erreur est survenu";
  32. }
  33. }
  34. ?>


Ensuite tu peux l'améliorer par exemple, tu peux mettre plusieurs erreur :

Le champs prénom est vide!
Le champs nom est vide!
Le champs email est vide!


ETAPE 3:

Pour afficher les valeurs de ta table sur une page php :

  1. <?php
  2. // D'abord, on se connecte à MySQL
  3. mysql_connect(adresse, nom, motdepasse);
  4. mysql_select_db(database);
  5.  
  6. /* La boucle d'affichage du formulaire*/
  7. $reponse = mysql_query ("SELECT * FROM nom_de_ta_table ORDER BY id DESC " ) or die(mysql_error());
  8. while ($donnees = mysql_fetch_array($reponse)) {
  9. ?>
  10.  
  11.  
  12. <p>
  13. Nom :<?php echo $donnees['nom']; ?> <br />
  14. Prenom :<?php echo $donnees['prenom']; ?> <br />
  15. Email :<?php echo $donnees['email']; ?> <br />
  16. </p>
  17. <br />
  18.  
  19. <?php
  20. }
  21. mysql_close(); // Déconnexion de MySQL
  22. ?>



  1. $reponse = mysql_query ("SELECT * FROM nom_de_ta_table ORDER BY id DESC " ) or die(mysql_error());


Ici tu choisis ce que tu veux faire, dans cette exemple il affichera tous ce qui se trouve dans ta table par ordre id décroissant (du dernier posté au premier).

ETAPE 4 : PAUSE café , bon courage...



  • Commenter cette solution |
Score
0
òh
òi
|
:bounce: 

Merci bcp j'ai trouvé :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
A les installer c'est à dire?
Car soit tu installes le logiciel wamp pour créer ton "serveur" mysql local ou tu as un hébergeur web et dans ce cas là ils ton donné un lien internet.

Lien: Tutoriel wamp
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci bcp mais pour la relier a une table pour l'instant je n'ai pas my SQL ni php my admin j'arrive pas a les installer ><

Biz
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut,

Bonne année a toi aussi...

1) menu à gauche

Ton menu est déjà à gauche, maintenant à toi de voir quel mise en page que tu souhaite pour ton site, si tu veux que ton menu soit vraiment isoler à gauche ou si tu veux qu'il soit aligné avec ta bannière, la 2éme mise en page est meilleur (pour moi...), d'ailleurs c'est ce que j'ai utilisé pour mon site : Exemple.

Donc pour ton menu il suffit de paramétrer des dimensions :

  1. #menu_left
  2. {
  3. margin-right:...px; /* espace à droite du menu séparant ton menu au conteneur */
  4. }


=======================

2) formulaire PHP

ETAPE 1 :

Tu as plusieurs possibilité je vais t'en donné une, en occurrence une des plus simple :

  1. <form method="??" action="cible.php" >


Déjà ici tu choisis la méthode de poste que tu souhaites :
?? = post
ou
?? = get

Pour plus d'information je te retourne vers ce tutoriel : ici.


ETAPE 2 :

Ensuite une fois que l'utilisateur envoie le formulaire il y a une page de traitement qui vérifie ce que tu as demandé (il va pas le faire tous seul :D  ), dans mon exemple c'est la page : cible.php.

Je te donne une des solution possible :
  1. <?php
  2. if (isset($_POST['nom']) AND isset($_POST['prenom']) AND isset($_POST['email']) ) // Si les variables existent
  3. {
  4. if ( $_POST['nom'] != NULL AND $_POST['prenom'] != NULL AND $_POST['email'] != NULL ) // Si on a quelque chose à enregistrer
  5. {
  6. // D'abord, on se connecte à MySQL
  7. mysql_connect(adresse, nom, motdepasse);
  8. mysql_select_db(database);
  9.  
  10. // sécurité : si une personne entre par exemple : <div style="color:red"> , ça va afficher ce code mais il ne mettra pas son texte en rouge
  11. // pourquoi sécurité car on peux te hacker comme ça
  12.  
  13. $nom= mysql_real_escape_string(htmlspecialchars($_POST['nom']));
  14. $prenom= mysql_real_escape_string(htmlspecialchars($_POST['prenom']));
  15. $prenom= mysql_real_escape_string(htmlspecialchars($_POST['prenom']));
  16.  
  17.  
  18. // Ensuite on enregistre le message
  19. mysql_query("INSERT INTO `matchgamerz` ( `id` , `idmatch`, `pseudo` , `jours` , `mois` , `annee` , `noma` , `type` , `typejeux`, `mapg` , `scoreg`, `scorea`, `mapa`, `score2g`, `score2a`,`gjoueur1`,`gjoueur2`,`gjoueur3`,`gjoueur4`,`gjoueur5`,`ajoueur1`,`ajoueur2`,`ajoueur3`,`ajoueur4`,`ajoueur5` ,`round1`,`round2`,`round3`,`round4`)
  20. VALUES('','$idmatch','$pseudo', '$jours', '$mois', '$annee','$noma','$type','$typejeux','$mapg','$scoreg','$scorea','$mapa','$score2g','$score2a','$gjoueur1','$gjoueur2','$gjoueur3','$gjoueur4','$gjoueur4','$ajoueur1','$ajoueur2','$ajoueur3','$ajoueur4','$ajoueur5','$round1','$round2','$round3','$round4')");
  21.  
  22.  
  23. // On se déconnecte de MySQL
  24. mysql_close();
  25.  
  26. ?>
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci beaucoup,

Je suposse que tu travaille dans le milieu moi je suis en plein apprentissage en BTS - Informatique de Gestion Et donc je m'entraine a faire des sites pour me perfectionner !!

Bon Sinon Voila mon formulaire et donc j'ai deux question ^^ :




Pour le Menu Left comment je fais pour le ramener tout a gauche ?

Et la sinon, J'espere que tu pourras m'aider car il faudrait que les informations mise dans le formulaire soit ramener dans une table donc j'ai creer ma table sous php admin :

Alors je sais qu'il faut que je fasse une page envoi avec du php pour que les informations soit ramener dans la table mais je sais pas le codage et pour cause notre prof est tombé malade on ne l'a pas eu donc faut se debrouiller seul -_- mais c'est bien gentil je n'y arrive -_-

J'espere que je suis pas trop saoulant avec mes questions en tout tes réponses me sont d'une aide précieuse Merci beaucoup ^^


Code html actuel :

Citation :
<html>
<center>
<head>
<link rel="stylesheet" media="all" href="css.css" />

</head>
<body>

<div id="header"></div>

<div id="menu">
<div id="menu_liens">
<a href="index.php">Index du Site</a> |
<a href="Mairie.php">Mairie</a> |
<a href="Eglise.php">Eglise</a> |
<a href="Divers.php">Divers</a> |
<a href="Contact.php">Contact</a> |
<div id="menu_left"><a href="index.php">MEnu LEft</a></div>


</div>
<br>
<div id="conteneur">

<form method="post" action="envoi.php">
<h4>Nom :<input type="text" name="Nom" value=""></h4>
<h4>Prenom :<input type="text" name="Prénom" value=""></h4>
<h4>Email :<input type="text" name="email" value=""></h4>
<input type="reset" value=" Effacer "> <input type="submit" value=" Envoyer ">
</form>

</div>
<div id="bas_de_page">copyright</div>
</body>
</center>
</html>



Code Css actuel :

Citation :
body
{
font-family: "Trebuchet MS", Verdana, sans serif;
color: black;
font-size: 12px;
margin:auto;
}
#conteneur
{
background-color:#ffffff;
margin: auto;
width: 800px;
border: #000000 1px solid;
padding: 1px;
}
#header
{
BACKGROUND-IMAGE: url(tocqueville.jpg);
WIDTH: 800px;
float:center;
HEIGHT: 221px
}

#menu
{
PADDING: 0px;
MARGIN: 0px;
WIDTH: 800px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 29px;
}
#menu_left
{

WIDTH: 59px;
BACKGROUND-REPEAT: no-repeat;
FLOAT: left;
HEIGHT: 0px;
MARGIN-LEFT: 0%
}
ul
{
text-align:center;
}


#menu_liens
{
LINE-HEIGHT: 29px;
COLOR: #000000;
margin:auto
}

#menu_liens a /* ici je met la balise "a" puisque ton menu est constitué de lien sinon je mettrai "p" */
{
font-family: "comic sans MS", Verdana, sans serif;
color: red;
font-size: 14px;
}
#menu_liens a:hover /* action lors du passage de la souris */
{
text-decoration:underline;
COLOR: #000000;
}
H2
{
BORDER-BOTTOM: #ffffff 1px dotted;
TEXT-ALIGN: center;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
BACKGROUND:#e0e0e0 no-repeat left 50%;
COLOR: #000000;
FONT-SIZE: 14px;
BORDER-TOP: #ffffff 1px dotted;
PADDING-TOP: 10px
}

H5
{
MARGIN: 0px;
COLOR: #000000;
TEXT-ALIGN: center;
font-size: 12px;
}
H4
{
MARGIN: 0px;
COLOR: #000000;
}

#bas_de_page
{
background-color:#ffffff;
margin: auto;
width: 800px;
border: #000000 1px solid;
padding: 1px;
}




A u passage Bonne année 2010 :bounce:  :bounce: 
  • Commenter cette réponse |
Score
0
òh
òi
|
1) Ton menu_liens non centré :

  1. #menu_liens
  2. {
  3. LINE-HEIGHT: 29px;
  4. FLOAT: center; /* margin:auto; */
  5. COLOR: #000000;
  6. MARGIN-LEFT: 28px /* A supprimer*/
  7. }


2) Ton conteneur :

  1. <body>
  2. <center><div id="conteneur"></center>
  3. <div id="header"></div>
  4.  
  5. <div id="menu">
  6.  
  7. <div id="menu_left"></div>


Il faut respecter l'ordre des choses :

HEADER
MENU
MENU LIENS
MENU LEFT
CONTENEUR

  1. <div id="global"> /* pas obligatoire mais très utile, il englobe tous tes blocs*/
  2.  
  3. <div id="header">rien ici</div>
  4.  
  5. <div id="menu">
  6.  
  7. <div id="menu_liens">tes liens</div>
  8. <div id="menu_left">tes liens</div>
  9.  
  10. </div>
  11.  
  12. <div id="conteneur">ton texte/images...</div>
  13.  
  14. <div id="bas_de_page">copyright</div>
  15.  
  16. </div>


3) Forme menu_liens :

  1. body
  2. {
  3. font-family: "Trebuchet MS", Verdana, sans serif;
  4. color: black;
  5. font-size: 12px;
  6. }
  7.  
  8. #menu_liens
  9. {
  10. LINE-HEIGHT: 29px;
  11. FLOAT: center;
  12. COLOR: #000000;
  13. MARGIN-LEFT: 28px
  14. }


Si tu veux différencier les écritures, déjà au lieu de créer la police dans body, créer une balise : <p> </p> , et prend l'habitude quand tu écris de mettre ces balises.

  1. p
  2. {
  3. font-family: "Trebuchet MS", Verdana, sans serif;
  4. color: black;
  5. font-size: 12px;
  6. }


Pour modifier l'écriture que de ton menu_liens :

  1. #menu_liens
  2. {
  3. LINE-HEIGHT: 29px;
  4. FLOAT: center;
  5. COLOR: #000000;
  6. MARGIN-LEFT: 28px
  7. }
  8. #menu_liens a /* ici je met la balise "a" puisque ton menu est constitué de lien sinon je mettrai "p" */
  9. {
  10. font-family: "comic sans MS", Verdana, sans serif;
  11. color: red;
  12. font-size: 14px;
  13. }
  14. #menu_liens a:hover /* action lors du passage de la souris */
  15. {
  16. text-decoration:underline;
  17. }
  • Commenter cette réponse |
Score
0
òh
òi
|
Coucou, Merci bcp pour ta reponse,

Mais il reside encore un probleme meme si sous Mozilla ça ressemble plus a ce que je cherche,



Pour les ecritures sous Mozilla paraissent plus petite aussi --'
Et aussi je n'arrive pas a mettre en forme mon menu c'est a dire ecrire en plus gras, mettre une ecriture genre comic sans MS, ...

Et maintenant mon menu n'est plus vraiment au centre :whistle: 


Merci par avance,
Michoo27
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut,

Voici ton erreur :

  1. #header
  2. {
  3. BACKGROUND-IMAGE: url(tocqueville.jpg);
  4. WIDTH: 800px;
  5. FLOAT: right; /* ERREUR */
  6. HEIGHT: 221px
  7. }


Supprime cette ligne et remplace la par :

  1. position:center;


Le "float:right" te permet de faire flotter ton image à droite, le "position:center" te permet de centrer ton header (je pense que c'est ce que tu veux).


===================================
Quelques remarque pour améliorer ta page CSS
===================================

  1. #menu_liens
  2. {
  3. LINE-HEIGHT: 29px;
  4. FLOAT: center; /* Mauvais choix */
  5. COLOR: #000000;
  6. MARGIN-LEFT: 28px
  7. }

Ici je te conseille d'utiliser : "margin:auto", le float est intéressant pour créer des menu gauche et droite sur les côté enfin de mettre au centre ton conteneur.
Si tu veux tous centrer ajoute a ta page css :

  1. body
  2. {
  3. font-family: "Trebuchet MS", Verdana, sans serif;
  4. color: black;
  5. font-size: 12px;
  6. margin:auto; /* Ça t'évite de te répéter dans tes id ou class */
  7. }


=======================================

  1. #menu
  2. {
  3.  
  4. PADDING-BOTTOM: 0px; /* répéter */
  5. MARGIN: 0px;
  6. PADDING-LEFT: 0px; /* répéter */
  7. WIDTH: 800px;
  8. PADDING-RIGHT: 0px; /* répéter */
  9. BACKGROUND-REPEAT: no-repeat;
  10. HEIGHT: 29px;
  11. PADDING-TOP: 0px /* répéter */
  12. }


Ici au lieu de répéter 4 fois la chose mais tous simplement :

  1. padding:0px;


Tu la bien fais pour "margin" , tu n'as pas mis : margin-top; margin-bottom etc...
Donc ici :

  1. #conteneur
  2. {
  3. border-bottom: #000000 1px solid; /* répéter */
  4. border-left: #000000 1px solid; /* répéter */
  5. padding-bottom: 1px; /* répéter */
  6. background-color:#ffffff;
  7. margin: auto;
  8. padding-left: 1px; /* répéter */
  9. width: 800px;
  10. padding-right:1 px; /* répéter */
  11. border-top: #000000 1px solid; /* répéter */
  12. border-right: #000000 1px solid; /* répéter */
  13. padding-top: 1px; /* répéter */
  14. }


Tu supprime tous et tu mets :

  1. #conteneur
  2. {
  3.  
  4. background-color:#ffffff;
  5. margin: auto;
  6. width: 800px;
  7. border: #000000 1px solid; /* plus court non... */
  8. padding: 1px; /* plus court non... */
  9. }


Tu auras le même résultat.
On utilise les commandes bordure/ gauche;droite;haut;bas pour changer la forme de chaque coter (ex: mettre le haut et bas en jaune, gauche et droite en noir) , mais si c'est le même ça ne sert a rien.


Bon courage pour la suite, si ta d'autre question n'hésite pas.
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS