28220 sujets

CSS et mise en forme, CSS3

[Résolu]Casse-tête : menu sous firefox

Bonjour tout le monde...
Je me retrouve face à un problème de compatibiltié entre IE et firefox...rien d'exeptionnel vous m direz, mais la, c'est un veritable casse tête (pour moi du moins...) mon problème est le suivant... j'ai piqué mon menu dans la galerie d'alsacreations, je l'ai intégré à mon design par un include PHP. tout va bien sur IE mais sur firefox, les items n'ont pas de taille fixe... j'ai plus ou moins tt essayé mais sans succès...
je n'arrive pas à localiser le problème.. est ce que quelqu'un peut m'aider ? Merci beaucoup !!!

P.S: vous remarquerez que ce n'est pas le seul problème de compatibilité... si vous pensez pouvoir m'aider pour le second ...
Modifié par p_tite_jo (27 Aug 2005 - 18:13)
Bonjour,

je n'ai pas tout vu en détail mais tu as une "id menu" et une "class menu" : il pourrait bien y avoir conflit, et les nommer différemment lèverait le doute !
Le probléme vient de la grandeur de ton texte lorsque ton div apparait.

Si tu mets :

 #menu li a, #menu dt a {
                   color: #000;
                   text-decoration: none;
                   display: block;
                   height: 100%;
                   border: 0 none;
                 [b] font-size:10px;[/b]


Tu vois qu'il n'y a plus qu'un probléme avec la longueur du lien initiation musicale. Smiley cligne
De plus, tu as 2 balises head !!!

Tu n'as pas de Doctype. Alors un conseil, choisi déjà ton doctype après on pourra faire des corrections. Et retire cette balise <head> en trop. Smiley cligne
Modérateur
rebonjour, Smiley smile
pour eviter, des resultat aleatoire ou disparate d'un navigateur a l'autre, tu devrais indiquer un doctype a ta page html, a partir de la tu auras beaucoup plus de faciliter a regler tes differents soucis d'affichage.

par exemple celui de cette page est :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">

ce qui te laisse encore pas mal de liberté ...

a plus

edit:desolé, je n'avais pas vu les reponses precedentes.
Modifié par gcyrillus (27 Aug 2005 - 14:32)
Merci pour ces réponses... malheureusement j'ai bien peur que les remèdes soient pire que le mal... tout d'abord
a écrit :
problème vient de la grandeur de ton texte lorsque ton div apparait.

Si tu mets :

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
font-size:10px;

J'ai rajouter cette ligne à mon code... et ça ne résoud en rien mon problème... le menu n'a toujours pas de taille fixée et en + mnt il n'a plus la même taille de police partout...

ensuite j'ai rajouté un doctype à ma page.. pas grand changement sur firefox, par contre sur IE, c'est le bronx... est ce que j'ai fait qqch pas correctement ?

je vous redonne mes pages modifiées:
la css de mon menu : 


             dl, dt, dd, ul, li {

                   margin: 0;
                   padding: 0;
                   list-style-type: none;
                   font: 100% Veranda, arial, sans-serif;

                  }
             #menu {
                   position: absolute;
                   top: 2 px;
                   left: 20 px;
                   z-index: 1;
                   width: 100%; /* précision pour Opera */
                   }


             #menu dl {
                   float: left;
                   width: 10 em;

                  }
             #menu dt {
                   cursor: pointer;
                   text-align:center;
                   font-weight:bold;
                   background: #ffffff;
                   border: 1px solid black;
                   margin: 1px;

                  }
             #menu dd {
                   display: none;
                   border: 1px solid gray;

                  }
             #menu li {
                   text-align: center;
                   background: #fff;

                  }
             #menu li a, #menu dt a {
                   color: #000;
                   text-decoration: none;
                   display: block;
                   height: 100%;
                   border: 0 none;
                   font-size:10px;
                  }
             #menu li a:hover, #menu dt a:hover {
                  background: #eee;
                 }

             #site {
                    position: absolute;
                    z-index: 1;
                    top : 70px;
                    left : 10px;
                    color: #000;
                    background-color: #ddd;
                    padding: 5px;
                    border: 1px solid gray;
                   }

             .mentions {
                    position: absolute;
                    top : 300px;
                    left : 10px;
                    color: #000;
                    background-color: #E93FBA;
                   }


