Forum d'entraide PHPFrance

Bonjour,

J'ai téléchargé une barre de menu jquery.
Voici le code:

<div id="OAWidget" class="yuimenubar yuimenubarnav">
      <div class="bd">
        <ul class="first-of-type">
          <li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="http://localhost/monsite/index.html">&nbsp;1ère étiquette&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <div id="1ère étiquette" class="yuimenu">
            </div>
          </li>        
          <li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="nompageenattente">2ème étiquette&nbsp;&nbsp;</a>
            <div id="2ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">3ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="nompageenattente">3ème étiquette&nbsp;&nbsp;</a>
            <div id="3ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">3ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="nompageenattente">4ème étiquette&nbsp;&nbsp;</a>
            <div id="4ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">3ème sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">4ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="nompageenattente">5ème étiquette&nbsp;&nbsp;</a>
            <div id="5ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="nompageenattente">6ème étiquette&nbsp;&nbsp;</a>
            <div id="6ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">3ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="nompageenattente">7ème étiquette&nbsp;</a>
            <div id="7ème étiquette" class="yuimenu">
              <div class="bd">
                <ul>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">1ère sous-étiquette</a></li>
                  <li class="yuimenuitem"><a class="yuimenuitemlabel" href="nompageenattente">2ème sous-étiquette</a></li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

Je voudrais ajuster la longueur (à l'horizontal) de mes 7 étiquettes principales
de manière 1) à ce que la longueur de la barre de menu soit identique à celle de la largeur de l'écran,
mais aussi 2) de manière à ce que la longueur de chaque étiquette corresponde à la longueur qui me convient
(un exemple: j'ai mon logo en haut à gauche de la page, et je voudrais que ma première étiquette principale s'arrête
sur la droite au même niveau que là où s'arrête à dorite mon logo, de manière à respecter l'alignement).
J'ai trouvé une solution simple: rajouter des   sur mes étiquettes principales de manière à leur donner la longueur souhaitée.
Mais ça ça marche,... sur Google, Opéra et Safari!!

Mais sur Internet Explorer (10 pour précision) et sur Firefox les ajustements à faire ne sont pas les mêmes!!
Et si je cherche à adapter les tailles pour Internet Explorer ou pour Firefox je retrouverai bien sûr des décalages
sur les quatre autres navigateurs.

Quelqu'un peut m'aider?

Pourquoi ne pas plutôt jouer avec la propriété padding (CSS) sur la class yuimenubaritemlabel ?

Car une seule class est spécifiée pour toutes les étiquettes.
Si dans mon code je cherche:

yuimenubaritemlabel{padding-right:20px;*display:inline-block;}

la propriété padding change à l'identique toutes les étiquettes principales d'un coup,
et non les étiquettes au cas par cas.

Ceci dit, mes soucis, j'en ai deux.

1) comment faire pour mettre une condition
"si l'utilisateur est sur Firefox alors on remplace les valeur par défaut par..."
"si l'utilisateur est sur Internet Explorer alors on remplace pes valeur par défaut par..."
et où mettre la condition dans le code?

2) j'aurais besoin de mesure d'espacement plus précise que &bsp; (html) ou que 1 px
A première vue, choisir une mesure d'espacement plus petite que le pixel me semble impossible
mais je n'arrive pas sinon à avoir une précision dans le choix des longueurs permettant d'avoir
un espacement très propre (trop approximatif).

Tu peux associer plusieurs class à un élément pour apporter de la personnalisation :

<div class="class1 class2">

Sinon pour faire du conditionnel entre navigateur il y a les prefixes il me semble (peut être pas pour toutes...).
Une solution est apportée ici pour Firefox : http://stackoverflow.com/questions/1956 ... efox-field

Merci pour le lien
et pour le tuyau concernant les class!!
J'essaye ça demain.
Je pense pouvoir m'en sortir.

