Alcaline
-
Compteur de contenus
5 -
Inscrit(e) le
-
Dernière visite
Tout ce qui a été posté par Alcaline
-
Problème de liste occultée dans Menu monté en CSS
Alcaline a répondu à Alcaline - Forum : (X)HTML et CSS
jeanpierre949, j'ai mis ul en position: absolute comme tu me l'as dit mais ça ne change rien. Je redonne mon code complet et très allégé pour que ce soit plus facile. Si quelqu'un pouvait regarder de plus près, ce serait super sympa. Voici un lien pour le rendu: ici et voici le source allégé mais complet pour la partie qui m'interresse: <html> <head> <script type="text/javascript"> <!-- window.onload = montre; 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';} } go_visibility = new Array; function PopupCentrer(page,largeur,hauteur,options) { var top=(screen.height-hauteur)/2; var left=(screen.width-largeur)/2; window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options); } //--> </script> <style type="text/css"> dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu ul { position: absolute; } #menu { position: absolute; top: 0; left: 0; width: 100%; /* correction pour Opera */ border: 0px solid gray; visibility: visible; } #menu dl { float: left; width: 12em; } #menu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; margin: 1px; width: 200px; } #menu dd { display: none; border: 1px solid Red; width: 200px; text-align: left; padding-left: 1px; } #menu li { text-align: left; background: White; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { background: #7CFC00; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } #global { width: 1000px; background-color: White; color: Black; text-align: center; } #partiecentrale { position: relative; top: 0px; left: 0px; height: auto; width: 1000px; background-color: #ffffff; color: Black; border: 0px solid Black; vertical-align: top; } #milieu { position: absolute; top: 0px; left: 317px; height: auto; width: 400px; background-color: #ffffff; color: Black; border: 0px solid Black; text-align: center; vertical-align: top; } #globalcp { width: 400px; text-align: center; vertical-align: top; height: 131px; position: absolute; left: 1px; border: 0px solid Black; top: 70px; } #abonne { width: 400px; text-align: center; vertical-align: top; height: 131px; position: absolute; left: 1px; border: 0px solid Black; top: 210px; } #abonne2 { width: 237px; text-align: center; vertical-align: top; height: 131px; position: absolute; left: 1px; border: 0px solid Black; top: 0px; } #abonne3 { width: 98px; text-align: center; vertical-align: top; height: 32px; position: absolute; left: 1px; border: 0px solid Black; top: 0px; } #abonne4haut { width: 11px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 1px; border: 0px solid Black; top: 33px; } #abonne5haut { width: 215px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 11px; border: 0px solid Black; top: 33px; background-image: url(images/ligne_jaune_abonne.jpg); } #abonne5hautmailtitre { width: auto; text-align: center; vertical-align: middle; height: 16px; position: absolute; left: 1px; border: 0px solid Black; top: 12px; font: bold 13px Arial, Helvetica, sans-serif; color: Black; } #abonne5hautmailinput { width: auto; height: auto; position: absolute; left: 82px; border: 0px solid Black; top: 10px; font: bold 13px Arial, Helvetica, sans-serif; color: Black; } #abonne5bas { width: 11px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 1px; border: 1px solid Black; top: 23px; background-image: url(images/ligne_jaune_abonne.jpg); } #mdptitre { width: auto; height: auto; position: absolute; left: 1px; border: 0px solid Black; top: 10px; font: bold 13px Arial, Helvetica, sans-serif; color: Black; } #mdpinput { width: auto; height: auto; position: absolute; left: 92px; border: 0px solid Black; top: 9px; font: bold 13px Arial, Helvetica, sans-serif; color: Black; } #mdpgo { width: auto; height: auto; position: absolute; left: 180px; border: 0px solid Black; top: 4px; } #abonne4bas { width: 11px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 1px; border: 0px solid Black; top: 75px; } #abonne5bas { width: 215px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 11px; border: 0px solid Black; top: 75px; background-image: url(images/ligne_jaune_abonne.jpg); } #abonne6haut { width: 11px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 226px; border: 0px solid Black; top: 33px; } #abonne6bas { width: 11px; text-align: center; vertical-align: top; height: 40px; position: absolute; left: 226px; border: 0px solid Black; top: 75px; } #mdpperdu { width: 237px; text-align: center; vertical-align: top; height: 14px; position: absolute; left: 0px; border: 0px solid Black; top: 116px; font-size: 12px; color: Black; font-family: Arial, Helvetica, sans-serif; } #pizza1 { position: absolute; top: 0px; left: 0px; height: 131px; width: 192px; background-color: #ffffff; color: Black; border: 0px solid Black; text-align: left; vertical-align: top; } #pcomm2 { position: absolute; top: 0px; left: 192px; height: 20px; width: 208px; background-color: #ffffff; color: Black; border: 0px solid Black; text-align: left; vertical-align: top; } #cp1 { background: url(images/pizza2.jpg); width: 198px; text-align: left; vertical-align: top; height: 85px; position: absolute; top: 27px; left: 192px; border: 0px solid Black; } #cp2 { background: url(images/pizza3.jpg); width: 11px; height: 84px; position: absolute; top: 27px; left: 390px; border: 0px solid Black; } #entrezcp { text-align: left; vertical-align: top; height: 30px; width: 105px; position: absolute; top: 3px; left: 2px; border: 0px solid Black; font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: White; color: Black; font-weight: bold; } #cpinput { text-align: center; vertical-align: middle; width: 60px; height: 22px; position: absolute; top: 6px; left: 110px; border: 1px solid Black; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: Black; } #communeinput { width: auto; height: 22px; position: absolute; top: 55px; left: 170px; border: 0px solid Black; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: Black; } #validez { width: 54px; height: 20px; position: absolute; top: 114px; left: 335px; border: 1px solid Black; } #description { text-align: left; vertical-align: middle; width: 400px; height: 20px; position: absolute; top: 0px; left: 0px; border: 0px solid Black; } .arriereplan { background: White; color: Black; } A {text-decoration: none;} .obj {position: absolute; visibility: visible; top: 0; z-index: 1;} a:link { text-decoration: underline } a:visited { text-decoration: underline } a:hover { text-decoration: underline; } input { font-family: ms Sans Serif,Verdana,Helvetica; color: #8A2BE2; font-size: 10px; font-weight: bold } body { margin-left: 0; margin-top: 0; background-color: #FFFFFF; margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } </style> </head> <body class="arriereplan"> <div id="global"> <div id="partiecentrale"> <div id="milieu"> <!----- Choix du quartier -----------------------------------------> <div id="globalcp"> <div id="cp2"></div> <div id="pizza1"><img src="images/pizza1.jpg" alt="Selectionnez votre quartier de livraison" /></div> <div id="pcomm2"><img src="images/pcomm2.jpg" alt="" /></div> <div id="cp1"></div> <div id="communeinput"> <div id="menu"> <dl> <dt onmouseover="java script:montre('smenu3');"><img src="images/acces-resto.gif" alt="Cliquez ici pour choisir votre commune ou quartier" /></dt> <dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');"> <ul> <li><a href="">Strasbourg-Bourse</a></li> <li><a href="">Strasbourg-Elsau</a></li> <li><a href="">Strasbourg-Esplanade</a></li> <li><a href="">Strasbourg-Krutenau</a></li> <li><a href="">Strasbourg-Meinau</a></li> <li><a href="">Strasbourg-Montagne verte</a></li> <li><a href="">Strasbourg-Neudorf-Port-du-Rhin</a></li> <li><a href="">Strasbourg-Neuhof</a></li> </ul> </dd> </dl> </div><!-- fin id menu --> </div><!--fin id communeinput--> </div><!--fin id globalcp--> <!----- accès abonnés -----------------------------------------> <div id="abonne"> <div id="abonne2"> <form method="get" action="caddy.php"> <div id="abonne3"><img src="images/espace-abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne4haut"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne4bas"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne5haut"> <p><input type="hidden" name="dzone" value="accueil_mdp" /></p> <p><input type="hidden" name="action" value="affiche_restos" /></p> <div id="abonne5hautmailtitre">Votre email:</div> <div id="abonne5hautmailinput"><p><input type="text" name="email" value="" size="20" maxlength="45" /></p></div> </div><!-- fin de abonne5haut --> <div id="abonne5bas"> <div id="mdptitre">Mot de passe:</div> <div id="mdpinput"><p><input type="password" name="mdp" value="" size="8" maxlength="10" /></p></div> <div id="mdpgo"><p><input type="image" src="images/gooff2.jpg" alt="Cliquez sur GO pour vous identifier" /></p></div> </div><!-- fin de abonne5bas --> <div id="abonne6haut"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne6bas"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div> <div id="mdpperdu"><a href='java script:PopupCentrer("popup/mdp_perdu.php",400,185,"menubar=no,scrollbars=yes,statusbar=no")'>J'ai perdu mon mot de passe</a></div> </form> </div><!-- fin de abonne2 --> </div><!-- fin de abonne --> </div><!-- fin de milieu --> </div><!-- fin de partiecentrale --> </div><!-- fin de global --> </body> </html> Sinon, je vais faire passer en formulaire en GET, merci v4np13 Edit captain_torche : Prière d'utiliser la balise CODEBOX pour les longs morceaux de codes. -
Problème de liste occultée dans Menu monté en CSS
Alcaline a répondu à Alcaline - Forum : (X)HTML et CSS
en fait j'ai ça dans le css que j'ai oublié de signaler: dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; visibility: visible; } je pense que c'est là que ça se joue mais je n'arrive pas à trouver le terme qui fait que la liste est toujours visible. le visilility ne change rien. J'ai essayé aussi le elevation: higher, le overflow: visible mais sans vraiment maîtriser ce que je fais -
Problème de liste occultée dans Menu monté en CSS
Alcaline a répondu à Alcaline - Forum : (X)HTML et CSS
Merci xpatval d'avoir répondu CODEBOX est un soft qui test les .css c'est ça? en fait j'utilise le CSS Validator en ligne suivant: Voir résultat du test avec warning mais positif On m'a toujours conseillé de passer en méthode GET pour des raison de sécurité. Quel est ton point de vue là dessus? -
Que faire de plus pour bien référencer son site ?
Alcaline a répondu à Jessy - Forum : Techniques de Référencement
Bonjour Jessy, fais attention, tu as quelques petites erreurs detectées par le W3C validator. Test sur W3C Validator C'est juste une petite remarque au cas où tu souhaites rester rigoureux dans ton code -
Bonjour, J'ai un pb avec la liste des éléments dont l'affichage est partiellement caché par d'autres éléments présents sur ma page d'accueil. Y a t-il une option "toujours visible" pour ce script? Je précise que le menu déroulant est placé dans un <div> et que la partie qui occulte la liste est dans un autre <div> Même si j'intervertis l'ordre d'affichage, certains éléments de la liste sont invisible. Mieux que des explications, voici une capture pour imager: Si quelqu'un pouvait me donner un coup de main... ce serait super sympa. Voici une partie de la feuille de style: #abonne { width: 400px; text-align: center; vertical-align: top; height: 131px; position: absolute; left: 1px; border: 0px solid Black; top: 210px; } #abonne2 { width: 237px; text-align: center; vertical-align: top; height: 131px; position: absolute; left: 1px; border: 0px solid Black; top: 0px; } #menu { position: absolute; /* placement du menu, à modifier selon vos besoins */ top: 0; left: 0; z-index:100; width: 100%; /* correction pour Opera */ border: 0px solid gray; visibility: visible; } #communeinput { width: auto; height: 22px; position: absolute; top: 55px; left: 170px; border: 0px solid Black; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: Black; } Voici le script contenu dans le head: <script type="text/javascript"> <!-- window.onload = montre; 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';} } go_visibility = new Array; //--> </script> et voici le code contenu dans le body: <div id="communeinput"> <div id="menu"> <dl> <dt onmouseover="java script:montre('smenu3');"><img src="images/acces-resto.gif" alt="Cliquez ici pour choisir votre commune ou quartier" /></dt> <dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');"> <ul> <li><a href=".strasbourg-bourse,pizza.htm.">Strasbourg-Bourse</a></li> <li><a href=".strasbourg-esplanade,pizza.htm.">Strasbourg-Esplanade</a></li> <li><a href=".strasbourg-krutenau,tarte-flambee.htm.">Strasbourg-Krutenau</a></li> <li><a href=".strasbourg-meinau,tarte-flambee.htm.">Strasbourg-Meinau</a></li> <li><a href=".strasbourg-neudorf-port-du-rhin,plat-chaud.htm.">Strasbourg-Neudorf-Port-du-Rhin</a></li> <li><a href=".strasbourg-neuhof,salade.htm.">Strasbourg-Neuhof</a></li> </ul> </dd> </dl> </div><!-- fin de menu --> </div> <!--fin de communeinput--> <div id="abonne"> <div id="abonne2"> <form method="get" action="caddy.php"> <div id="abonne3"><img src="images/espace-abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne4haut"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne4bas"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne5haut"> <p><input type="hidden" name="dzone" value="accueil_mdp" /></p> <p><input type="hidden" name="action" value="affiche_restos" /></p> <div id="abonne5hautmailtitre">Votre email:</div> <div id="abonne5hautmailinput"><p><input type="text" name="email" value="" size="20" maxlength="45" /></p></div> </div><!-- fin de abonne5haut --> <div id="abonne5bas"> <div id="mdptitre">Mot de passe:</div> <div id="mdpinput"><p><input type="password" name="mdp" value="" size="8" maxlength="10" /></p></div> <div id="mdpgo"><p><input type="image" src="images/gooff2.jpg" alt="Cliquez sur GO pour vous identifier" /></p></div> </div><!-- fin de abonne5bas --> <div id="abonne6haut"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div> <div id="abonne6bas"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div> <div id="mdpperdu"><a href='java script:PopupCentrer("popup/mdp_perdu.php",400,185,"menubar=no,scrollbars=yes,statusbar=no")'>J'ai perdu mon mot de passe</a></div> </form> </div><!-- fin de abonne2 --> </div><!-- fin de abonne --> [Edit captain_torche : CODEBOX, c'est la "balise" qui te permet de poster un code assez long, sans étirer inutilement la hauteur de ton post. J'ai édité ton post en ce sens.]