Webdesigneuse Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Suite à mon message ici : http://www.webmaster-hub.com/index.php?sho...mp;#entry275325 ... j'ai donc fini par mettre les mains dans la lessive Ajax et j'aimerai réaliser ce type de navigation : http://sandbox.leigeber.com/dropdown/dropdown.html code expliqué : http://www.leigeber.com/2008/04/sliding-ja...-dropdown-menu/ mais n'étant pas super calée en prog je n'arrive pas à résoudre un problème d'affichage d'image pour le fond des boutons... (je voudrais un rendu comme ici : http://www.cabinet-blay.fr ) Voici la CSS : body {margin:25px;} * {padding:0; margin:0} .dropdown {float:left;/*padding-right:5px*/} .dropdown dt {width:159px;/*border:0px solid #9ac1c9;padding:8px;*/ background:url("images/fds_btn.jpeg"); font:13px Arial; color:#f9f0d3; font-weight:bold; cursor:pointer; } .dropdown dt:hover {background:url('images/fds_btn.jpeg');font:13px Arial; font-color:#f9f0d3; font-weight:bold; } .dropdown dd {position:absolute; overflow:hidden; width:159px; display:none; font:12px Arial; font-color:#f9f0d3; font-weight:bold; background:#b6b15f; z-index:200; opacity:0} .dropdown ul {width:159px; /*border:2px solid #9ac1c9;*/ list-style:none; border-top:none} .dropdown li {display:inline} .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:3px; color:#f9f0d3; text-decoration:none; background:#7e7948; width:159px} .dropdown a:hover {background:url('images/fds_btn.jpeg'); /*color:#f9f0d3*/} .dropdown .underline {/*border-bottom:1px */solid #b9d6dc} et le html : CODE <html> <body> <dl class="dropdown"> <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">L'AGENCE</dt> <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> <ul> <li><a href="#" class="underline">Son histoire</a></li> <li><a href="#" class="underline">Son équipe</a></li> <li><a href="#" class="underline">La Roche de Glun</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">SES SERVICES</dt> <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)"> <ul> <li><a href="#" class="underline">Vous êtes propriétaire</a></li> <li><a href="#" class="underline">Vous cherchez un bien</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">CONTACT</dt> <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)"> <ul> <li><a href="#" class="underline">Plan d'accès</a></li> <li><a href="#" class="underline">Nous contacter</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">INFORMATIONS</dt> <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)"> <ul> <li><a href="#" class="underline">Liens utiles</a></li> <li><a href="#" class="underline">Mentions légales</a></li> <li><a href="#" class="underline">Accès réservé</a></li> </ul> </dd> </dl> <div style="clear:both" /> Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor. Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere, odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque. Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio. </body> </html> Si vous avez quelques indices du pourquoi mon image ne s'affiche pas, n'hésitez pas à m'expliquer Mille merci ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Pourrais-tu uploader ta page de tests ? Ça serait plus simple pour t'aider Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 Ok, oui ... c'est la première fois que j'upload une page ici... j'espère avoir fait correctement dropdown.html dropdown.css Lien vers le commentaire Partager sur d’autres sites More sharing options...
petit-ourson Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Pour information, ce n'est pas de l'ajax mai un simple menu en javascript sans interaction client/serveur. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 [parenthèse] Merci pour ta remarque petit ourson... Il est vrai que j'ai bêtement répété ce qu'on m'a dit j'avoue qu'une petite définition de l'Ajax serait la bienvenue car je ne sais même pas ce qui différencie clairement le javascript de l'Ajax ;-b [/parenthèse] Lien vers le commentaire Partager sur d’autres sites More sharing options...
karnabal Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Oui, petit abus de langage de ma part dans la discussion à laquelle Patricia fait référence. À l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web : * HTML (ou XHTML) pour la structure sémantique des informations ; * CSS pour la présentation des informations ; * DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ; * l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web. * XML. Source : Wikipedia Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 Voilà qui est plus clair pour moi, merci Karnabal Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Sinon, lorsque je te parlais d'uploader le fichier, je voulais dire "sur ton serveur", qu'on puisse tester en conditions réelles Là, je veux bien mais je n'ai pas les images. Et comme cela semble être un souci de positionnement d'images ... PS : lorsque tu postes des codes longs, il vaut mieux utiliser la balise CODEBOX, qui a une hauteur fixe. j'ai édité ton premier message en ce sens. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 Oups ! vivement les vacances Voilà, c'est en ligne : http://www.surlesailes.com/navigation/dropdown.html Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Ce que je peux déjà voir, c'est que tu n'as pas de répertoire "images" dans ton répertoire "navigation". Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 euh si si il y est bien... mais j'ai une redirection automatique vers une page erreur si tu essaies d'aller dans le répertoire, désolée... suis ce lien : http://www.surlesailes.com/navigation/images/fds_btn.jpg Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 7 Juillet 2008 Partager Posté 7 Juillet 2008 Dans ce cas, c'est juste que tu appelles "fds_btn.jpeg" dans ton CSS. Enlève le "e", ça passera tout de suite mieux Ensuite, ajoute ce code à ton .dropdown dt : text-align: center;padding-top: 20px;height: 38px; Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 7 Juillet 2008 Auteur Partager Posté 7 Juillet 2008 mdr ! j'ai vraiment besoin de vacances moi !! un grand merci captain ! je cours essayer... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 8 Juillet 2008 Auteur Partager Posté 8 Juillet 2008 Bonjour à tous, Alors voilà, j'ai testé tout plein de choses... j'ai aussi fait une image avec un fond transparent (en png) mais j'ai toujours un soucis lié à la forme de mon bouton (bas arrondis)... il faudrait que le déroulant soit sous le bouton or là il est au dessus... et ce n'est pas ce que j'attendais. Comment faire pour gérer les niveaux ? Je cherche de mon côté mais si vous avez une piste... encore merci pour votre aide Lien vers le commentaire Partager sur d’autres sites More sharing options...
karnabal Posté 8 Juillet 2008 Partager Posté 8 Juillet 2008 Tu peux définir un margin-top au bloc que tu veux descendre. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 8 Juillet 2008 Auteur Partager Posté 8 Juillet 2008 (modifié) Hello Karnabal En fait je me suis mal exprimé... quand je parle de niveau ce n'est pas par rapport à la page (haut / bas/ droite / gauche) mais par rapport à l'image du bouton (dessous / dessus) Mais peut-être que j'en demande trop là ... ++ Ehm, je viens de me relire et ce n'est pas plus évident à comprendre lol... .... imagine l'effet déroulant dans un bloc en dessous du bloc de l'image du bouton... donc le bouton chevauche le déroulant au lieu de le cacher... (c'est plus visuel comme exemple et plus clair pour moi là Modifié 8 Juillet 2008 par Webdesigneuse Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 8 Juillet 2008 Partager Posté 8 Juillet 2008 Il faut que tu ajoutes ceci à tes dt : position: relative;z-index: 300 puis que tu ajoutes du padding à tes dd. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Webdesigneuse Posté 11 Juillet 2008 Auteur Partager Posté 11 Juillet 2008 Hello ! Merci Cap'tain voilà qui m'aide bien... j'ai donc modifié, il me reste à caler le déroulant pmaintenant... je devrais y arriver Et encore merci à tous !! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant