[HTML/CSS] comptatibilité Firefox

comptatibilité Firefox [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 26-11-2006 à 19:50:26    

Bonjour  :hello: ,
 
Mon site est complétement incomptatible avec Firefirox. Voici l'url : http://monelevage.ifrance.com/tw/
 
Ma page est construite avec un include pour les menus qui sont placés dans des div de type float:

Code :
  1. #menu_left
  2. {
  3.    float: left;
  4.    width: 200px;
  5. }
  7. #menu_right
  8. {
  9.    float: right;
  10.    width: 200px;
  11. }


 
Ensuite chaque menu est constitué de div succesifs contenant les images de fond du menu comme ceci :

Code :
  1. .menu_haut
  2. {
  3.    background-image: url("img/menu_haut.gif" );
  4.    width: 200px;
  5.    height: 42px;
  6.    background-repeat: no-repeat;
  7. }
  9. .menu_haut p
  10. {
  11. text-align: center;
  12. margin-top: 14px;
  13. margin-bottom: 0px;
  14. color: white;
  15. font-size: 20px;
  16. }
  18. .menu_debut_st
  19. {
  20.    background-image: url("img/menu_debut_st.gif" );
  21.    width: 200px;
  22.    height: 48px;
  23.    background-repeat: no-repeat;
  24.    margin-top: -1px;
  25. }
  27. .menu_debut_st p
  28. {
  29. text-align: right;
  30. margin-top: 10px;
  31. color: green;
  32. }
  34. .menu_milieu
  35. {
  36.    background-image: url("img/menu_milieu.gif" );
  37.    width: 200px;
  38. }
  40. .menu_milieu p
  41. {
  42.    color: red;
  43.    text-align: center;
  44. }
  46. .menu_fin_st
  47. {
  48.    background-image: url("img/menu_fin_st.gif" );
  49.    width: 200px;
  50.    height: 10px;
  51.    background-repeat: no-repeat;
  52. }
  54. .menu_bas
  55. {
  56.    background-image: url("img/menu_bas.gif" );
  57.    width: 200px;
  58.    height: 29px;
  59.    margin-top: -1px;
  60. }


 
 
 
J'aimerai savoir en gros comment je dois adapter le code pour le rendre comptatible avec Firefox.
 
Merci d'avance de vos réponses.  :hello:


Message édité par hugoOo le 26-11-2006 à 19:56:57

---------------
http://over-templates.c.la
Reply

Marsh Posté le 26-11-2006 à 19:50:26   

Reply

Marsh Posté le 26-11-2006 à 19:53:38    

Code :
  1. <html>
  2.   <head>
  3.     <title>
  4.     </title>
  5.     <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
  6.   </head>
  7.   <body>
  8.     <div id="menu_left">
  9.       <div class="menu_haut">
  10.         <p> Menu
  11.         </p>
  12.       </div>
  13.       <div class="menu_debut_st">
  14.         <p>
  15.         </p>
  16.       </div>
  17.       <div class="menu_milieu">
  18.         <p>
  19.           <a href="index.php">Accueil</a><br />
  20.           <a href="news.php">News</a><br />
  21.           <a href="inscription_joueurs.php">Inscription</a><br />
  22.           <a href="contact.php">Contact</a><br />
  23.         </p>
  24.       </div>
  25.       <div class="menu_fin_st">
  26.       </div>
  27.       <div class="menu_debut_st">
  28.         <p> Teams
  29.         </p>
  30.       </div>
  31.       <div class="menu_milieu">
  32.         <p>
  33.           <a href="team_search.php">rechercher une team</a><br />
  34.           <a href="team_build.php">créer une team</a><br /> alliances de serveurs
  35.           <br/>
  36.           supprimer une team<br />
  37.         </p>
  38.       </div>
  39.       <div class="menu_fin_st">
  40.       </div>
  41.       <div class="menu_debut_st">
  42.         <p> Joueurs
  43.         </p>
  44.       </div>
  45.       <div class="menu_milieu">
  46.         <p>
  47.           nouveau joueur<br />
  48.           rechercher un joueur<br />
  49.           recruter un joueur<br />
  50.         </p>
  51.       </div>
  52.       <div class="menu_fin_st">
  53.       </div>
  54.       <div class="menu_bas">
  55.       </div>
  56.       <div class="menu_haut">
  57.         <p> Statistiques
  58.         </p>
  59.       </div>
  60.       <div class="menu_debut_st">
  61.         <p>
  62.         </p>
  63.       </div>
  64.       <div class="menu_milieu">
  65.         <p>
  66.           joueurs inscrits : 2<br />
  67.           teams inscrites : 1<br /> matchs joués : 2
  68.         </p>
  69.       </div>
  70.       <div class="menu_fin_st">
  71.       </div>
  72.       <div class="menu_bas">
  73.       </div>
  74.       <div class="menu_haut">
  75.         <p> Partenaires
  76.         </p>
  77.       </div>
  78.       <div class="menu_debut_st">
  79.         <p>
  80.           <a href="redirect.php?message=Pour devenir partenaire, envoyer nous un mail&url=contact.php">devenir partenaire</a>
  81.         </p>
  82.       </div>
  83.       <div class="menu_milieu">
  84.         <p> aucun partenaires actuellement
  85.         </p>
  86.       </div>
  87.       <div class="menu_fin_st">
  88.       </div>
  89.       <div class="menu_bas">
  90.       </div>
  91.     </div>
  92.     <div id="menu_right">
  93.       <div class="menu_haut">
  94.         <p> Connection
  95.         </p>
  96.       </div>
  97.       <div class="menu_debut_st">
  98.         <p>
  99.           <a href="inscription_joueurs.php">Pas encore inscrit ?</a>
  100.         </p>
  101.       </div>
  102.       <div class="menu_milieu">
  103.         <p>
  104.           <form method="post" action="login.php"> Pseudo :
  105.             <input type="text" class="text" name="pseudo" size="12" /><br /> Mot de passe :
  106.             <input type="password" class="password" name="mdp" size="12" /><br />
  107.             <input type="submit" class="submit" value="Se connecter" />
  108.           </form>
  109.         </p>
  110.       </div>
  111.       <div class="menu_fin_st">
  112.       </div>
  113.       <div class="menu_bas">
  114.       </div>
  115.       <div class="menu_haut">
  116.         <p> Classements
  117.         </p>
  118.       </div>
  119.       <div class="menu_debut_st">
  120.         <p> Top 10 Counter Strike
  121.         </p>
  122.       </div>
  123.       <div class="menu_milieu">
  124.         <p>
  125.           <img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
  126.           ahAHah ()<br />
  127.           <img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
  128.           Fortress Team ()<br />
  129.           <img src="img/logo_cs.gif" alt="logo cs" title="logo cs" />
  130.           lol is the team ()<br />
  131.         </p>
  132.       </div>
  133.       <div class="menu_fin_st">
  134.       </div>
  135.       <div class="menu_debut_st">
  136.         <p> Top 10 Counter Strike Source
  137.         </p>
  138.       </div>
  139.       <div class="menu_milieu">
  140.         <p>
  141.           <img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
  142.           nawakk ()<br />
  143.           <img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
  144.           ahAHah ()<br />
  145.           <img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
  146.           piou piou ()<br />
  147.           <img src="img/logo_css.gif" alt="logo cs" title="logo cs" />
  148.           lala ()<br />
  149.         </p>
  150.       </div>
  151.       <div class="menu_fin_st">
  152.       </div>
  153.       <div class="menu_debut_st">
  154.         <p> Top 10 Day Of Defeat
  155.         </p>
  156.       </div>
  157.       <div class="menu_milieu">
  158.         <p>
  159.           <img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
  160.           plop ()<br />
  161.           <img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
  162.           010203 ()<br />
  163.           <img src="img/logo_dod.gif" alt="logo cs" title="logo cs" />
  164.           ahAHah ()<br />
  165.         </p>
  166.       </div>
  167.       <div class="menu_fin_st">
  168.       </div>
  169.       <div class="menu_debut_st">
  170.         <p> Top 10 Day Of Defeat Source
  171.         </p>
  172.       </div>
  173.       <div class="menu_milieu">
  174.         <p>
  175.           <img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
  176.           kiki ()<br />
  177.           <img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
  178.           gniakgniak ()<br />
  179.           <img src="img/logo_dods.gif" alt="logo cs" title="logo cs" />
  180.           ahAHah ()<br />
  181.         </p>
  182.       </div>
  183.       <div class="menu_fin_st">
  184.       </div>
  185.       <div class="menu_debut_st">
  186.         <p> Top 10 Battlefield 2
  187.         </p>
  188.       </div>
  189.       <div class="menu_milieu">
  190.         <p>
  191.           <img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
  192.           plopplop ()<br />
  193.           <img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
  194.           kyoto ()<br />
  195.           <img src="img/logo_b2.jpg" alt="logo cs" title="logo cs" height="20" width="20" />
  196.           ahAHah ()<br />
  197.         </p>
  198.       </div>
  199.       <div class="menu_fin_st">
  200.       </div>
  201.       <div class="menu_bas">
  202.       </div>
  203.       <div class="menu_haut">
  204.         <p> Statistiques
  205.         </p>
  206.       </div>
  207.       <div class="menu_debut_st">
  208.         <p> Top 10 Counter Strike
  209.         </p>
  210.       </div>
  211.       <div class="menu_milieu">
  212.         <p>
  213.           Team aAa<br />
  214.           Team bBb<br />
  215.           Team cCc<br />
  216.           Team dDd<br /> Team eEe
  217.         </p>
  218.       </div>
  219.       <div class="menu_fin_st">
  220.       </div>
  221.       <div class="menu_debut_st">
  222.         <p> Top 10 Day Of Defeat
  223.         </p>
  224.       </div>
  225.       <div class="menu_milieu">
  226.         <p>
  227.           lo lo lo lo lo lo lo lo<br />
  228.           lol lol olo <br /> lo lo lo lo lo lo
  229.           <br/>
  230.           lol olo lo lo<br /> lo lo lo lo lo lo
  231.         </p>
  232.       </div>
  233.       <div class="menu_fin_st">
  234.       </div>
  235.       <div class="menu_bas">
  236.       </div>
  237.     </div>
  238.     <div id="corps">
  239.       <div class="block_haut"> Bienvenue sur Teams & Wars
  240.       </div>
  241.       <div class="block_milieu"> Ce site a été créer dans le but de permettre aux joueurs de Counter Strike, Counter Strike Source, Day Of Defeat, Day Of Defeat Source et Battlefield 2 de se rencontrer et de former des teams qui s'affronteront lors de matchs. Aprés chaque match, le résultat sera enregistré et permettra de faire un classement des meilleurs joueurs et des meilleures teams pour chaque jeu. Maintenant, vous ne pourrez plus dire que c'est difficile de trouver un joueur, une team ou un match. Grâce à un système de points vous pourrez optimiser vos matchs en jouant contre des teams de même niveau.
  242.       </div>
  243.       <div class="block_bas">
  244.       </div><br />
  245.       <div class="block_haut"> News
  246.       </div>
  247.       <div class="block_milieu">
  248.         <div class="news">
  249.           <b>lucas</b> par
  250.           <i>hugoOoo</i>
  251.           le 13/12/1901<br />
  252.           lucas est parmis nous<br />
  253.         </div>
  254.         <div class="news">
  255.           <b>test</b> par
  256.           <i>2Dpix</i>
  257.           le 13/12/1901<br />
  258.           plopman est parmi nous!<br />
  259.         </div>
  260.         <div class="news">
  261.           <b>no one</b> par
  262.           <i>2Dpix</i>
  263.           le 01/03/1970<br />
  264.           sldhskj h sqjkdf ksjdhf lksdjf skdhf sjdhf kjsdhf kjsdh fjsdh fkjsdh fjsdhfjsdhjsd hjsdh jsdh jsdhkjsdfhksjd fhksjdfh skjdfh skjdfh skdjh  fj sdfh jsdf hsdf hsdf hjsdf hjsdf hjsdfh fdsh dfsh dsfh ksdfkhsdfh sdfhdsfh ksdfhdsfhkdsfjkdsfkdfskjdsfkjdsfkjdsfhkdsfkdsfkdsfkdsfkdsfkdsfk dsfk dsf hdsfkdsfkdsf<br />
  265.         </div>
  266.         <div class="news">
  267.           <b>no one</b> par
  268.           <i>2Dpix</i>
  269.           le 01/03/1970<br />
  270.           sldhskj h sqjkdf ksjdhf lksdjf skdhf sjdhf kjsdhf kjsdh fjsdh fkjsdh fjsdhfjsdhjsd hjsdh jsdh jsdhkjsdfhksjd fhksjdfh skjdfh skjdfh skdjh  fj sdfh jsdf hsdf hsdf hjsdf hjsdf hjsdfh fdsh dfsh dsfh ksdfkhsdfh sdfhdsfh ksdfhdsfhkdsfjkdsfkdfskjdsfkjdsfkjdsfhkdsfkdsfkdsfkdsfkdsfkdsfk dsfk dsf hdsfkdsfkdsf<br />
  271.         </div>
  272.         <div class="align-right">
  273.           <a href="news.php">suite ...</a>
  274.         </div>
  275.       </div>
  276.       <div class="block_bas">
  277.       </div>
  278.     </div>
  279. <script type="text/javascript" src="http://js-perso.ifrance.com/weborama.js"></script>
  280.   </body>
  281. </html>


Voilà pour le code ;)
c'est l'equivalent html du fichier php.
(je l'aide)


Message édité par kwaio le 26-11-2006 à 19:54:20
Reply

Marsh Posté le 26-11-2006 à 20:13:25    

essaye un peut de mettre "position: absolute;" dans les classe de tes divsion menu etc...

Reply

Marsh Posté le 26-11-2006 à 20:21:27    

(il peut pas le faire pr le moment)
J'ai essayé, j'me retrouve avec un gros paquet de trucs en haut de la page, bref, marche pas.
 
T'as cerné ce qu'est le probleme xxrscaxx ?

Reply

Marsh Posté le 26-11-2006 à 20:33:14    

en mettant position: aboslute dans les id menu_right et menu_left, la propriété float s'annule et les deux menus se recouvrent!!


---------------
http://over-templates.c.la
Reply

Marsh Posté le 26-11-2006 à 21:03:37    

Bon, vu que ma première tantative d'explication n'était pas assez claire à mon gout lol, je vais essayer d'etre plus clair et plus simple lol. Lorsque tu donne une position absolue à une boite (en l'occurence ta division "<div class="menu_haut">" par exemple), elle se retire du flux de ta page, c'est a dire qu'elle n'influence en rien les élément se trouvant autour d'elle. (par exemple, si tu a une boite à sa droite, cette dernière ne risque pas de changer de taille ou quoi sous l'influence de la première, elle reste comme elle est et la première va la recouvrir en partie, ou se mettre en dessou). Grace a ce procédé, tu pourra donner une taille à ta boite (grace a "width" et "heigth" ), ainsi que la positioner exactement ou tu le veux (grace à "left", "top", "right", "bottom", "margin" et ses déclinaisons, et ptete d'autre qui me sont inconnue lol). A savoir, et c'est un point important, ta boite (ou div si tu pref) se positionne par rapport à son conteneur.
 