mon menu: 




      <title>Menu déroulant horizontal</title>

     <link rel="stylesheet" type="text/css" href="../css/menu.css">

      <script type="text/javascript">

              <!--
                  function montre(id) {
                  var d = document.getElementById(id);
                      for (var i = 1; i<=10; i++) {
                           if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
                           }
                           if (d) {d.style.display='block';}
                           }
              //-->

      </script>



<div id="menu">
        <dl>
                <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Actualités</a></dt>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu1');">Présentation</dt>
                        <dd id="smenu1">
                                <ul>
                                        <li><a href="page1.php">Directeur</a></li>
                                        <li><a href="page2.php">Comité</a></li>
                                        <li><a href="#">École</a></li>
                                </ul>
                        </dd>
        </dl>


        <dl>
                <dt onmouseover="javascript:montre('smenu2');"><a href="">Formations</a></dt>
                        <dd id="smenu2">
                                <ul>
                                        <li><a href="#">Initiation musicale / petit choeur</a></li>
                                        <li><a href="#">Instruments à vent</a></li>
                                        <li><a href="#">Tambours / Percussions</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu3');">Médias</dt>
                        <dd id="smenu3">
                                <ul>
                                        <li><a href="#">Photos</a></li>
                                        <li><a href="#">Vidéos</a></li>
                                        <li><a href="#">Extraits</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu4');">Interactif</dt>
                        <dd id="smenu4">
                                <ul>
                                        <li><a href="#">Livre d'or</a></li>
                                        <li><a href="#">Sondages</a></li>
                                        <li><a href="#">Newsletter</a></li>
                                        <li><a href="#">Inscriptions</a></li>
                                        <li><a href="#">Contacts</a></li>
                                </ul>
                        </dd>
        </dl>

        <dl>
                <dt onmouseover="javascript:montre('smenu5');">Liens</dt>
                        <dd id="smenu5">
                                <ul>
                                        <li><a href="#">Ecoles de musique</a></li>
                                        <li><a href="#">Fanfares</a></li>
                                        <li><a href="#">Autres</a></li>
                                </ul>
                        </dd>
        </dl>

</div>

et ma page index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ecole de musique de Rolle et Environs</title>
<link rel="stylesheet" type="text/css" href="../css/config.css"/>
</head>




<body>
                  <div class="tete">
                  </div>

                  <div id="espace_menu">          <?php include "menu.php"; ?>
                  </div>

                  <div class="arrondi">

                       <p>

                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla
                          blablablablablablablablablablablabla

                       </p>
                  </div>
</body>

</html>


D'avance merci pour votre aide !
Modifié par p_tite_jo (27 Aug 2005 - 15:46)
Ecoute c'est simple, si tu n'as pas de doctype cela va poser des problémes. Si avec ton doctype tu as des soucis avec IE c'est que tu as des erreurs dans ton css.

Pour la modif que je t'ai donné, je n'ai pas dis que cela résout ton soucis de menu mais je te prouve qu'il ne reste plus qu'un lien où tu as un probléme de décalage au survol du menu. Smiley cligne

Dans ce cas, tu retires la propriété font-size:10px que je t'ai donné et tu remplaces dans ton css :


#menu dl {
                   float: left;
                   width: 10 em;

                  }


par


#menu dl {
                   float: left;
                   width: 10em;

                  }


