Ce tutoriel va donc vous apprendre comment utiliser le CSS et le HTML pour réaliser un menu ayant des sous-menus. Nous verrons comment déformer des balises prédéfinies pour réaliser un menu laissant apparaitre un sous-menu au survol...
Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.
La typographie est une partie importante d'un site web qui est...
Dans ce tutoriel vous allez apprendre à créer votre propre loader animé...
Nico Il y a 20 jours Répondre
Merci pour cette vidéo très instructive,
Si mon menu est vertical (avec donc des boutons se décalant sur la droite) avec une hauteur finie c'est à dire juste la hauteur de l'ensemble de mes boutons que dois-je modifier?
roboto441 Il y a 30 jours Répondre
Je n'ai pas préciser mon problème =@: enfaite lorsque je passe le curseur sur le menu rien ne se déroule =\ help !
roboto441 Il y a 1 mois Répondre
salut je ne comprend pas mais j'ai un problème lors de la réalisation du menu:
mon code html:
<header>
<div id="titre_principal">
<img src="images/logo.png" alt="logo" id="logo" />
<h1>Game Maker</h1>
<h2>Le site du forum</h2>
</div>
<div id="menu_deroulant">
<dl>
<dt>menu 1</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</dd>
</dl>
<dl>
<dt>menu 2</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</dd>
</dl>
<dl>
<dt>menu 3</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</dd>
</dl>
</div>
</header>
et voici le code css
#menu_deroulant{
background:url(images/menu_deroulant/background1.png);
height:40px;
}
#menu_deroulant dl{
height:40px;
margin:0; padding:0;
display:block;
float:left;
}
#menu_deroulant dt{
width:150px;
display:block;
height:40px;
color:#FFF;
line-height:40px;
text-align:center;
border-right:solid 1px #333333;
cursor:pointer;
}
#menu_deroulant dd{
display:block;
margin:0; padding:0;
background:url(images/menu_deroulant/background1.png);
}
#menu_deroulant dd ul{
margin:0; padding:0;
text-align:center;
list-style:none;
}
#menu_deroulant dd ul li a{
color:#333333;
display:block;
text-decoration:none;
height:30px;
line-height:30px;
border-top:solid 1px #333333;
}
#menu_deroulant dd ul li a:hover{
background:url(images/menu_deroulant/background2.png);
color:#FFF
}
#menu_deroulant dl dd{
display:none;
}
#menu_deroulant dl:over dd{
display:block;
}
quelqu'un peut-il m'aider ?
roboto441 Il y a 1 mois - Répondre
Je viens de me rendre compte que je n ai pas mentionné le problème: lorsque je passe la souris sur le menue rien ne se passe =\
nidnight Il y a 1 mois Répondre
firefox et chrome aucun problème mais comme est toujours IE à la traîne !
merci pour le tuto
Very embarrassing. I thought the pastor did not allow his wi Il y a 2 mois Répondre
Very embarrassing. I thought the pastor did not allow his wife to be publicly humiliated like this. See how she was amiable in his speech. It seems much more mature than the pastor.http://www.justdojordans.com/air-jordan/air-jordan-17
ludo31 Il y a 2 mois Répondre
Merci beaucoup pour ce tuto ; enfin je sais comment mettre un fond d'image sur un menu et l'adapter selon le contenu !
très bon tuto comme d'hab !!
merci pour le travail
jardihaie Il y a 5 mois Répondre
Bonjour,
Je regrette que cette feuille de style ne fonctionne pas sous IE9. Quelqu'un aurait t'il une solution ?
serda Il y a 5 mois Répondre
CSS COMPATIBLE IE7 (mode IE7) mais pas tester sur IE6 dsl :/
HTML identique a celui de graf a par la div conteneur qui d'apres moi ne sert a rien
#menu{
position:relative;
margin-left:75px;
background-color: #F4F9FD;
height:40px;
}
#menu dl{
height:40px;
margin:0; padding:0;
display:inline-block;
/float:left;
}
#menu dt{
width:150px;
display:block;
height:40px;
background-color:black;
color:white;
text-align:center;
border : 1px solid #9EA0A1;
line-height:40px;
cursor:pointer;
}
#menu dd{
background-color: #F4F9FD;
display:block;
margin:0; padding:0px;
}
#menu dd ul{
margin:0; padding:0;
text-align:center;
list-style:none;
}
#menu dd ul li{
display:block;
margin:0;
padding:0;
}
#menu dd ul li a{
color: red;
text-decoration:none;
display:block;
width:150px;
height:30px;
line-height:30px;
border-bottom:1px solid white;
}
#menu dd li a:hover{
background-color:green;
color:white;
}
#menu dt:hover{
color:white;
}
#menu dl dd{
visibility:hidden;
}
#menu dl:hover dd{
visibility:visible;
}
cognin38 Il y a 6 mois Répondre
Bonjour, Super tuto ! Clair, explicite et qui fonctionne parfaitement dans Firefox et IE (avec modifs). J'ai un petit souci que je n'arrive pas à résoudre : sur 8 cases je n'ai besoin que de 3 qui se déroulent, pour les autres j'ai besoin d'un accès direct en cliquant sur le bouton p.e. Accueil ou Contactez nous. Quelqu'un a une solution pour la modif ? Merci d''avance.
rafi33 Il y a 6 mois Répondre
Peut-etre q'en mettant toute la liste dans une <div> cela ferai alor q'un bloc et le probleme d'IE serai résolu
simo Il y a 7 mois Répondre
j ai trouver un menu tres bien fait le menu de (cdiscount, rueducommerce, siteduzero...) est ce que c est possible de le faire un tuto.. Merci
ivi Il y a 10 mois Répondre
Bonjour.SVP est ce que quelqu'un pourrait me donner la suite du code a partir de "dd ul li a" car la video de continue pas elle se bloque à ce niveau.Merci d'avance
RealDesign Il y a 11 mois Répondre
Merci beaucoup pour cet excellent tuto ! Vraiment merci ! ;-)
hakim Il y a 11 mois Répondre
bonjour ,je vien d'apprendre a crée un menu deroulant et s'était vraiment agreable ,je vous remerci pour votre soutien au debutant comme moi.
et puit voila en se qui conserne le :border-top dans: dd ul li a {}moi j'ai plutot refait le contraire :dd ul li a{
............;....;
border-bottom:1px solid ... c'est à dire au lieu de faire border-top j'ai fait border-bottom et j'ai obtenu un trés bon résultat enfin mais c'est aprés une longue réflexion et puis je vous redonne tu le script juste pour voir et je vous remercie cordialement .
le voici :
<html>
<head>
<title>
</title>
<style>
body{
background:c98c51
}
#conteneur{
background:gray;height:40px;
width:100%;padding:0;margin:0;position:relative;
}
#hkm{
position:absolute
}
dl{
display:block;float:left;padding:0;margin:0;
}
dt{
color:white;text-align:center;border-right:1px dotted c98c51;
display:block;line-height:40px;width:140px;cursor:pointer;height:40px;
}
dd{
background:gray;padding:0px;margin:0px;display:block;width:140px
}
dd ul{
list-style-type:none;padding:0;margin:0;text-align:center;
}
dd ul li a{
text-decoration:none;color:white;line-height:40px;
border-bottom:1px solid c98c51;display:block
}
dd ul li a:hover{
background:white;color:c98c51
}
dl dd{
display:none
}
dl:hover dd{
display:block}
</style>
</head>
<body>
<div id="conteneur">
<div id="hkm">
<dl>
<dt>menu1</dt>
<dd>
<ul>
<li><a href=".html">lien1</a></li>
<li><a href=".html">lien2</a></li>
<li><a href=".html">lien3</a></li>
<li><a href=".html">lien4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>menu2</dt>
<dd>
<ul>
<li><a href=".html">lien1</a></li>
<li><a href=".html">lien2</a></li>
<li><a href=".html">lien3</a></li>
<li><a href=".html">lien4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>menu3</dt>
<dd>
<ul>
<li><a href=".html">lien1</a></li>
<li><a href=".html">lien2</a></li>
<li><a href=".html">lien3</a></li>
<li><a href=".html">lien4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>menu4</dt>
<dd>
<ul>
<li><a href=".html">lien1</a></li>
<li><a href=".html">lien2</a></li>
<li><a href=".html">lien3</a></li>
<li><a href=".html">lien4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>menu5</dt>
<dd>
<ul>
<li><a href=".html">lien1</a></li>
<li><a href=".html">lien2</a></li>
<li><a href=".html">lien3</a></li>
<li><a href=".html">lien4</a></li>
</ul>
</dd>
</dl>
</div></div>
<div id="text"><p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</p></div>
</body>
</html>
ehaourir Il y a 11 mois Répondre
Bonjour,
Pourquoi vous avez pas utilisé visibilty:hidden pour cacher ul li?
c'est mieux que display:none !!!!!
Merci
liam26 Il y a 11 mois Répondre
Bonjour,
Très bon tuto. Je voudrais rajouter un bouton "home" à gauche de ce menu pour revenir directement à l'accueil mais je n'y arrive pas: soit sa largeur est trop grande soit le menu passe en dessous. Quelqu'un sait comment faire? Merci.
Uchiha-Madara Il y a 1 an Répondre
Merci pour ce magnifique travail
Anaïs Il y a 1 an Répondre
super tuto, les explications sont très claires.
Merci!
e-youssef Il y a 1 an Répondre
si quelqu'un a un problème pour créer un menu avec css sur IE voila la solution avec jQuery :
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
abdillahi Il y a 1 an Répondre
si vous plait je voulais que vous m'aidiez pour faire une importation des données excel dans une base de données mysql. enfaite je travaille sur un projet auquel je dois faire des importations et des exportations des données excel dans une base mysql.
pour e qui concerne l'exportation j ai compris à travers le tutoriel ici present mais j'aimerai la même video pour l'importation aussi.
Merci
xanas Il y a 1 an Répondre
thx man
Ahmed98 Il y a 1 an Répondre
bien expliqué merci
eAfaf Il y a 1 an Répondre
Merci pour ce tutoriel ^^ carry on
TkD Dje Il y a 1 an Répondre
Bonjour à toutes et à tous,
Je tiens à remercier Grafikart pour ce tuto vraiment génial :D J'aurais tout de même quelques questions.
Je souhaiterais ajouter un sous-sous-menu formant un bloc juste à droite du sous-menu concerné.
J'ai eu pour idée de rajouter dans le html les balises <dd> </dd>:
...
<li>Sous-menu</a>
<dd>
<ul>
<li><a href="">Sous-sous Menu 1</a>
<li><a href="">Sous-sous Menu 2</a>
</ul>
</dd>
...
Ainsi rajouter dans le fichier css:
dd ul dd ul li {
background: url(../Images/Background/bois2.jpg);
position:absolute;
margin : 0 0 0 290px ; /* décalage de la taille de la cellule du sous-menu.
}
Le résultat obtenu est l'affichage des sous-sous menus à droite du sous-menu mais l'un sur l'autre et non en bloc l'un en dessous de l'autre. De plus, ceux-ci restent apparents lorsque le menu est pointé.
Est-ce la bonne méthode pour le résultat que je souhaiterais obtenir ?
En vous remerciant par avance et en m'excusant des erreurs éventuelles que je peux commettre car je débute dans ce langage.
Bien cordialement.
PetitChatonMignon Il y a 1 an Répondre
Bonjour eloyas,
J'avais le même problème que toi, à savoir que le 'display:none;' ne semblait pas prendre effet sur " dl dt{}", vu que le sous-menu restait apparent sans que le pointeur soit dessus.
J'ai essayé de mettre le 'display:none;' sur " dl ul{} " et ça semble fonctionner désormais. Bien entendu, il faut ensuite mettre un 'display:block;' sur " dl:hover ul{} ".
En revanche, quelqu'un de plus calé que moi peut confirmer ou infirmer la fiabilité de cette alternative ?
eloyas Il y a 1 an Répondre
Bonjour ,
j'ai suivi ce tuto qui est exactement ce que je cherchais a faire, mais j'ai un souci, aucun de mes navigateurs (chrome, firefox, IE et opéra) ne prend en compte le display none...
J'ai donc relu la video, et j'ai mis exactement le même code que lors du tuto (sans les image ^^ ) et ben... display none ne veux pas...
J'ai vérifier le code source de ma page, et dysplai non apparait bien dans mon fichier CSS...
Quelqu'un pourrais m'aidé :p .
Merci d'avance.
florent Il y a 2 ans Répondre
Il manquerai juste un tuto pour un menu déroulant mais vertical
nsitsmiti Il y a 2 ans Répondre
C'est vraiment genial, tout tes tutos sont supers et comprehensibles.
Merci bien
fghfg Il y a 2 ans Répondre
hahaha :d :s :@
karl Il y a 2 ans Répondre
bien
Flyer Il y a 2 ans Répondre
Bonjour je voulais poster mon code fait à partir de ce tuto. Mais je n'est pas du faire éxactement pareil car il fonctionner sous IE et bien sur les autre (googleChrome, Firefox,Opera ).
Voila mon code Cdd les balise sont éxactement les même que le tuto. (Juste un petit souci. Je narrive pas a modifier la taille des mes <DL> sans que sa parte en cacaouette).
CODE SANS BEUG :
#menu{
background:url(../img/bar_menu.png) repeat-x;
height:40px;
}
dl{
height:40px;
margin:0;padding:0;
margin-left: 50px;
display:block;
float:left;
}
dl dt,dl dt a{
height:40px;
color:#000;
text-transform:uppercase;
line-height:40px;
}
dt:hover{
cursor:pointer;
color:#FFF;
}
dt a:hover{
cursor:pointer;
color:#FFF;
}
dl:hover dd{
margin:0;padding:0;
display:block;
}
dl dd{
display:none;
margin:0;padding:0;
background:#F90;
}
dd ul {
margin:0;padding:0;
list-style:none;
}
dd li a{
display:block;
line-height:30px;
border: solid 1px #000;
border-top:none;
padding-left:5px;
}
Flyer Il y a 2 ans Répondre
Super tuto comme dab. Seul petit Hic ça ne fonctionne pas avec un Include.
Cantabile Il y a 2 ans Répondre
Bonjour comme Rain s'il y a du texte dessous (sous IE) je ne peux pas dérouler plus de 2 liens... ça ne fonctionne que si je donne un height plus grand dans mon conteneur-menu ! mais si j'ai 6 liens ce n'est pas possible !
Bravo pour ce site et pour tous les tutos très bien fait.
Begood Il y a 2 ans Répondre
bravo pour ce tuto !! c'est exactement ce qu'il me fallait !!!
Par cotre quelle est la balise a rajouter pour que lorsque l'on passe sur la partie haute du menu la couleur du me change aussi (Menu1, menu2...)
Merci d'avance
grint854 Il y a 2 ans Répondre
bonjour,voila ce qu'il me faut,je n'ai plus qu'a regarder cette vidéo de nombreuses fois.
Les liens hypertextes sont ma bête noire.
Rain Il y a 2 ans Répondre
J'ai oublié mon code HTML
<body>
<div id="banner" class='container_12' >
<div id="menu_gauche" class="grid_9"></div>
<div id="menu_droite" class="grid_3">Menu Droite</div>
</div>
<div id="conteneur" class='container_12'>
<div id="menu" >
<dl>
<dt> Configuration</dt>
<dd>
<ul>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>
</dd>
</dl>
<dl>
<dt> Serveur</dt>
<dd>
<ul>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>
</dd>
</dl>
<dl>
<dt> Client</dt>
<dd>
<ul>
<li> <a href="ajoutclient.php">Ajout Client</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="contenu" class='container_12'>
<div class="grid_2">
La série est encore en cours de prépublication dans le magazine hebdomadaire Weekly Shonen Jump.
</div>
<div class="grid_8">
Ichigo Kurosaki est un lycéen de 15 ans, qui aurait pu être comme les autres.
</div>
<div class="grid_2">
<ul>
<li> <a href="ajoutclient.php">Ajout Client</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>
</div>
</div>
</div>
Et mon Code CSS:
div#banner {
background-image:url(banner.png);
height:150px;
}
#foot {
background-image:url(foot.png);
height:150px;
clear:both;
}
div#menu_gauche
{
color:#369;
}
div#menu_droite{
color:white;
}
#conteneur{
background-image:url(menu.png);
height:40px;
position:relative;
}
#menu
{
position:absolute;
height:40px;
}
dl{
height:40px;
margin:0;
padding:0;
display:block;
float:left;
}
dt{
width:150px;
display:block;
height:40px;
color:white;
line-height:40px;
text-align:center;
border-right:dotted 1px #FFF;
cursor:pointer;
}
dd{
width:150px;
margin:0;
padding:0;
display:block;
background-color:#FFF;
}
dd ul{
margin:0;
padding:0;
text-align:center;
list-style:none;
}
dd ul li {
display:block;
margin:0;
padding:0;
}
dd ul li a{
text-decoration:none;
display:block;
height:30px;
line-height:20px
text-align:center;
border-top:dotted 1px black;
border-bottom:dotted 1px black;
width:150px;
background-color:grey;
}
dd ul li a:hover{
background-color:black;
}
dl dd{
display:none;
}
dl:hover dd{
display:block;
}
Merci
Rain Il y a 2 ans Répondre
Merci Poour ce super Tuto !!! cependant je ne comprend pas même après avoir suivie toute les instructions mon menu déroulant a toujours un problèmes lorsqu'il y a du texte en dessous de lui aidez s'il vous plait !!
Merci =)
man11110000 Il y a 2 ans Répondre
Bonjour,
Tout dabord, un grand bravo et merci pour cet excellent tuto, et je pése mes mots!
Ensuite, pour ceux qui rencontrent des problèmes avec IE, je leur conseil de voir le lien de Naise, cité plus haut, de cliquer droit sur la page et "afficher source".
Cela vous permettra d'obtenir un aperçus du code qui fonctionne sous IE.
a vous d'ajuster à vos besoins.
Merci Naise
Merci Grafi
otitio Il y a 2 ans Répondre
bonjour désolé je suis incompétent je connais rien mais je croit avoir lu que en joutant une hauteur de 1% au lien un problème d'IE7 serait régler . Je ne sait pas si c'est important les 1% mais les tutos présents ici m'aide alors je vais éssayer d'aider.
bemaluvi Il y a 2 ans Répondre
J'aimerais avoir votre avis sur ce menu. Est-ce qu'il peut fonctionner sur une majorité de navigateurs ?
Code XHTML :
<ul id="conteneur"><!-- Boite globale -->
<li><a href="#">Photoshop</a>
<ul class="sousmenu"><!-- Sous Menu Photoshop -->
<li><a href="#">les pixels</a></li>
<li><a href="#">la résolution</a></li>
<li><a href="#">la définition</a></li>
</ul>
</li>
<li><a href="#">Illustrator</a>
<ul class="sousmenu"><!-- Sous Menu Photoshop -->
<li><a href="#">le vectoriel</a></li>
<li><a href="#">les objets</a></li>
<li><a href="#">les sélections</a></li>
<li><a href="#">les contours</a></li>
<li><a href="#">les calques</a></li>
</ul>
</li>
Code CSS :
#conteneur {
font: normal 11px verdana, sans-serif;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.sousmenu {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: #000000;
text-decoration: none;
display: block;
padding: 4px 8px;
background: #3B4E77;
border-right: 2px solid #fff;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #F2462E;
}
#conteneur li {
float: left;
width: 150px;
}
#conteneur .sousmenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
#conteneur li:hover > .sousmenu {
display: block;
}
</css>
gc Il y a 2 ans Répondre
coucou , une soluce 100% css et valide html n'existe qu'en théorie ou seulement pour quelques navigateurs.
Pourquoi ? ... Comment tu fais sans souris , sur IE6 , etc ...
Si le tuto deblaie bien le principe , il faut creuser un peu plus pour en faire un menu qui tient la route et ne pas sauté dessus comme une soluce a copier/coller (même si l'apprentissage en passe par la )
Premier chose , tenter de comprendre et d'analyser comment ça marche .
, .. et tout les pros s'accorderont à te dire que sans Javascript pour t'épauler c'est mission impossible de faire un menu déroulant solide et passe-partout sans devoir en passer par des acrobaties hasardeuses (lien a ouvrir dans IE6 et sans javascript : http://yidille.free.fr/plux/valign/?16-menu-deroulant-compatible-i6 et http://gcyrillus.free.fr/essai/improbable-menu-deroulant.html JE NE CONSEILLE A PERSONNE DE SE SERVIR DE CES MENUS POUR IE6 )
Ensuite , un menu déroulant devrait pouvoir etre gardé ouvert au clic ou tabulation clavier (voir :focus et :active en complément de :hover ) du coup le onblur ou onmouseout devient nécessaire et ne se gère que par le biais de javascript , on peut tenter d'omettre le onfocus ou onclick en ajoutant un attribut tabindex ... de la pour rester valide on va etre tenter d'opter pour un doctype html5 (qui garde IE6/7/8 en mode standard).
Enfin une fois que l'on aura commencer a maitriser l'ouverture/fermeture d'un sous menu , reste encore a le mettre en forme de façon harmonieuse dans les différents navigateur , résolutions et orientations vertical , horizontal , a droite , a gauche , sans deborder de l'ecran , et enfin l'integré a la page qui peut avoir un graphisme complexe ...
La conception d'un premier menu déroulant peut devenir longue et compliqué , au fur et a mesure que l'on en découvre ses défauts et ses limites .
Il faut un minimum de connaissance dans le code(x)html et les styles , savoir lié les deux et tiré profits des selecteurs CSS.
Profité de ce tuto pour faire vos premiers pas
@grakikart : je ne sais pas si tu avais lu et pris en consideration les dire d'un vrai autodidacte :http://www.grafikart.fr/tutoriels/video/menu-deroulant-css-32 #c580 ... qui ne dis rien approuve
Cordialement bien sur
Grafikart Il y a 2 ans - Répondre
Comme tu le précise un menu 100% CSS ne marchera pas sur tous les navigateur. Mais c'est plus une approche pour appréhender la structure d'un menu à plusieurs niveau et y mettre plus tard du javascript.
Pour le commentaire cité il est exacte mais vu que je n'utilise pas la solution 100% CSS je n'ai pas eu l'occasion d'appliquer ces conseils.
dave Il y a 2 ans Répondre
j'ai testé toutes vos astuces, mais aucune ne marche !!
Y'a qu'en même un soucis !!! Si quelqu'un a trouvé la solution 100ù CSS je suis preneur !
Merci encore a Grafikart pour tous ces tutos de qualité ^^
Grafikart Il y a 2 ans - Répondre
Tu peux en dire plus sur ton soucis ?
Charly Il y a 2 ans Répondre
C'est bon j'ai résolu pour IE6
Il suffit de placer le fichier HTC dans le body...car IE 6 prend en compte le hover que sur le a et grâce à ce petit script il prendra tout en compte :
http://www.tagbytag.org/fr/articles/internet-explorer-testing-debugging-guide?page=3
enjoy et à mort IE6 quand même !
:)
shaz Il y a 2 ans Répondre
Bonjour à toutes et à tous,
Alors je ne ferais que rajouter à la liste des remerciements, car grâce à ce tutoriel j ai enfin compris les menus déroulant; et je peux continuer à faire mon site.
Un grand merci à son auteur.
Shaz
Stephane Il y a 2 ans Répondre
Bonjour,
Vraiment sympa le tuto, mais je suis sur ie est tout marche sauf le hover.
Franchement dommage.
Si quelq'un a une solution simple.
Merci à l'auteur et bravo du bon boulot
Hugg Il y a 2 ans Répondre
Pratique ton site, ta vidéo m'a aidé dans un de mes projets. Niveau IE, je n'ai pas eu ce problème peut-être qu'avec la mise jour IE, ce problème ne se pose plus ! En tout cas merci!
Thom Il y a 2 ans Répondre
Bonjour,
Je viens de voir ton tuto et un momment donné tu parle du problème avec IE. Tu peux remplacer les 2eme pointillés par hidden(qui est en faite une bordure caché.). Sa donne: dd ul li a{ border-bottom:hidden ;}
romain Il y a 2 ans Répondre
Je viens de tomber sur ton site cette après-midi et il est passé direct en favoris !
Bravo !
J'ai une petite question : Pourrais-je avoir les dimensions des images utilisées ?
Merci.
référencement maroc Il y a 2 ans Répondre
Pour ceux qui cherchent a automatiser la fermeture des balises sur Notepad++ :
TextFX - TextFW Settings - Cocher "Autoclose XHTMl/XML <tag>.
Jeff Il y a 2 ans Répondre
Une toute petite question dsl je commence a peine la programmation.
comment on fais pour les menu soit centres ?
Vixaborub Il y a 2 ans Répondre
Hello et merci beaucoup pour ce très beau tuto.
J'ai le même pb que Cora-liie mon menu n'est pas déroulant (testé sur FF, Safari et IE).
Ca bloc au niveau de
dl dd
{
display : none;
}
dl:hover dd
{
display : block;
}
Je n'arrive pas à comprendre mon erreur.
Merci de votre aide.
Tux Il y a 3 ans Répondre
vraiment genial ce tutoriel, tres bien explique
oupela Il y a 3 ans Répondre
toutes mes félicitations pour ce cours très très bien expliqué
LaMoume Il y a 3 ans Répondre
Bonjour à nouveau! En allant faire des essais avec JQuéry ainsi que vous le conseillez, j'ai résolu mon problème en complétant le code avec la fonction "animate" de cette façon :
jQuery().ready(function()
{
$(".ascenseur").next("div").hide();
$(".ascenseur").mouseover(function()
{
if($(this).next("div").is(":hidden")){
$(".ascenseur").next("div:visible").slideUp();
/*$(this).next("div").slideDown();*/
$(this).next("div").animate({
width:"155px",
marginLeft:"155px",
opacity:0.9,
}, 1500);
}
});
});
LaMoume Il y a 3 ans Répondre
Bonjour et MERCI BEAUCOUP pour les deux tutoriels concernant les menus en accordéon. Ils sont très clairs et bien agréables à suivre. Depuis hier je travaille sur "menu accordéon 26" afin de modifier l'affichage des sous-menus du site dont je suis le webmaster (débutante !!! Pour l'instant je procède à des essais de modifications sans mise en ligne). J'aimerais qu'au passage de la souris, ils se trouvent décalés vers la droite du menu vertical, avec un fond transparent. j'ai été voir sur le site JQuéry mais n'ai pas trouvé une instruction du genre slideRight (!).
Pouvez-vous m'aider à modifier le fichier .js ? Merci par avance, j'apprends la javascript en ce moment et ce n'est pas simple. Je pense qu'il faut une série d'instructions mais je ne vois pas bien lesquelles ni dans quel ordre (Pour le fond transparent des ul je vais travailler dans mes feuilles .css) : Maryline
Cora-liie Il y a 3 ans Répondre
bonjour, je débute dans le HTML et le CSS, mais j'ai un soucis, mon menu ne se met pas en déroulant... En copiant tout au mot à mot je n'arrive qu'à une liste verticale et un fond colorer... merci d'avance !!!µ
bonne continuation
Chahmedia Il y a 3 ans Répondre
Bonjour,
je cherche vraiment a comprendre comment je peut faire pour ajoute des sous menu a un seul bouton dans un menu, le bouton est fait parti d'un design complet d'une charte graphique d'un site web.
Merci d'avance
anonym Il y a 3 ans Répondre
Super!Merci pour cette réponse:)
anonym Il y a 3 ans Répondre
Bon tuto. par contre je ne comprend pas pourquoi tu fais un display:block; puisque ce sont des blocks par default? (cf.http://www.siteduzero.com/tutoriel-3-13558-mise-en-boite-partie-1-2.html)
Est ce normal?
Grafikart Il y a 3 ans - Répondre
Pour être sûr
, pas vraiment de raison...
willboys Il y a 3 ans Répondre
merci pour ce tuto tres simple a realiser sans java .
pour I.E j ai utiliser la balise css suivante
#id dd { border : no-border ;}I.E ne prenderas pas de bordur , tant pis pour lui
body>#id dd { border: 1 px silver ;}// pour tout navigateur I.E ne prenant pas body>
ci-non je declar :
a{ display : block ; border:1PX solid silver ;}
sa avait de fonctionner sous firefox
encor merci pour ce tuto . continue car ils sont vraiment tres bien expliquer et detailler
bon courage pour la suite
mstarback Il y a 3 ans Répondre
@Grafikart
Je viens du DUT SRC de Saint-Dié. Oui, ya DUT SRC et DUT SRC... Et moi ben, c plutôt DUT SRC moyen moyen bof. Pour te dire, en HTML on apprend encore les frame... Heureusement qu'il existe des blogs comme le tien, avec des gens sympas, très compétents tout en restant très pédagogues. Maintenant on est en droit de se poser la question du "mais p***** à quoi sert ce p***** de DUT ?" !
Grafikart Il y a 3 ans - Répondre
DUT SRC à béziers pour ma part, plutôt nul nul (sauf 2/3 intervenants). Rien ne vaut l'autoformation
Gohan Il y a 3 ans Répondre
Bonjour à tous tout d'abord je tien à remercier Grafikart pour ces merveilleux tutos, et je voulais ajouter que pour ceux qui ont le souci sur ie moi j'ai pallié le problème en ajoutant une classe sur le troisième lien de la liste déroulante car si on en met que deux ie ne pose aucun problème pour remonter la liste sinon autre petite astuce au-lieu de marquer lien sur le tuto mettez un nom plus grand je ne pourrais pas vous dire pk mais en tout cas sa marche pour moi. Bonne continuation a toi Grafikart et à treès bientot......Gohan
mstarback Il y a 3 ans Répondre
Juste : franchement le raton j'adore tes tutos et ils m'ont fait progresser 100 fois plus que mes 2 années de DUT SRC. Cependant je comprends pas le principe du premium pour télécharger les videos. J'ai download helper, petit module firefox et je télécharge tes videos sans me poser de question. Alors est-ce que je viole les droits d'auteur en me permettant d'accéder à tes vidéos, même lorsque je ne suis pas chez moi et connecté au net par exemple ?
Grafikart Il y a 3 ans - Répondre
Question qui revient assez souvent. Je souhaite laisser la possibilité au gens de visionner les tutoriels gratuitement et je laisserais donc les dispositifs de streaming en place malgré le problème évident que ça pose.
Non tu ne viole pas les droits d'auteur (et de toute façon je vais pas aller chercher les gens qui font ça j'en finirais pas), après c'est une question de respect vis à vis du travail des autres.
D'ailleurs tu viens de quel SRC ?
kakolak07 Il y a 3 ans Répondre
Bonsoir
Je vous remercie pour ce tuto ça ma beaucoup aidé étant donné que je n'ai pas assez de connaissance c'est un bon entrainement.
Cependant j'ai encore quelques problèmes au niveau des sous menus j'ai du texte qui est trop long donc ça ne rentre pas je ne sais quoi si vous avez une astuce .
L'autre souci c'est que je veux que lorsque je vais sur un des menus je veux qu'il y est une couleur différentes qui s'affiche j'ai essayé de modifier mais ça ne marche pas .
Est ce que vous pouvez m'aider ?
Je vous remercie d'avance
A bientôt
ishak2n Il y a 3 ans Répondre
merci bcp pour la formation
mowmow Il y a 3 ans Répondre
Merci pour ce tutoriel, je m'en suis servi comme base, j'avais des problèmes par la suite au niveau de la validation w3c par rapport à certaines choses que je voulais intégrer dans mon menu. Le problème provenant de la structure même de celui-ci.
J'ai donc suivi la même méthode pour arriver au même résultat en utilisant uniquement des div au lieu des dl dt et dd. J'arrive à une solution parfaitement fonctionnelle sur tous les navigateurs et conforme au w3c et comportant 20 lignes de css en moins.
Un grand merci tout de même pour m'avoir permis de réaliser ce type de menu sans avoir recours au javascript, chose que je cherchais depuis longtemps. Bonne continuation.
Gillale Il y a 3 ans Répondre
Bonjour et un très grand merci à grafikart pour cette aide précieuse et ces tutos. Le web comme on l'aime.
J'ai crée une page en local avec ce tuto en l'adaptant bien entendu à mes contraintes. La page est belle et fonctionne nickel sous Firefox mais sous IE7, rien à faire même avec le background imposé comme Romroyce l'a proposé et qui semble bien fonctionner chez d'autres.
J'en appelle donc à la communauté : qui est volontaire pour jeter un œil à mon css pour tenter de faire apparaitre mon menu déroulant sous IE.
Aikidolivier Il y a 3 ans Répondre
Bonjour à tous,
pour répondre à thvi et brochetta, la fermeture automatique des balises se gère dans le menu TextFX --> TextFX Setting --> Autoclose XHTML/XML tag.
Quent1du58 Il y a 3 ans Répondre
Et en mettant 0px? Car c'est toujours existant mais pas visible. C'est à essayer.
roropich Il y a 3 ans Répondre
Bonjour,
Comme quoi il y a des personnes qui sont très pédagogue, et je vous suis reconnaissant de l'être autant.
En fait c'est très simple quand c'est bien expliqué.
Merci de votre professionnalisme
Rodolphe
Fredericque Il y a 3 ans Répondre
Bonjour,
Merci beaucoup pour ce menu. Il marche à merveille sous FF, mais pour moi il ne marche pas sous IE7 (avec une config XP pro). J'ai eut beau changer les éléments comme indiqué pour rectifier les erreurs, mais le menu ne veut pas se dérouler une fois sur deux, et comme j'ai une liste assez longue en sous-menu pour un menu, je n'arrive même pas à atteindre le 4ème titre du sous-menu... (le menu s'efface toujours avant, même quand il veut bien se dérouler). Du coup, je ne pourrais pas utiliser le tuto, mais j'ai pu apprendre des choses
S'il y en a qui sont dessus et qui ont trouvé comment contourner le pb avec IE7, ce serait super de le mettre
ricos21 Il y a 3 ans Répondre
bonjour bravo pour le tuto une question quel est la taille des images que tu utilise
Merci ...
coda Il y a 3 ans Répondre
salut,
concernant le probleme du menu qui se retrouve sous le texte (à la fin du tuto) plutot que creer un conteneur en relatif , c pas possible de jouer sur le z-index de la div menu pour la mettre au dessus du texte (donc o 1er plan) ??
darkdog Il y a 3 ans Répondre
slt
je suis un débutant dans la programmation et je voulais savoir comment on fait pour déplacer la barre de menu ou on le shouaite ( par exemple a gauche ou au centre etc...)
si quelqu'un peut m'aider merci !
A+
Gabrielle Il y a 3 ans Répondre
RE:
J'ai bien appliquer les paramètres que vous conseillaient tous mais ça ne marche toujours pas pour moi.
Quelqu'un peut-il m'aider?
Merci.
Gabrielle Il y a 3 ans Répondre
Salut à tous.
Je viens d'appliquer ce tutoriel que j'ai suivi à la lettre pour commencer. Mais, sous Internet explorer, j'ai uniquement les <dt> qui s'affichent, et rien d'autre.
Quelqu'un pourrait-il me donner une solution?
Merci.
Dimix Il y a 3 ans Répondre
Super tuto comme d'abitute merci
j'ai appris pas mal de chosses
GEGE17 Il y a 3 ans Répondre
Merci à Romroyce, grâce à toi ça fonctionne sous IE. T'es un chef, Bravo !!
Angelmyheart Il y a 3 ans Répondre
Merci infiniment pour ce super tuto vidéo et sans javascript svp donc vraiment parfait :-)
Et aussi un grand merci à Romroyce qui m'a permis ENFIN de régler mon problème sur IE.
GEGE17 Il y a 3 ans Répondre
Merci, grâce à ce site, j'apprends !!
multras Il y a 3 ans Répondre
Merci bcp pour ce tuto, mais toujours il y a des problèmes avec IE6 ... pas seulement dans ce tuto de menu déroulant mais dans tous les autres tuto de CSS
Merci pour l'effort quand même, ça ma trop simplifier l'astuce
Djiins Il y a 3 ans Répondre
Love ce tuto j'ai réussi a l'adapter a mon futur site qui est en construction et je pense l'adapter en vertical prochainement pour d'autre menu
Bravo
lifywar Il y a 3 ans Répondre
vous tutos sont vraiment malade!!!
par contre lorsque c'est applicable vous devriez mettre l'exemple sur la page un peu en bas du vidéo disons comme sa on pourrais visionnez rapidement le résultat final
continuer bon bon travail
darkavatars Il y a 3 ans Répondre
Bonjour je une question apres comment le metre ou on veux?
Archange07 Il y a 3 ans Répondre
Bravo pour le tutoriel, c'est très bien expliqué.
Par contre, j'aurais aimé savoir avec précision comment centrer le menu...
Merci d'avance pour ceux qui répondront !
Mixus Il y a 3 ans Répondre
Pour la verticalité, il faut regarder du côté du paramètre float left.
Bonne chance
Et je rajoute encore un big MERCI à Grafikart pour ce tuto.
Mixus Il y a 3 ans Répondre
@ Najnouj pour le rendre vertical je ne sais pas.
Mais pour avoir une petite flèche regarde du côté
de la propriété line-style dans les définitions dl ul de
la feuille de style.
Pour ceux qui sont intéressés, en retirant l'id menu
et en remplacant par des couleur de fond 'background'
j'ai résolu tout les problèmes de compatibilité avec IE6.
Je me suis même offert de centrer le tout en l'incluant dans une table.
Najnouj Il y a 3 ans Répondre
Merci pour ce tuto c'est vraiment bien expliqué.
J'aimerai bien savoir comment je fais pour rendre ce menu verticale avec un petit flèche à droite pour les sous-menu .
merci encore et bonne journée.
Mixus Il y a 3 ans Répondre
Merci RomRoyce,
En effet ajouter un background sur les dd ul li a fait fonctionner le tout.
Sans même changer les marges.
Mais surtout merci pour le tuto, et si il faut prendre le temps de le taper,
et bien ça vaut le coup.
Mille merci encore
dolfant Il y a 3 ans Répondre
Super tuto !
Pour le reste Romroyce a raison, imposer un background règle le problème sur IE.
Romroyce Il y a 3 ans Répondre
Salut,
Ce tuto CSS est génial comme le reste de vos tutos. Je m'entraine dessus pour créer un menu déroulant.
Sous IE j'ai eu le même problème et c'est très embêtant.
Cependant je crois avoir trouvé une solution. Ce qu'il faut faire c'est ABSOLUMENT imposer un background dans le
#menu dd ul li a{background:######;} et enlever toute les marges sur #menu dd ul{margin:0;padding:0;}
et #menu dd ul li{margin:0;padding:0;}.
Voilà pour moi ça fonctionne, faites moi savoir si ça fonctionne pour vous...
Encore merci.
Krys Toff Il y a 3 ans Répondre
Super tutoriel, j'ai appris des trucs utiles, merci. ^_^
Plutôt que l'astuce d'une bordure en bas de couleur identique au fond du menu suite au problème d'IE, est-ce qu'une bordure haut et bas et un "border-collapse: collapse" ne fonctionnerait pas ? J'avoue ne pas avoir essayé cette propriété sur autre chose qu'un tableau, faudra que je teste ça ce week-end.
Pour répondre à Skydoo et Naise, la propriété "hover" ne s'applique que sur les liens directement dans les anciennes versions d'IE, le problème vient de là.
Il faudra alors utiliser un pseudo-commentaire et mettre une fonction javascript à la place :
<!--[if IE]>
mettre ici le programme javascript ou le lien vers le fichier .js correspondant
<![endif]-->
Les autres navigateurs (ceux qu'il est conseillé d'utiliser, comme FireFox par exemple) considèreront cette partie comme un commentaire mais IE appliquera les infos situées dans ce pseudo-commentaire.
A mon avis, il faudra aussi créer un fichier css spécifique pour IE (appelé par un pseudo-commentaire de la même façon dans le header de la page html) en remplaçant le "hover" par le nom de la fonction javascript pour les sous-menus.
Skydoo Il y a 3 ans Répondre
Bonsoir (ou plutôt bonjour )
Merci pour cet excellent tuto, très bien détaillé. Tu expliques tout, et on comprend très bien.
Par contre moi j'ai encore un problème sur IE7. Tout marche bien, jusqu'à ce qu'on fasse :
dl dd
{
display: none;
}
dl:hover dd
{
display: block;
}
Sous FF ça marche il n'y a pas de soucis, mais sur IE7 mes menus ne s'ouvrent pas lorsque j'y passe dessus. J'ai essayé quelques modifications dans le css mais rien à faire, ça ne marche pas.
Si quelqu'un a eu le même problème et a trouvé la solution, je suis prenant :D
En tout cas encore merci pour ce tuto ++
Thibault Il y a 3 ans Répondre
@ Naise : Ton menu fonctionne très bien sur FIrefox, IE 6 et IE 7 !
Encore merci pour ces tutos !
Grafikart Il y a 3 ans Répondre
@Naise : Sous ie 7 ça fonctionne bien chez moi. Je n'ai pas IE6 donc je ne pourrais pas te dire mais le code de mon tutoriel ne prend pas en compte IE6 donc il faut que tu trouve un autre moyen de l'adapter.
naise Il y a 3 ans Répondre
j ai fait le tutos est ca donne sa:
http://www.transphotographiques.com/include/menu-2009/menu.html
pour le site on fait un import en java mais sous IE les block ne se déroule pas !Une solution?
man11110000 Il y a 2 ans
Bonjour,
Tout dabord, un grand bravo et merci pour cet excellent tuto, et je pése mes mots!
Ensuite, pour ceux qui rencontrent des problèmes avec IE, je leur conseil de voir le lien de Naise, cité plus haut, de cliquer droit sur la page et "afficher source".
Cela vous permettra d'obtenir un aperçus du code qui fonctionne sous IE.
a vous d'ajuster à vos besoins.
Merci Naise
Merci Grafi
man11110000 Il y a 2 ans - Répondre
Bonjour,
Tout dabord, un grand bravo et merci pour cet excellent tuto, et je pése mes mots!
Ensuite, pour ceux qui rencontrent des problèmes avec IE, je leur conseil de voir le lien de Naise, cité plus haut, de cliquer droit sur la page et "afficher source".
Cela vous permettra d'obtenir un aperçus du code qui fonctionne sous IE.
a vous d'ajuster à vos besoins.
Merci Naise
Merci Grafi
Holoubaloo Il y a 3 ans Répondre
Tuto très intéressant en effet mais qui ne marche pas sous IE...6.
Une solution ? Car malgré le fait que peu de personne utilise encore cette version du navigateur on ne peut tout de même pas les ignorer.
naise Il y a 3 ans Répondre
merci !putain de merde comment je suis heureux d'être tombé sur se lien hyper "wicked". Dieux existe est je pense qu'il fait des tutos en vidéo sur le net! Je vous chope la vidéo et je vais faire sa tranquillement.
Gcyrillus Il y a 3 ans Répondre
Bonjour
Tutoriel sympas et clair , il a vraiment l'avantage d'etre a la portée des débutants .
L'héritage est le principe de base de la mise en forme , bien qu'il ne soit pas toujours aisée de tout apprécier dans sa globalité , il est bon de l'avoir a l'esprit (un text-align:center sur body et tout les éléments de la page hériterons de cette valeur par défaut).
Pour les problémes de largeur de lien , il suffit de faire hériter en cascade les largeurs du parents .
ex: dl {width:150px;}
dt , dd , ul , li , a {display:block;width:100%;margin:0;padding:0;text-align:center;}
dl fait 150px -> dt et dd 100% de dl -> ul 100% de dd -> li 100% de ul et enfin a 100% de li .
Si la chaine se casse (ex li sans width ) , pour <a> se sera 100% de rien , plus aucunes valeurs a appliquées.
Le display:block; ecrase le display:list-item;(par defaut) des li et elimine les puces .(a l'inverse on peut coller une puce a un élément quelconque (titre , paragraphe , lien , etc ... en lui attribuant un display:list-item;)
les marges internes et externes sont remises a zéro sur l'ensemble des élements et les textes sont centré .
Dans IE , les li et a si elles sont doté d'une largeur (et display:block) ne devraient plus avoir de marges inférieurs indésirable (défaut de layout ,caractéristique de IE)
Le résultat de cette demo en ligne serait appréciable pour les faux débutant (136 mo contre quelques KO , y' a pas photos pour les p'tites connexions ) et permettrait éventuellement de mettre en évidence et corriger d'éventuelles bugs ou erreur typographiques
Dans le tuto je vois : position:abolute; -> erreur de typo , c'est absolute (avec le s)
Tester dans FF et IE7 dans le tutoriel, cette erreur passe inaperçue car la hauteur du conteneur parent est fixé a 40px , il ne s'etire donc pas et ne repousse rien (a se demander finalement si le positionnement absolu est nécessaire a part pour une rétro compatibilité avec des vieux navigateurs !? )
Bonnes fêtes
Communauté informatique Il y a 3 ans Répondre
Super tutoriel ! Merci beaucoup ! Dommage qu'une version HTML n'existe pas, je préfère aux vidéos... Mais bon, je vais pas me plaindre étant donné que ce tutoriel est super :D
Thibault Il y a 3 ans Répondre
Salut,
Merci pour ce tuto si parfait ! Pour ce qui est du problème avec IE, la seule solution mieux que j'ai trouvé, c'est de ne pas donner de hauteur à la liste qui déroule... Ca marche très bien. Par contre pas le choix de la hauteur
Bonne nuit !
foued Il y a 3 ans Répondre
Une bonne idée de ne pas mettre les fichiers source, comme ça ils apprennent mieux en retapant les codes,
Mih.o2 Il y a 3 ans Répondre
Bonjour, je lisais les commentaires et je pensais que vous pouriez laissez les sources des tuto' mais en mettant des copyright sur vos images.. Ca serait simpa car j'ai pas le courage de tout recopié
a bientot
blouh Il y a 3 ans Répondre
Je cherche, mais impossible de retrouver le nom de l'éditeur pour coder sous mac que tu m'avais dit...
si tu peux me donner le nom par mail.
Thx
brochetta Il y a 3 ans Répondre
comme la dit thvi on fait comment pour activer la fermeture automatique de balise ?
Nesta Il y a 3 ans Répondre
Effectivement, c'est plutôt pas mal de pouvoir télécharger l'exemple pour modifier nos petites erreurs ...
Certains vont surement en abusé, mais il faut penser aux autres qui essayent tant bien que mal de faire d'eux même le projet ^^
Merci pour ce tuto en tout cas
Dj W@rM@n Il y a 3 ans Répondre
Oui d'accord, je comprends très bien mais pour la taille des images par exemple. Car la bande supérieure créée par les menus ne va pas jusqu'aux bords de ma page.
Grafikart Il y a 3 ans Répondre
@DJ WarMan : Effectivement, j'ai arrêté de donner les sources car pas mal de personnes prennent les sources directement. Le but et d'adapter les tutoriel en fonction de ses besoins et non pas de suivre le tutoriel sans y mettre sa petite touche personnelle.
aseg Il y a 1 an - Répondre
oui, mais c'est aussi plus facile de suivre un tutoriel avec les sources sous les yeux.
Dj W@rM@n Il y a 3 ans Répondre
Bonjour,
Tu ne mets pas en ligne tes fichiers? Car c'est bien d'avoir une idée des dimensions utilisées.
Merci pour la vidéo!
Dj W@rM@n Il y a 3 ans Répondre
Bonjour!
Merci pour ce super tuto encore une fois mais à quand la vidéo téléchargeable? Viittte.
John11400 Il y a 3 ans Répondre
J'ai essayé de mettre en pratique ce tuto mais ca ne marche pas.
Harry Il y a 3 ans Répondre
J'adore ton site, que dire de plus ? De bonne astuce, un tuto sur un espace membre ferait découvrir le SQL peut être ^^
Bravo pour ton site !
Harry
ST.PhotoGraphiste Il y a 3 ans Répondre
Merci, c'est exactement le tuto qui me faut et un grand bravo pour le
nouveaux Design (Mr Raton à grandit ;-)
Un grand merci Grafikart.
blouh* Il y a 3 ans Répondre
Merci Raton... euh Grafikart, d'être là pour nous =).
thvi Il y a 3 ans Répondre
Bonjour,
Toujours aussi efficace quant à la compréhension des tutos réalisés.
Je trouve bien pratique la fonction de fermeture automatique des balises HTML. Comment l'activer sur Notepad++ ?
Bonne continuation
Grafikart Il y a 3 ans Répondre
@Mika: En effet, j'ai mal écris il faut bien mettre position:absolute;
amoric69 Il y a 2 ans - Répondre
Salut,
Bien beau tout ca,
mais est-ce compatible avec les différentes versions d'IE ?!
Pas sure...
Bien sympa de ta part en tous cas,
Merci pour ton taf !!
Mika Il y a 3 ans Répondre
Super tuto.
Juste un petit truc pour qu'il soit nickel. A la fin, tu as mis #menu{ position: abolute; }
Je crois qu'il manque un s ;-)
Sinon trés bon niveau que ce soit pour ce tuto ou le site/blog dans l'ensemble.
A.ryan Il y a 3 ans Répondre
Et peut-être un margin-top pour le texte.
JLou Il y a 3 ans Répondre
Super tuto. Bien expliqué, mais à la fin, j'aurai plutôt utilisé un z-index pour faire passer le menu par dessus le corps de la page. Question de clarté ^^. J'avais déjà vu l'astuce, mais sans m'attarder, là plus de questions à se poser :p
Lefoudusucre Il y a 3 ans Répondre
C'est vraiment genial, tout tes tutos sont supers et comprehensibles et un nouveau design du site qui dechire...
Je viens d'utiliser ce tuto et maintenant je m'en sers pour mon site merci beaucoup (j'ai changer des trucs t'inquiete ^^)
tginja Il y a 3 ans Répondre
Merci j'ai longtemps cherché des tutos pour réaliser ces menus donc ça me fait très plaisir car les tiens sont beaucoup plus compréhensible
A.ryan Il y a 3 ans Répondre
Merci bien, je ne connaissais ça qu'en javascript
McClane Il y a 3 ans Répondre
Merci pour ce tutoriel tout en image !
Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.
Grafikart est associée à l'Agence web Idéematic pour vous proposer un concentré de compétences en :
Undweed Il y a 5 jours Répondre
Pour ma part, au moment ou je met "display:none" dans dl dd mon texte se colle.