ex: dans ton cas, ta division avec le classe menu_haut (<div class="menu_haut"> ) est contenue dans la division avec l'id menu left (<div id="menu_left"> ). Cette dernière (<div id="menu_left"> ) est le conteneur de menu_haut.
Donc si tu donne une valeur "position: absolute" a menu haut, et que tu lui met "left: 50px", il va venir se place à 50px de menu left...  
 
Voila j'espère que j'ai été clair cette fois ci...
 
Je ne sais pas si c'est juste je ne suis qu'un modeste amateur donc si c'est faux que quelqu'un me corrige...de plus j'espère que j'ai été clair lol...
 

Citation :

en mettant position: aboslute dans les id menu_right et menu_left, la propriété float s'annule et les deux menus se recouvrent!!


 
ce n'est pas dans les id menu_right et menu_left qu'il faut mettre, mais dans les classe menu_haut etc...


Message édité par xxrscaxx le 26-11-2006 à 22:25:04
Reply

Marsh Posté le 26-11-2006 à 22:08:13    

moi ça dépassse mes capacités là...
Je prefere un simple tableau mais comme c'est aps conseillé...

Reply

Marsh Posté le 26-11-2006 à 23:10:52    

En essayant sur le site que je suis en train de faire, je me rend compte que ce que je croyai etre juste ne l'est pas totalement lol, si quelqu'un de plus competant que moi pouvai venir corriger mes dires se serai sympa...
Moi le prob est que j'ai le body, puis une division wrapper, puis ds celle-ci ma division menu, et que je donne une position absolute a menu et left=0px; il va se coller au body et non au wrapper qui est sont conteneur le plus proche pourtant...

