Sujet Précédent Sujet Suivant

Menu en css

Fermé
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 16 mai 2007 à 10:50
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 - 8 juin 2007 à 21:15
Bonjour,

Mon test: http://section6.jeux.free.fr/fichiers/abibois/affiche%20thesaurus.php.htm

J'ai un soucis avec un menu, j'essaye de le faire en css. Sous firefox j'obtiens à peu près le résultat voulu, mais sous IE le menu ne bouge pas.

-> Donc ma première question: Comment adapter le menu à IE?

Ensuite le menu en lui même n'est vraiment pas pratique du tout, apres un bref parcours, vous pourrez vous en rendre compte par vous même.

-> Ma deuxième question: Comment le rendre plus pratique?

Vous allez peut-être me dire d'utiliser le javascript, mais l'utilisation du css est plus simple à mon goût, en effet en quelques lignes c'est fait et c'est adaptable, étant donné que le contenu de mon "menu" est généré dynamiquement via une base de donnée (pas dans cet exemple bien sur).

Je vais continuer à chercher de mon côté.

Merci pour les éventuelles réponses. :)
A voir également:

20 réponses

Réponse 1 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
16 mai 2007 à 12:41
coucou
J'ai refais ton indentation parce que ça me convenait pas.
De plus il me faut te rappeler que tu ne peux pas utiliser plusiuers fois le même id dans un même document. Utilise class pour ça. 
<html><head>

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="affiche%20thesaurus.php_fichiers/design.css"></head><body>

<div class="present">
<a href="http://127.0.0.1/abibois/crea%20thesaurus.php">
Renseigner le thésaurus</a>
</div>

<ul id="menu">
  <li>Agencement interieur
    <ul>
      <li>Plafond
        <ul>
          <li>Plafond acoustique</li>
        </ul>
      </li>
      <li>Revetement de sols
        <ul>
          <li>Finition pour parquet
            <ul>
              <li>Mastic</li>
              <li>Vernis</li>
              <li>Vitrificateur</li>
            </ul>
          </li>
          <li>Parquet
            <ul>
              <li>Lame contrecolle</li>
              <li>Lame massive</li>
              <li>Lamelle a plat</li>
              <li>Lamelle sur chant</li>
              <li>Panneau contrecolle</li>
              <li>Panneau en bois massif</li>
              <li>Parquet démontable</li>
              <li>Parquet en bois debout</li>
              <li>Parquet mosaïque</li>
              <li>Parquet pour sol sportif</li>
            </ul>
          </li>
          <li>Plancher bois</li>
          <li>Revetement de sols stratifie</li>
        </ul>
      </li>
      <li>Revetement muraux
        <ul>
          <li>Boiserie
            <ul>
              <li>Moulure</li>
              <li>Plinthe</li>
            </ul>
          </li>
          <li>Lambris bois massif
            <ul>
              <li>Lambris naturel brosse</li>
              <li>Lambris naturel brut de sciage</li>
              <li>Lambris naturel traite thermiquement</li>
              <li>Lambris naturel vernis</li>
              <li>Lambris peint brosse</li>
              <li>Lambris peint brut de sciage</li>
              <li>Lambris peint vernis</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

</body></html>

Et pour le css ben j'ai repris le mien après avoir fait du ménage : 
.present {
text-align:center;
}
/****************menu css*****************/
#menu {
top:95px;
position:fixed;
font-size:14px;
font-weight:300;
line-height: 1.4em;
left:3px;

}
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
/*width : /*13em;*//*11em; /*largeur menu inutile car nav li width fait pareil*/
}
#menu li { /* all list items */
position : relative;
line-height : 1.7em;/* 1.25em;*//*hauteur des cellules*/
margin-bottom : -3px;/*espace entre les cellules, à -1 c'est bon avec firefox mais IE est con et il faut bien ça*/
width: 13em;/*11.05em;/*largeur menus*/

display:block;
border : 1px solid #06f;	
cursor: crosshair;
text-align:left;/*position du texte*/
padding-left:2px;/*position du texte*/
}
#menu li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 13em;/*11.05em;/*marge gauche du second menu*/
margin-top : -1.8em;/*remonte les sous menus par rapport au precedent*/
}
#menu li ul ul { /* third-and-above-level lists */
left: -999em;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

Bon le css est pas très propre dsl.
Tu peux voir ce que ça donne sur mon site :
http://cqgclub.dyndns.org
Tu trouvera le code de base ici :
https://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
Seulement cela ne marche pas avec IE de merde sans javascript, et ça deconne tout court avec firefox 1.
Le javascript : 
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

J'espère que ça t'ira ;)
0
Réponse 2 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
16 mai 2007 à 14:37
Bein, tout d'abord merci pour ta réponse.