Après, j'ai un dernier petit soucis.
J'ai besoin de faire des espacements
entre mes étiquettes pour une question de propreté.
J'utilise soit   en html, soit un nombre de pixels ...px avec les CSS.
J'essaye de faire une approximation au   près ou au px près
pour m'approcher d'alignement parfaits mais je ne parviens jamais
à un visuel propre (j'ai 1/4 ou 3/4 de pixel en plus ou en moins).
Je n'arrive donc pas à acquérir la propreté souhaitée.
C'est normal? N'y a-t-il pas un moyen de travailler plus en précision?

salut,,

précision au pixel.

Généralement l'alignement ce fait avec des marges (droite et gauche) mais pour cela il faut être sur de que ce tu va avoir comme marge et que tu n'hérite pas de chose (plus ou moins pratique du parent).

Si tes 'li' sont en ligne alors les marges sont la bonne façon de faire (pour moi) sachant que tu ne sais pas forcément ce que cela va donnée suivant les tailles avec des espaces insécable.

de plus tu va pouvoir faciliter le passage à la ligne des listes sur les redimensionnents d'écrans.


@+

Merci pour toutes vos précieuses recommandations.
Au bout du compte j'arrive à tout régler... sauf pour internet explorer.

Vous savez que je dois mettre des valeurs différentes dans mes CSS pour firefox et internet explorer.
J'ai réussi pour firefox.
Ca marche donc sur opera, safari, google et firefox.

Il ne reste plus qu'Internet Explorer (IE 10 en l'occurrence).
J'y arrive aussi mais, à la condition où ça ne marche alors plus ni sur opéra, ni sur safari et ni sur google.
On dirait que ça marche encore sur firefox car des valeurs spécifiques ont été ajoutées pour ce navigateur.

Je ne sais pas si vous pouvez m'aider.
Je peux toujours donner des valeurs spécifiques pour opéra, safari et google mais
je trouve que ça fait un peu fouillis.

tu peux créer une feuille de style propre à IE. Et grâce aux commentaires conditionnels d'IE tu peux alors faire appel à cette feuille de style qui ne sera comprise que par IE.
Cette feuille de style doit être appelée après la feuille standard(compatible firefox, opera...) pour pouvoir écraser les styles(ff,opera...) précédemment définis:

    <link href="css/style-standard.css" rel="stylesheet"> <!-- feuille de style standard -->
<!--[if gte IE 10]> 
    <link href="css/ie.css" rel="stylesheet">  <!-- feuille de style ie 10 et plus -->
 <![endif]-->

Décidément je ne comprends pas

Tu parles bien d'une feuille de style externe dont le chemin d'accès est css/... le nom du fichier est ie et l'extension css?

J'ai d'abord un problème à mon avis avec le bout de code <![endif]--> à la fin.
Mon éditeur écrit <! [endif] en couleur et --> en gris clair comme s'il s'agissait d'un commentaire.
La balise du haut <link href="css/ie.css" rel="stylesheet"> est écrit avec la même couleur que pour <![endif]
Ca c'est louche.

Est-que tu veux dire que parce qu'on met du code spécifique pour Internet Explorer dans une feuille de style externe
ce code n'a du coup plus d'incidence sur les autres navigateurs?
C'est le fait de créer une feuille de style externe pour séparer du reste qui change tout?

Enfin, mettre mon code spécifique à IE entouré de <!-- ... --> rend son contenu grisé tel un commentaire,
et le code fonctionne pour IE mais empêche toujours Google, Opéra et Safari de fonctionner.

Tu parles bien d'une feuille de style externe dont le chemin d'accès est css/... le nom du fichier est ie et l'extension css?

oui. Tu peux attribuer n'importe quel nom ou n'importe quel chemin à la feuille de style.

La balise du haut <link href="css/ie.css" rel="stylesheet"> est écrit avec la même couleur que pour <![endif]
Ca c'est louche.

Est-que tu veux dire que parce qu'on met du code spécifique pour Internet Explorer dans une feuille de style externe
ce code n'a du coup plus d'incidence sur les autres navigateurs?

les autres navigateurs vont interpréter tout ce qui se trouve entre <!--[if gte IE 10]> et <![endif] comme des commentaires alors qu'IE (version à renseigner) est capable d’interpréter ces commentaires conditionnels comme quelque chose de valide.
Les commentaires conditionnels ne seront jamais lus pas les autres navigateurs(autres que IE) qui vont les ignorer.

Encore une fois tu donnes le nom que veux à ta feuille de style compatible IE et qu'importe le chemin

 <!--[if gte IE 10]>
    <link href="nom-de-la-feuille-ie.css" rel="stylesheet">  
 <![endif]-->

pour plus d'infos sur les commentaires conditionnels:commentaires-conditionnels
Autre possibilité: faire recours à js qui va détecter le navigateur et faire appel à la feuille de votre choix

Ca ne marche pas malgré mes nombreuses tentatives

Pour info, mon travail sur les CSS je le fais déjà dans une feuille de style externe (extension.css)
et pour IE 10 je crée donc une feuille de style externe (encore une fois avec une extension .css) à partir de la feuille de style externe.
Les deux feuilles de styles externes étant rangées dans un même répertoire, je n'écris pas de chemin d'accès.
J'écris juste le nom de la feuille.

Tu dis:

