18041 sujets

Questions générales et questions de débutants

Mettre mon menu verticale > Horizontale [Résolu]

Bon à tous,

Je suis novice en css; j'ai donc réussis à partir de plusieurs tutos à réaliser mon menu css; en revanche il est actuellement verticale, et j'aimerais le mettre horizontalement; voici mon code :

CODE CSS :

/* Menu header */
ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 0px 0;
	padding: 0;
	vertical-align: baseline;/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 135px ;
	line-height: 23px ;
	color: #000 ;
	text-indent: 20px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(IMG/graphisme/bouton_gris.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px ;
}

ul#menu li a:hover
{
	background: url(IMG/graphisme/bouton_vert.jpg) no-repeat 0 0px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0px  ;
}


Mon code de ma page :
<ul id="menu">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Actualit&eacute;</a></li>
	<li><a href="#">Classements</a></li>
	<li><a href="#">Photos</a></li>
	<li><a href="#">Podcast</a></li>
	<li><a href="#">Wallpaper</a></li>
	<li><a href="#">Forum</a></li>
</ul>


Votre aide me serait d'une grande utilité...j'ai cherché, mais sans succés; donc j'ai finalement décidé de poster ici Smiley cligne
Modifié par twin (30 Jul 2007 - 11:47)
En fait, je ne souhaite pas utiliser de javascript, mais uniquement un code css.
Je pense qu'il me manque juste quelques lignes dans mon css pour convertir mon menu verticale à l'horizontale...
Oui justement, le javascript n'est pas la pour le mettre horizontale...

Regarde le css, et essai d'utilise float: left; dans ton li pour que tout se calle sur la gauche.
Modifié par Halindel (30 Jul 2007 - 11:39)
Et voilà...
Merci pour ton aide et ta réativité Halindel.

En tous cas, génial ce site et ce forum !
twin a écrit :
Et voilà...
Merci pour ton aide et ta réativité Halindel.

En tous cas, génial ce site et ce forum !

J'en conclus que ton sujet est à considérer comme [Résolu]
Modifié par Cygnus (30 Jul 2007 - 11:49)
Sujet clos
Aller à