Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3034 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/CSS] comptatibilité Firefox

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML/CSS] comptatibilité Firefox

n°1481992
hugoOo
laisse pas dépasser ton pixel
Posté le 26-11-2006 à 19:50:26  profilanswer
 

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. }
  6. #menu_right
  7. {
  8.    float: right;
  9.    width: 200px;
  10. }


 
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. }
  8. .menu_haut p
  9. {
  10. text-align: center;
  11. margin-top: 14px;
  12. margin-bottom: 0px;
  13. color: white;
  14. font-size: 20px;
  15. }
  16. .menu_debut_st
  17. {
  18.    background-image: url("img/menu_debut_st.gif" );
  19.    width: 200px;
  20.    height: 48px;
  21.    background-repeat: no-repeat;
  22.    margin-top: -1px;
  23. }
  24. .menu_debut_st p
  25. {
  26. text-align: right;
  27. margin-top: 10px;
  28. color: green;
  29. }
  30. .menu_milieu
  31. {
  32.    background-image: url("img/menu_milieu.gif" );
  33.    width: 200px;
  34. }
  35. .menu_milieu p
  36. {
  37.    color: red;
  38.    text-align: center;
  39. }
  40. .menu_fin_st
  41. {
  42.    background-image: url("img/menu_fin_st.gif" );
  43.    width: 200px;
  44.    height: 10px;
  45.    background-repeat: no-repeat;
  46. }
  47. .menu_bas
  48. {
  49.    background-image: url("img/menu_bas.gif" );
  50.    width: 200px;
  51.    height: 29px;
  52.    margin-top: -1px;
  53. }


 
 
 
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
mood
Publicité
Posté le 26-11-2006 à 19:50:26  profilanswer
 

n°1481994
kwaio
Posté le 26-11-2006 à 19:53:38  profilanswer
 

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
n°1482004
xxrscaxx
Posté le 26-11-2006 à 20:13:25  profilanswer
 

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

n°1482006
kwaio
Posté le 26-11-2006 à 20:21:27  profilanswer
 

(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 ?

n°1482013
hugoOo
laisse pas dépasser ton pixel
Posté le 26-11-2006 à 20:33:14  profilanswer
 

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
n°1482024
xxrscaxx
Posté le 26-11-2006 à 21:03:37  profilanswer
 

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
n°1482037
kwaio
Posté le 26-11-2006 à 22:08:13  profilanswer
 

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

n°1482050
xxrscaxx
Posté le 26-11-2006 à 23:10:52  profilanswer
 

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...

n°1482525
shanya
Posté le 27-11-2006 à 18:36:32  profilanswer
 

chouette se monde d'inforùatique

n°1482566
hugoOo
laisse pas dépasser ton pixel
Posté le 27-11-2006 à 20:00:41  profilanswer
 

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
mood
Publicité
Posté le 27-11-2006 à 20:00:41  profilanswer
 

n°1482571
FlorentG
Unité de Masse
Posté le 27-11-2006 à 20:05:52  profilanswer
 

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 !

n°1482602
kwaio
Posté le 27-11-2006 à 20:55:25  profilanswer
 

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 ?

n°1483069
Shinuza
This is unexecpected
Posté le 28-11-2006 à 15:08:43  profilanswer
 

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]
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/CSS] comptatibilité Firefox

 

Sujets relatifs
debutant en CSS[CSS] Décalage IE/FF pour des float
Afficher le contenu d'un fichier html sur une autre pageprob alignement Firefox/IE
Comment générer un formulaire HTML en PDF[Flash] popup et firefox
Effet thumbnail dans un menu défilant en HTML/CSSLien html sur du flash
Lien html sur du flash 
Plus de sujets relatifs à : [HTML/CSS] comptatibilité Firefox


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR