|
|
|
|
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. :)
Configuration: Windows XP Firefox 2.0.0.3
Coucou
<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 : http://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 ;) c'est dur a faire une signature ;) |
Bein, tout d'abord merci pour ta réponse.
|
Salut,
|
http://127.0.0.1/abibois/affiche%20thesaurus2.php
|
Bon je mets ça sur un autre hébergement:
|
Ba j'ai regardé effectivement avec IE c'est la chiasse.
|
Merci à toi pour ta participation déjà, tu m'a bien aidé.
|
Répondre à ThEBiShOp
|
Merci
|
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.
|
Lol, j'ai essayé de coller à la clareté internet explorer.
#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. ;) c'est dur a faire une signature ;) |
Si ça peut aider quelqu'un.
<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 ;) c'est dur a faire une signature ;) |
Activer menu contextuel winzip Afficher top menu dans template decayed Code css menu sourie Coins de bords arrondis en css Comment faire un menu deroulant vertical en css Comment installer map css Css color transparant Css effet menu couleur Css mode zm sa me mais 1 menu d'arme Enigmes menu extras layton Menu admin css lan Menu caché lg 42 pq 2000 Menu css vertical Menu html css vertical 2 niveaux Modifier menu contextuel Presentation menu en langage c Transformer une liste en menu css Télécharger aimbot css