Et là ton menu apparait correctement sous firefox. Smiley cligne
Modifié par doomer (27 Aug 2005 - 16:14)
Modérateur
bonjour, j'en etait arriver au même conclusion, cette erreur etait aussi avec le positionnement, par ailleurs en faisant un essai ou 2 j'ai integré le css de ton menu a la feuille de style principale, autrement fais appel a cette feuille (grace a include encore) entre les balises <head> et </head>.
ton css legerement modifié devient: 
/* Edited with EditCSS */
/**** LINK-tag style sheet config.css ****/

              html   {  margin:  0;
                        background-color:  #99CC99;
                        margin:     0;
                        padding:    0;
                        height:     100%;
                        text-align: center;                  /*pr centrer sur IE*/
                        font-family: Comic Sans MS;
                     }

                body {
                        background-image: url("main.gif");
                        margin:    0 auto;
                        width:      1000px;
                        height:     100%;
                        text-align: center;                  /*pr centrer sur IE*/
                        font-family: Comic Sans MS;
                     }

                .tete{
                        background-image: url("tete.gif");
                        width:      1000px;
                        height:     120px;
                        margin:     0 auto;
                  }


         #espace_menu{  position: relative;
                        background-image: url("menu.gif");
                        width:      1000px;
                        height:     32px;
                        margin:     0 auto;
                        z-index: 1;
                  }

             .arrondi{  position: relative;
                        background-image: url("arrondi.gif");
                        background-repeat: no-repeat; /*pr IE*/
                        width:     1000px;
                        height:    309px;
                        margin:     0 auto;
                  }

                    p{
                        position: relative;
                        width: 500px;
                        height: 400px;
                        margin: 0 auto;
                        padding: 100px;
                        font-size: 13px;
                        text-align: center;
                     }

/**** LINK-tag style sheet menu.css ****/


             dl, dt, dd, ul, li {

                   margin: 0;
                   padding: 0;
                   list-style-type: none;
                   font: 100% Veranda, arial, sans-serif;

                  }
             #menu {
                   position: absolute;
                   top: 4px;
                   left: 20px;
                   z-index: 1;

                   }


             #menu dl {
                   float: left;
                   width: 10em;

                  }
             #menu dt {
                   cursor: pointer;
                   text-align:center;
                   font-weight:bold;
                   background: #ffffff;
                   border: 1px solid black;
                   margin: 1px;

                  }
             #menu dd {
                   display: none;
                   border: 1px solid gray;

                  }
             #menu li {
                   text-align: center;
                   background: #fff;

                  }
             #menu li a, #menu dt a {
                   color: #000;
                   text-decoration: none;
                   display: block;
                   height: 100%;
                   border: 0 none;
                  }
             #menu li a:hover, #menu dt a:hover {
                  background: #eee;
                 }

             #site {
                    position: absolute;
                    z-index: 1;
                    top : 70px;
                    left : 10px;
                    color: #000;
                    background-color: #ddd;
                    padding: 5px;
                    border: 1px solid gray;
                   }

             .mentions {
                    position: absolute;
                    top : 300px;
                    left : 10px;
                    color: #000;
                    background-color: #E93FBA;
                   }
et l''entete de ta page un peu plus precise devient:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
  <title>Ecole de musique de Rolle et Environs</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="config.css"/>
<!-- appel tes autres feuilles de styles ici, si tu tiens a morceler ton css -->


        </head>


voila, j'espere que tes soucis commence a s'estomper Smiley smile
a plus
Merci à vous deux... tous mes problèmes sont résolus... Cependant 2 questions persistent la première concerne le doctype. Dois-je le mettre sur chaque page ? et à quoi sert cette balise exactement ?
a écrit :
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>
C'est toujours la même?
Ma deuxième question concerne mon paragrapje sous IE, comment se fait-il que le visiteur ne puisse pas redimensionner la taille de la police ??

Encore merci pour votre précieuse aide... vous avez mis fin à des heures de prises de tête !!

A bientôt
Modérateur
rebonjour,
si tu fixe une taille de polices dans le css, Ie ne sera plus en mesure de la changer, et ff utilisera cette taille par defaut au chargement de la page, ça a l'avantage d'eviter la destruction de tes mise en pages si l'internautes avec IE fixe ses polices d'affichage par defaut a plus petites ou plus grandes .il est interessant aussi de determiner la police d'affichage a l'avance pour tenter de maitriser l'aspect graphique de tes pages.


