28172 sujets

CSS et mise en forme, CSS3

Quel méthode apliqué pour ce menu [javascript!?]

Bonsoir, je viens vers vous car je rencontre quelques difficultés pour un menu que j'aimerais faire,

Ma question est donc la suivante, quel serait la meilleur technique pour faire ce menu?

upload/15445-nenuheader.png

J'ai posté dans le forum 'javascript' car j'ai pensé qu'il y en n'aurait besoin mais si c'est possible de le realiser qu'avec du css/xhtml ce serait aussi bien, pour info, je connais un peu les feuilles de styles mais pas javascript ou ajax même si j'ai déjà décortiquer quelques script.. Smiley sweatdrop

mon souci c'est qu'avec css, je n'arrive pas à integrer le fond des boutons et le petit rond qui se noirci quand on passe la souris sur le bouton.

pour ce menu, j'ai 5 images, 3 pour le background et deux pour le petit rond
pour le fond c'est les arrondies à gauche et à droite et le milieu de 1px de long 'no-repeat'.

Voilà, j'espère que vous pourrez me diriger, merci d'avance Smiley cligne
Modifié par sheitanEB (11 Jun 2008 - 23:21)
Merci koala pour ta réponse, effectivement avec la page que tu as cité j'ai déjà tout le fond des boutons qui est résolu,
Par contre pas moyen de mettre le petit rond noir à droite,

du coup un ami ma dit qu'il fallait mettre du javascript pour le faire, il ma donc donné un exemple
et là le petit rond s'affiche mais en pointant ma souris sur le bouton il ne se grise pas, il faut passer la souris sur le petit rond, normal puisque le javascript n'est pas dans li, bien sur j'ai essayer mais sa ne fonctionne pas non plus Smiley angry

je reviens donc vers vous en espérant avoir quelques pistes pour pouvoir terminer ce menu.

je vous met le code entier de la page et les images puisque je fait le menu en local avant de l'integrer à ma page web.

Merci Smiley prie 


<html>
<head>
	<title>Trop complqu&eacute; ce menu...</title>
  <style type="text/css">
body {
      background:#b9b7a3;
      margin:0;
      padding:0;
      font-size: 12px;
      font-family: verdana;
      } 
#menu1 {
      float:left;
      width:100%;
      background:#d1d2b6;
      line-height:normal;
      border-bottom:1px solid #4d4d4f;
      }
#menu1 ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
#menu1 li {
      float:left;
      background:url("left.gif") no-repeat left top;
      margin-right:2px;;
      padding:0 0 0 9px;
      }
#menu1 a {
      float:left;
      display:block;
      background:url("right.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      color:#4d4d4f;
      }
#menu1 a {float:none;}
#menu1 a:hover {color:#900000;}
/*
.current a {
      background:url("off.gif") right top no-repeat;
      width:13px;
      height:8px;
      }
.current a:hover {
      background:url("on.gif") right top no-repeat;
      width:13px;
      height:8px;
      }
*/
  </style></head>
<body>
<div id="menu1">
  <ul>
<li><a href="#" title="">testage2&nbsp;&nbsp;<img border="0" src="off.gif" 
onmouseover="this.src='on.gif';" onmouseout="this.src='off.gif';" alt="" /></a></li> 
    <li class="current"><a href="#">Portail</a></li>
    <li class="current"><a href="#">Index</a></li>
    <li class="current"><a href="#">FAQ</a></li>
    <li class="current"><a href="#">Groupes</a></li>
    <li class="current"><a href="#">Membres</a></li>
    <li class="current"><a href="#">Profil</a></li>
    <li class="current"><a href="#">Messagerie</a></li>
    <li class="current"><a href="#">Livre D'Or</a></li>
  </ul>
</div>
</body></html>


puis les images:

http://img514.imageshack.us/img514/8074/leftth4.gif left.gif
http://img247.imageshack.us/img247/2660/rightoa3.gif right.gif
http://img137.imageshack.us/img137/432/offjg5.gif off.gif
http://img137.imageshack.us/img137/8282/onyg4.gif on.gif
Sujet clos
Aller à