Sous firefox 2, le rendu est "parfait" dans le sens ou c'est quelque chose de la forme là que je voulais obtenir.

Par contre je n'ai pas réussi à intégrer ton code js dans ma page :/

http://section6.jeux.free.fr/fichiers/abibois/2/affiche%20thesaurus2.php.htm
(exemple en css)
0
Réponse 3 / 20
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 mai 2007 à 15:07
salut,

pour ton menu et en utilisant que css il y a moyen d'y arriver.
regarde cet exemple, la mise en page n'est pas faite il ne s'agit que de tester le comportement. il est valide xhtml, css et fonctionne sous FF 2, IE 7, Opera 9.

cette version ne fonctionne pas sous IE6 (merci à nanti pour le test !!!)
mais il doit y avoir moyen d'arriver à une version globale.

il faut sans doute utiliser <a> pour l'interactivité plutôt que <li>, j'essayerais peu être plus tard mais je n'ai plus IE6…
0
Réponse 4 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
16 mai 2007 à 15:10
Cet exemple ne fonctionne pas sous IE6.

Merci quand même ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
16 mai 2007 à 16:22
http://127.0.0.1/abibois/affiche%20thesaurus2.php

Bon et bien j'ai avancé un peu, sous firefox, ça roule, mais sous IE, il y a des problèmes de coordonées des menus imbriqués.

:/

que faire?
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 mai 2007 à 16:26
en premier tu pourrais nous donner l'adresse en ligne plutôt que ton adresse locale…
-;o)
0
Réponse 6 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
16 mai 2007 à 16:28
Oups
mets le javascript dans l'entete avant </head>
Et remplaces :
var sfEls = document.getElementById("nav")
par var sfEls = document.getElementById("menu")
0
Réponse 7 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
16 mai 2007 à 16:29
lol oui je m'en suis rendu compte mais tu as été plus rapide que moi pour répondre ^^

mon ftp est indisponible pour l'instant je vous envoie le lien dès que je peux y accéder :/
0
Réponse 8 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
16 mai 2007 à 16:33
bon je mets ça sur un autre hébergement:

http://s194813892.onlinehome.fr/vrac/abibois/affiche%20thesaurus2.php
0
Réponse 9 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
16 mai 2007 à 17:08
Ba j'ai regardé effectivement avec IE c'est la chiasse.
Et je suis allé faire un tour sur mon site avec IE he ben snif et resnif.
J'ai du boulot, vraiment ce IE à chaque fois il fait ch...
J'ai regardé pour ton problème vite fait et ben je sais pas.
Sers toi du cqgclub ou du menu de base.
0
Réponse 10 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 mai 2007 à 08:59
Merci à toi pour ta participation déjà, tu m'a bien aidé.

Si quelqu'un sait comment avoir le même rendu sous firefox que sous IE je prends :(

http://s194813892.onlinehome.fr/vrac/abibois/affiche%20thesaurus2.php
0
Réponse 11 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 mai 2007 à 17:39
un petit up
0
Réponse 12 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
23 mai 2007 à 10:14
encore un up :/
0
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
24 mai 2007 à 10:41
coucou
Bon j'ai cherché un peu et puis je me suis dit :chier.
Alors j'ai essayé avec le menu de base et même probleme. J'ai pensé que c'etait du soit à un probleme de balise pas fermée mais avec ton indentation j'ai trop du mal, soit un probleme qu'il manqué des a href mais ma tentative avec cela a echoué, j'ai donc vite essayé avec le css du cqgclub et là ça marche. Sauf qu'il y a le fond noir je te laisses trouver pourquoi ;)
http://cqgclub.dyndns.org/test/test.html
Tiens nous au jus ;) bon courage.
0
Réponse 13 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
25 mai 2007 à 09:12
Merci

Le rendu est très interessant, mais sous firefox uniquement, sous IE6 l'affichage pose à nouveau problème :(

que faire pour avoir un affichage propre sous IE (6)?
Je précise encore une fois à ceux qui vont être tentés de me donner un menu JS statique, que les éléments du menu proviennent d'une base de donnée à l'origine.
0
Réponse 14 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
25 mai 2007 à 14:20
Ba je pensais que c'était une balise qui manquait et comme je n'arrivais pas avec ton indentation je l'ai refaite mais c'était tout juste.
Non c'était juste un truc que IE ne comprenait pas :
#nav {background-color:#ooo;} il prenait toute la largeur de la page.
Je lui ai donc dis :
pas bg pour#nav mais pour nav ul et il s'est mis à plus faire le fond d'ecran noir mais plus le faire non plus dans la premiere partie du menu.
fallait lui dire #nav ul, #nav ul b, #nav li b{back....
Ha ce IE...
Bon dis moi si ça va parcequ'avec IE7 ça marche impec.
;)
0
Réponse 15 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
25 mai 2007 à 14:50
J'espère ne pas être totalement idiot, parce que je n'ai pas compris ce que tu as modifié :|