Reply

Marsh Posté le 27-11-2006 à 18:36:32    

chouette se monde d'inforùatique

Reply

Marsh Posté le 27-11-2006 à 20:00:41    

jvai essayer de faire ta technique même si j'avais commencer a mettre en place avec des margin-top: -x px; et que ça commencait à marcher


---------------
http://over-templates.c.la
Reply

Marsh Posté le 27-11-2006 à 20:00:41   

Reply

Marsh Posté le 27-11-2006 à 20:05:52    

Waaaaaaaa [:johneh] [:johneh] [:johneh] [:johneh] [:johneh]
 
LE CODE HTML §§§§§ WOUUUUUUUUUUUUUUUUUU
 
:D :D
 
Tu devrais consulter, tu souffres de divite fortement aigüe à un stade très avancé. Je te donne 2 mois à vivre...
 
 
Y'a strictement rien de sémantique là-dedans ! C'est quoi les titres ? C'est quoi les listes ? Y'a 50 000 paragraphes qui ne sont pas des paragraphes, des divs et des trucs au lieu de hx et de ul !

Message cité 1 fois
Reply

Marsh Posté le 27-11-2006 à 20:55:25    

Moi j'ai eu le code comme ça.
J'suis d'accord, ya trop de div...
 
Qqun m'explique ou ets le probleme d'un grand tableau sans marges ni border ?

Reply

Marsh Posté le 28-11-2006 à 15:08:43    

FlorentG a écrit :

Waaaaaaaa [:johneh] [:johneh] [:johneh] [:johneh] [:johneh]
 
LE CODE HTML §§§§§ WOUUUUUUUUUUUUUUUUUU
 
:D :D
 
Tu devrais consulter, tu souffres de divite fortement aigüe à un stade très avancé. Je te donne 2 mois à vivre...
 
 
Y'a strictement rien de sémantique là-dedans ! C'est quoi les titres ? C'est quoi les listes ? Y'a 50 000 paragraphes qui ne sont pas des paragraphes, des divs et des trucs au lieu de hx et de ul !


 
+1  [:sinclaire]
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed