ie versus FF & Chrome

12 juil. 2011, 10:43

Bonjour
Je ne suis pas sûr d'être dans le bon forum... si c'est le cas, désolé, et merci de me dire où je pourrai poster mon problème !

Voilà, j'ai un code html classique : une toolbar horizontale avec un menu qui se déroule au passage de la souris.
Tout fonctionne bien sur FF, Chrome et Safari
<div id="menu">
<ul>
<li class="case1"><a href="#">accueil</li>
<li><a href="#">Coaching carrière</li>
<li><a href="#">Conférences</li>
<ul>
<li><a href="discours.php">Savoir parler de soi</a></li>
<li><a href="reseaux.php">Développer vos réseaux</a></li>
<li><a href="milieu.php">Expertise du milieu</a></li>
</ul>
</li>
</ul>
</div>

Avec bien évidemment un fichier .css appelé.
Lorsque ce bout de code est inclus dans la page, tout fonctionne sur tous les navigateurs, IE inclus. Ce qui me laisse croire que mon code est bon.
Lorsque je mets ce bout de code dans un fichier .php ("toolbar.php") que j'appelle par un include ('toolbar.php') ça marche sur tous les navigateurs sauf IE.

Avez-vous une idée ? Je tiens absolument à ce fichier toolbar.php, puisque ce "bout de code" ci-dessus risque d'évoluer et je ne voudrais pas avoir à mettre à jour toutes les pages...

Merci à vous !

12 juil. 2011, 11:47

Le PHP ne fait que générer du HTML, donc c'est pas lui le problème c'est plutôt comment tu l'intègres dans ton fichier PHP.

12 juil. 2011, 12:21

Merci pour ta réponse !

Dans mon fichier php j'ai :

<div id="menu">
<ul>
<li class="case1"><a href="#">accueil</li>
<li><a href="#">Coaching carrière</li>
<li><a href="#">Conférences</li>
<ul>
<li><a href="discours.php">Savoir parler de soi</a></li>
<li><a href="reseaux.php">Développer vos réseaux</a></li>
<li><a href="milieu.php">Expertise du milieu</a></li>
</ul>
</li>
</ul>
</div>

et rien d'autre
J'ai nommé ce fichier "toolbar.php".
Ce n'est pas suffisant ?

12 juil. 2011, 13:08

Si tu n'as rien d'autre cela n'a aucune incidence.
Ton problème doit venir d'ailleurs et pas de ce bout de code.

12 juil. 2011, 13:15

En fait c'est ce que je pensais.
Mais quand je fais la manip de remettre ce bout de code directement dans ma page ça fonctionne, et dès que je le sors en l'appelant dans un fichier php, ça ne fonctionne plus. Ma toolbar s'affiche nickel, mais lorsque je survole les liens, mes sousmenus ne s'affichent pas.
Peut-être alors un truc à modifier dans mon css ?

12 juil. 2011, 21:14

un <ul> dans un <ul> je doute que se soit correct de même qu'il y a un <li> de fermer alors qu'il n'est ouvert nul part

<div id="menu">
<ul>
<li class="case1"><a href="#">accueil</li><!--- balise <a> non fermer --->
<li><a href="#">Coaching carri&egrave;re</li><!--- balise <a> non fermer --->
<li><a href="#">Conf&eacute;rences</li><!--- balise <a> non fermer --->
<ul>
<li><a href="discours.php">Savoir parler de soi</a></li>
<li><a href="reseaux.php">D&eacute;velopper vos r&eacute;seaux</a></li>
<li><a href="milieu.php">Expertise du milieu</a></li>
</ul>
</li><!--- ou est l'ouverture de cette fermeture de balise <li>? --->
</ul>
</div>

13 juil. 2011, 04:00

Oui, tu peux imbriquer des UL mais ils doivent etre dans les LI. Et IE est très intolérant vis à vis des fautes de fermetures précoces ou oubliées. C'est peut-être, au fond, sa seule qualité lorsque l'on développeur car il met le doigt sur des erreurs HTML.

13 juil. 2011, 15:23

re-Hello devlop78 et hello hakazizi !
En fait je n'avais pas mis tout le code histoire de ne pas vous enquiquiner et résultat, il est resté un </li> en trop.
Pour info, je me suis inspiré de ce code là
http://css.mammouthland.net/menu_horizo ... ulant.html

Pour être sur de mon coup, je viens de refaire le test en prenant exactement ce code là et je l'ai mis en ligne.
Parce que c'est vrai qu'en modifiant un code, on peut faire des petites erreurs fatales par-ci par-là. Surtout moi

J'ai créé 3 fichiers (en faisant des "copier-collé" strict du code sur la page html précédemment citées, histoire de m'assurer de ne pas faire de fausse manip):

1 / test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
<title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css">


<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>


<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<body>
<? include ('contenuTest.php') ?>

<h1>CSS : Menu horizontal déroulant</h1>

<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel nunc. Duis luctus facilisis dolor. Pellentesque malesuada, velit ac tempor imperdiet, nisi nisl convallis leo, eget tincidunt neque lacus vel erat. Fusce eget tortor a ante tincidunt condimentum. Pellentesque risus. Quisque auctor. Donec sagittis porta lacus. Donec varius, erat in accumsan dapibus, ligula tortor fermentum lectus, laoreet porttitor urna dui ut neque. Fusce lectus. Phasellus laoreet placerat ipsum. Aliquam pharetra, nisi et rhoncus iaculis, massa tellus consectetuer lectus, quis tincidunt est diam commodo ipsum. Aliquam erat volutpat.</p>
<div style="text-align:center; clear:both; margin-top:10px;">

<hr />
<p>Retour au tutoriel « <a href="http://css.mammouthland.net/menu-horizo ... .php">Menu horizontal déroulant en CSS</a> »</p>
<p><a href="http://css.mammouthland.net/">CSS Débutant</a> - <a href="http://www.mammouthland.net/">Mammouthland</a></p>
</div>
</body>
</html>

2 / test.css

#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}

3 / et enfin contenuTest.php qui est appelé par un include dans la page test.php

<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>

<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

Conclusion :
Ca marche sur FF et par sur IE

vous pouvez voir ça ici : http://www.pagescomediens.com/menu/test.php
A moins que je n'ai encore fait un truc qui fallait pas... mais bon, là, si c'est le cas, je revends mon ordi.

13 juil. 2011, 23:19

Code : Tout sélectionner

#menu ul li ul {
    display: none;
    position: absolute;
    z-index: 1000;
}

Ligne ~27

ça devrait t'aider

++

14 juil. 2011, 00:37

Super merci je vais essayer ça !

ie versus FF & Chrome

Qui est en ligne