... oui le doc type doit etre sur toutes les pages et : 
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>
va te permettre d'afficher correctement a l'ecran, les accents sur tes voyelles et les cedilles aux c ... si tu n'est pas avec une configuration de police/clavier français..

a plus
p_tite_jo a écrit :

Merci à vous deux... tous mes problèmes sont résolus... Cependant 2 questions persistent la première concerne le doctype. Dois-je le mettre sur chaque page ?

Oui. Il est obligatoire sur chaque page. Cependant, il peut être différent. Tu peux utiliser un DOCTYPE Strict la majorité du temps, et passer au Transitionnal si nécessaire pour une page en particulier.
p_tite_jo a écrit :

et à quoi sert cette balise exactement ?<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/> C'est toujours la même?

Généralement, les pages sont encodées soit en ISO-8859-1, soit en UTF-8. On parle bien ici de l'encodage dans lequel tu as sauvegardé ton fichier. Ce meta informe donc l'agent utilisateur que la page a été encodée selon la norme ISO-8859-1.

Au passage, il est fortement conseillé de précéder le backslash / d'une espace : 59-1" /> et ce pour tous les éléments vides <br /> <hr /> <link (...) /> <meta (...) /> etc.
En ce qui concerne la taille de la police, le pixel (px) est déconseillé car IE ne sait pas le redimentionner. Il est donc conseillé d'utiliser les valeurs relatives tels le pourcentage (%) ou le em.
gcyrillus a écrit :

il est interessant aussi de determiner la police d'affichage a l'avance pour tenter de maitriser l'aspect graphique de tes pages.

Ah non ! Ici on ne tente pas de maitriser ce genre de détail (taille de la police) Smiley biggol
gcyrillus a écrit :

<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>
va te permettre d'afficher correctement a l'ecran, les accents sur tes voyelles et les cedilles aux c ... si tu n'est pas avec une configuration de police/clavier français..

Il y a confusion ici entre « jeu de caractère » et « encodage des caractères ».

Un début d'explication :
http://tw.apinc.org/weblog/2004/07/09/64-confusion et
http://www.la-grange.net/2002/10/23#entite
Modifié par Stephan (27 Aug 2005 - 18:42)
Modérateur
bonjour stefan,
desolé, pour la confusion,je comprends comment fonctionne en generale les choses mais je suis assez faché avec les termes techniques exactes, ça me joue des tours,

quand aux tailles de polices je lançais une info, qui pouvait lui etre utile, je pensais par exemple au menu horizontale, enlevons la police indiquer et les tailles de polices, alors par defaut les navigateurs utiliseront les leurs, et le beau menu centrer risque de se retrecir ou deborder.
Autrement dit quand je fixe une taille de police dans ma page et sa police de caracteres, c'est bien parceque je veux un texte occupant un certain espace et pas plus ni moins.

par ailleurs, effectivement , les pourcentages et em sont bien gerer par tout les navigateurs (me semble t'il) mais des qu'on insere un " design" a l'aide d'images, ça devient vraiment aleatoires/casse têtes a garder fluide d'une resolution,navigateurs, aux autres, ... ils n'y a pas a mon avis de regles fixe, mais un choix a faire a chaque nouvelle pages sans oublier les recommandations du w3c, bien sur.

ceci dit, je suis loin de tout savoir et si je suis la , c'est pour en savoir plus .. les problemes et solutions que rencontrent les uns et les autres sont une source d'informations et d'experiences que j'estime interessante.
et en plus si je peut aider ...

bon dev, a tous.

edit: il suffit de preciser a body tailles et police de caracteres ,pour que le reste se calle dessus, .... si je ne me trompe pas, .... merci piur les liens interessant Smiley smile
Modifié par gcyrillus (27 Aug 2005 - 18:58)
Sujet clos
Aller à