Bonsoir,
ElMoustiko a écrit :
Bah tu met tout simplement un ID différent pour chacun des menus, et tu met en forme en fonction de l'ID...
Merci ElMoustiko, mais je n'ai pas bien compris la manip, un petit exemple serait le bienvenu.
Voici le code (tuto Alsacréation) que je veux insérer dans mon menu gauche.
Code CSS :
dl { /* positionnement du cadre, que vous pouvez modifier */
position: absolute;
left: 50px;
top: 20px;
width: 275px; /* largeur du cadre, selon votre image de fond */
}
dl, dt, dd { /* suppression de toutes les marges et paddings */
margin: 0;
padding: 0;
}
dl { /* arrière-plan par défaut sur l'ensemble du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px; /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}
dt { /* définitions du titre du cadre */
height: 40px;
background: url(haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
dd {
padding: 0 20px 0 10px; /* gestion des espaces internes du cadre */
text-align: justify;
background: url(milieu.gif) top left repeat-y; /* arrière-plan intérieur */
}
Et voici le code HTML complet :
<body>
<dl>
<dt>Mon cadre joli</dt>
<dd>Lorem ipsum dolor sit amet, bla bla bla bla...</dd>
</dl>
</body>
Revoir le résultat obtenu
Variante : la création d'un menu
Cette technique est également tout à fait adaptée à la création d'un menu entouré de cadre.
Il suffit pour cela d'utiliser les éléments de liste <dd> pour chaque item de menu
Et voici le code HTML adapté à un menu (notez l'utilisation des accesskey pour faciliter l'Accessibilité aux utilisateurs sans souris) :
<body>
<dl>
<dt>Mon menu joli</dt>
<dd><a href="#" title="menu1" accesskey="1">Menu 1</a></dd>
<dd><a href="#" title="menu2" accesskey="2">Menu 2</a></dd>
<dd><a href="#" title="menu3" accesskey="3">Menu 3</a></dd>
<dd><a href="#" title="menu4" accesskey="4">Menu 4</a></dd>
<dd><a href="#" title="menu5" accesskey="5">Menu 5</a></dd>
</dl>
</body>
et voici Mon code déjà inséré dans mon head.
Code CSS:
/* défintion des menus déroulants */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 18%;
left: 30%;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
Float: left;
width: 7em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #c4ceee;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #f5f5fc;
}
#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: #babdec;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
Et voici mon code XHTML dans head:
<div id="head1">
<div style="position:absolute; top:15px; left:130px">
<A HREF="mailto:jean-marie.valtier@laposte.net ?SUBJECT=question concernant le site HTML">
<img src="design\2_05.gif" align="left" width="80px" height="60px" border="2" name="Mon e_mail" alt="Ecrivez moi" >
</img></A>
</div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">XHTML</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Doctype</a></li>
<li><a href="#">Texte</a></li>
<li><a href="#">images</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Conclusion</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">CSS</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Blocs</a></li>
<li><a href="#">Texte</a></li>
<li><a href="#">images</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Conclusion</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">JavaScript</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</div>
Peut-être veut-tu dire qu'il me suffirait de rebaptise mon #menu en #menu
1
