Menu en Css - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Menu en Css

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Menu en Css (Lu 818 fois)

Menu en Css
« sur: le 24-05-2005 a 18:12:37 »

Ellenak
Membre récent

Hors-Ligne

Sexe: Male

Messages: 57

tadzammmm

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

Rapporter au modérateur

Ellenak-graph.tk PoWaaaaaaaaa

Re:Menu en Css
« Répondre #1 sur: le 25-05-2005 a 13:23:45 »

Ellenak
Membre récent

Hors-Ligne

Sexe: Male

Messages: 57

tadzammmm

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