Merci de préciser un chouillat ^^
0
Réponse 16 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
25 mai 2007 à 14:57
mmhh

j'ai récupéré le nouveau css, je regarde les différences et je vous tiens au courant.
0
Réponse 17 / 20
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
25 mai 2007 à 15:06
alors, j'ai mis le nouveau css et le résultat est exactement celui que je cherchais

:)

Merci beaucoup pour ton aide précieuse
(si tu pouvais juste m'éclaircir un peu sur ce que tu as changé, je t'en serais encore plus reconnaissant!)

Merci encore :)
0
Réponse 18 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
25 mai 2007 à 15:50
lol, j'ai essayé de coller à la clareté internet explorer.
j'ai changé ça : 
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
background-color:#003;/*#333333;*/
}

En ça : 
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;

}
#nav ul, #nav ul b,#nav li b{
background-color:#003;/*#333333;*/
}

cqgclub possede 4 coloris, essayes les et chopes celui que tu préfères.
;)
0
Réponse 19 / 20
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
7 juin 2007 à 13:50
Si ça peut aider quelqu'un.
Lorsque j'ai voulu valider le cqgclub auprès du W3C je me suis aperçu que le menu ne passait pas.
En fait il commençait ainsi : 
<ul id="nav">
    <ul>
      <li><h3>OUTILS</h3></li>

il m'a fallu rajouter un li pour avoir ceci : 
<ul id="nav">
<li>
    <ul>
      <li><h3>OUTILS</h3></li>

Le menu était alors valide mais n'apparaissait plus.
j'ai du changer lune partie du css : 
#nav li ul {

en ça : 
#nav ul li ul {

Et voilà
Désormais le menu sur http://cqgclub.dyndns.org est valide W3C.
Ceci n'a malheureusement pas enlevé le bug sous firefox 1.0 qui fait que le menu est invisible.
Le problème d'affichage avec ie6 persiste mais cela est du à la disposition des éléments, celui-ci n'acceptant pas la position:fixed;
Le problème d'affichage avec ie7 qui faisait que parfois des sous menu restaient déroulés si on ne sortait pas par la droite (c'est pas clair?) est résolu.
Bon courage si vous plongez votre nez dans ce code ;)

0
Réponse 20 / 20
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
7 juin 2007 à 15:37
salut,

en cherchant une solution à ton problème j'ai trouvé une solution en css pur sous Gecko toutes version et IE 6 et 7.

la solution consiste à modifier la structure html avec des commentaires conditionnels. au lieu d'imbriquer <ul> dans <ul><li>, tu insères une table avec colonne et cellule entre les deux.

j'ai trouvé cet exemple mais je ne suis pas convaincu car je n'aime pas les hacks et sémantiquement c'est nul.
0
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705
7 juin 2007 à 21:23
Oo
Merci dalida. Il est bien le menu. Le seul problème c'est qu'il fonctionne parfaitement en toutes circonstances et que j'ai pas eu ce lien il y 6 mois. snif et youpi en même temps.
Sérieusement c'est vraiment costaud ce qu'ils ont ( ou ce qu'il a) fait.
Impressionnant.
Encore merci dalida et bravo ccsplay
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013
7 juin 2007 à 22:51
je l'ai trouvé dans les débuts de la discussion…
aurais mieux fait de te le filer…
mais pour moi c'est pas une bonne solution donc j'ai pas fait suivre. désolé !

m'enfin c'est quand même cheulou de trouver un <table> au milieu de la liste d'un menu !
les navigateurs texte et braille ils vont se casser les dents sur des trucs pareils ! je préfère un js !

d'ailleurs, le site est valide en css aussi !
0
CH4NCE Messages postés 620 Date d'inscription jeudi 7 décembre 2006 Statut Membre Dernière intervention 8 août 2013 705 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
8 juin 2007 à 21:15
Mouai je comprend ta position. En même temps si on se fait ch... à faire tourner un site sous internet explorer c'est bien parce que l'on veut que le plus de monde possible puisse le consulter.
C'est pour cela que je préfère éviter le javascript au maximum. Je garde celui-ci pour les formulaires ou des trucs de style inutiles.
D'ailleurs, j'ai pas regardé les stats mais il doit y avoir plus d'internautes ayant désactivé le javascript que de navigateurs textes. Enfin c'est quand même casse pied d'avoir à choisir.
Enfin si on prend un peu de recule, on peu décerner le brake-foot award à ie6.
Pour ton lien mieux vaut tard que jamais, je vais d'ailleurs l'exploiter sur un autre site la semaine prochaine donc c'est bien cool.
A+ ;)
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses