Menu css

Bonjour à tous,

depuis la mis en place d'un menu css déroulant j'ai un problème pour bien centrer le texte.
Comme vous le voyez le texte est diriger vers le haut:

http://img267.imageshack.us/img267/4026/menucss.jpg

le css

#menuob a {color: #525050;}

*{
	margin:0;
	padding:0;
}
#menu{
	width:280px;
	margin:0px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:27px;
	width:280px;
	padding:2px 0;
	background:#transparent;
	color:#FFF;
}
.sousmenu{
	height:27px;
	width:280px;
	padding:1px 0;
	background-image:url(http://img694.imageshack.us/img694/8994/imagehaut.jpg);
	color:#transparent;
}

.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#transparent;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
        color:#000452;
	background-image:url(http://nsm03.casimages.com/img/2010/08/01/100801020504375556496386.jpg);
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#transparent;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
        color:#52004f;
	background:#transparent;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background-image:url(http://img20.imageshack.us/img20/5531/menusurvol.jpg);
}

je vous remercie d'avance pour votre aide
Modifié par niou (07 Aug 2010 - 17:33)

Hello niou et bienvenue sur le forum ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

c'est fait désolée ^^

Merci. Maintenant il ne manque plus que le code html correspondant à ton css pour pouvoir tester (cela dit l'idéal serait un lien vers une page en ligne).

Pas de soucis

code html :

<div id="menu">
<div id="menu1" class="menu" onclick="afficheMenu(this)">
      <a>Animes en cours</a>
    </div>
<div id="sousmenu1" style="display: none;">
<div class="sousmenu">
        <strong><a href="#">test</a></strong>
      </div>
</div>
<div id="menu2" class="menu" onclick="afficheMenu(this)">
      <strong><a>Animes Termin&eacute;s</a></strong>
    </div>
<div id="sousmenu2" style="display: none;">
<div class="sousmenu">
        <strong><a href="#">test</a></strong>
      </div>
</div>
<div id="menu3" class="menu" onclick="afficheMenu(this)">
      <strong><a>Streaming</a></strong>
    </div>
</div>
<div id="sousmenu3" style="display: none;">
<div class="sousmenu">
        <strong><a href="#">test</a></strong>
    </div>
<script src="http://kikkai.tonsite.biz/functions.js" type="text/javascript">
</script>
</div>

Bon alors le principe est de mettre les liens (A) en display:block (ce que tu as fait) pour qu'il prennent toute la largeur de leur conteneur. Ensuite il suffit de ne pas fixer de hauteur (height) à ce conteneur et de préférer appliquer un padding aux liens (par exemple padding:4px) comme ça tu es sûre que le texte sera bien centré verticalement.

Par contre ton code pose plusieurs problèmes :
* tout d'abord il est d'usage d'utiliser le trio UL / LI / A pour faire des menus. Parce qu'on peut considérer qu'un menu est une liste de liens mais aussi parce que si les CSS sont désactivés le rendu reste correct.
* ensuite tes sous-menus sont en display:none et ne s'affichent que sur un évènement onclick JavaScript. Cela veut dire que si le JavaScript est désactivé/indisponible on ne pourra jamais y accéder.

Je t'invite à lire :
* Créer des menus simples en CSS.
* Créer un menu déroulant “accordéon” avec jQuery.

OK merci je vais voir ça, c'est un peu embêtant faut que je refasse toute ma liste ^^'
mais apparemment ça vaut le coup

niou a écrit :
mais apparemment ça vaut le coup

Oui.

Ça fait deux jours que je suis dessus.
J'ai lu les articles plusieurs fois et j'ai fais des tests.

Je me demande si c'est possible de le faire sur overblog

La base html et le css j'y arrive c'est juste du copier coller toute façon ^^
je pense pas avoir de problème pour faire des modifications après ^^

par contre le code javascript je sais pas.
installer le jquery il y a pas de soucis je peux l'héberger chez un autre hébergeur

mais d'après ce que j'ai compris je suis censé copier ce code dans la balise head
sauf que sur le blog j'ai le css puis les module que je peux editer en html

Donc ou le mettre

j'ai fait le test dans les deux cas ça a pas marché.

Désolé je suis un peu débutant .
Modifié par niou (10 Aug 2010 - 02:28)