les autres navigateurs vont interpréter tout ce qui se trouve entre <!--[if gte IE 10]> et <![endif] comme des commentaires alors qu'IE (version à renseigner) est capable d’interpréter ces commentaires conditionnels comme quelque chose de valide.

Pourtant, quand je laisse le code CSS attribué au navigateur IE 10 et que du coup le problème est résolu pour IE 10, les autres navigateurs ne font pas que lire des commentaires
puisque ça devient le foutoir avec eux.
Et si j'essaye de travailler sur une feuille de style externe c'est IE 10 qui n'arrive plus à lire cette fois.
Mais je ne comprends pas pourquoi le fait de mettre le code sur une feuille de style externe devrait à la fois permettre l'interpétation de IE et empêcher
celle des autres navigateurs.

J'ai essayé de donner de nouvelles précisions en haut de mon message au cas où ça pourrait aider.
Sinon, si c'est trop galère, est-ce que vous pourriez me mettre sur la piste de javascript?
Mais là encore je ne sais pas si on peut écrire du javascript dans une feuille externe css.

Le principe est en fait d'avoir deux feuilles de style :
La première chargée tout le temps qui permet de faire fonctionner le tout sur Firefox, Chrome, ect.
La seconde qui contient uniquement les commandes nécessaires pour le navigateur IE. Et le chargement de ce fichier doit être conditionné par les commentaires précisés plus haut.

Ainsi si tu es sous Firefox, seul le premier css sera chargé.
Si tu es sous IE10 les deux fichiers seront chargés. (le second fichier écrasant certains paramètres du premier)

suis désolé les commentaires conditionnels ne sont plus supportés sur IE10 (cf. site ms ).
toutefois il est possible de charger dynamiquement en JS une feuille de style externe.

<head>
       <link rel="stylesheet"  href="fichier-standard.css" />

<script>

function loadCss( fichierCss){
  var link=document.createElement("link");
  link.setAttribute("rel", "stylesheet");
  link.setAttribute("href", fichierCss );
 
   document.getElementsByTagName("head").item(0).appendChild(link);
}

//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
loadCss("fichier-ie.css") ; //inclusion dynamique du css compatible ie
}
</script>
</head>

si y a problème tu peux tester si IE est bien détecté en affichant une petite alerte:
[javascript]
<script>
//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
alert("ie detecté");
}
</script>
[/javascript]

Tout d'abord un grand merci pour l'aide apportée.

Je continue de travailler à partir de ce que tu m'as donné.

Le code ci-dessous permet effectivement d'être renseigné quant
à savoir quel navigateur est détecté: IE ou un autre.
[javascript]
<script>
//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
alert("ie detecté");
}
</script>[/javascript]


Le code ci-dessous fonctionne aussi :

<link rel="stylesheet"  href="fichier-standard.css" />

Il permet d'aller chercher et de lire la feuille externe:
condition indispensable pour faire fonctionner IE correctement.
Cette feuille lue, IE marche alors correctement.
Le problème, c'est que cette feuille externe est en fait toujours lue, même
quand le navigateur n'est pas IE.
Du coup, ça ne marche alors plus sur chrome, opera et safari.
Même avec le javascript en dessous elle est lue.
Je crois que ça vient du fait que dans le code que tu m'as donné elle se trouve au-dessus
du code javascript, et est lue donc par tous les navigateurs sans condition.
J'essaye donc de restreindre la possibilité de lecture de cette ligne de code
au càs où le navigateur n'est pas IE, c'est-à-à dire de permettre sa lecture que si
le navigateur est IE.
J'essaye donc de l'imbriquer dans
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
...
}
[/javascript]
mais je n'arrive toujours pas à régler mon problème

J'essaye en vain quelque chose comme:
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css";
} else {
}
[/javascript]
Ca ne fonctionne toujours pas

Mais cette toute dernière partie je ne m'y prends sûrement pas très bien.

Pouvez-vous encore m'aider?
Je crois qu'il reste plus qu'à régler un soucis de proposition if
qui renvoit ou non à une page selon une condition.

En fait, s'y j'écris
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
[/javascript]
le script semble non lu.
Il n'est pas coloré par l'éditeur et le code apparaît sur le site.

Il est évident qu'il vaut le baliser ainsi:
[javascript]
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
</script>
[/javascript]
mais alors une page blanche apparaît sur l'écran avec IE
(ça marche avec les autres navigateurs).
J'ai l'impression qu'avec mon code le navigateur entre dans la feuille externe et n'arrive
pas à en sortir.
Si vous pouvez m'aider pour cette portion de code ce serait sympa
car c'est manifestement là que ça pêche.