Titre: Menu en Css
Posté par: Ellenak le le 24-05-2005 a 18:12:37
Voilà, j'aimerais faire un menu en Css ==> http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-dynamique-sans-prechargement
J'ai suivis le tutoriel, fais le copiez coller, masi j'arrive a un resultat avec -menu 1
-menu 2
-etc...
Et J'aimerais faire un menu dans le genre de izidoo.com
voici mes images,
( menu.jpg ) et
( menu_cours.jpg )
J'aime vraiment bien le menu de izidoo, alors j'aimerais m'entrainez pour arrivez a faire un menu pareille, donc si vosu avez des sites, ou des codes source, n'hésitez pas a me repondre ;) |
Titre: Re:Menu en Css
Posté par: Ellenak le le 25-05-2005 a 13:23:45
J'ai réussi a le faire mais le problème, c'est que mon texte est a cotez de mon image
voici le css
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
left: 20%;
top: 50px;
background: transparent url(menu.jpg) top left no-repeat; /* arrière-plan général du menu */
height: 120px;
width: 250px;
text-align: center;
}
li {
display: inline; /* correction pour IE5 et IE5.5 */
}
li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 20px;
width: 300px;
line-height: 20px; /* hauteur de ligne pour éviter les paddings */
color: #E2C6BA;
font-size: 12px;
font-family: georgia, serif;
text-decoration: none;
}
li a:hover {
color: #43271B;
background: transparent url(menu-eclair.jpg) top left no-repeat;
}
a#toshop:hover {
background-position: 0% -70px; /* décalage de l'arrière-plan pour chaque bouton */
}
a#html:hover {
background-position: 0% -110px;
}
a#menu3:hover {
background-position: 0% -150px;
}
a#menu4:hover {
background-position: 0% -190px;
}
a#menu5:hover {
background-position: 0% -230px;
}
et le html :
<html>
<head>
<title></title>
<link rel="StyleSheet" type="text/css" href="menu.css">
</head>
<body>
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>
</body>
</html>
merci de m'aidez au grand connaisseur de css ;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|