18041 sujets

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

Découper un menu [résolu]

Bonjour a tous

Suite à l'efficacité de vos réponses concernant mon probleme de résolution, je reviens vers vous poiur un petit probleme,

voila j'aimerai faire un menu découpé commme sur Alsa creation, mais en vertical.
j'ai en effet un fond d'écran et un effet lorsque la souris passe sur les bouton, mais je n'arrive pas a mettre cepetit espace blanc comme sur alsa...
On dirai que ce sont plusieur rectangle, je veux cet effet

regarder mon code :

body {
background-color: #FFFFFF;
}
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 */
top: 50px;
left: 20%;
background: transparent url(../Mes%20documents/ANTHOSITE/images/bambou.jpg) no-repeat left top;	/* arrière-plan général du menu */
width: 160px;
padding-top: 57px;
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: 30px;
width: 160px;
color: #660000;
font-size: 17px;
font-family: georgia, serif;
text-decoration: none;
line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}
li a:hover {
color: #fff;
background: transparent url(../Mes%20documents/ANTHOSITE/images/bambou.jpg) top left no-repeat;
}
a#menu1:hover {	/* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -327px;
}
a#menu2:hover {
background-position: 0% -357px;
}
a#menu3:hover {
background-position: 0% -387px;
}
a#menu4:hover {
background-position: 0% -417px;
}
a#menu5:hover {
background-position: 0% -447px;
}
a#menu6:hover {
background-position: 0% -477px;
}
a#menu7:hover {
background-position: 0% -507px;
}
.Style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
</head>

<body>
<ul>
	<li><a href="#" title="menu1" class="Style1" id="menu1" accesskey="1">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>
	<li><a id="menu7" title="menu7" accesskey="7" href="#">Menu 7</a></li>
</ul>

<div style="position: absolute; bottom: 0pt; left: 20px; color: black;">

Modifié par kk8ete (29 Sep 2006 - 16:07)
Tu parles de la bande blanche qui s'affiche (en dessous des liens) lorsque tu passes le curseur de ta souris sur les liens en haut du forum ?
non celui du haut, entre accueil, profil, aide...

il y a un petit espace qui font qu'on dirait qu'il s'agit de rectangle seul.
salut,

2 solutions :
1. ajoute un peu de marge à gauche et à droite de chacun des items de ta liste:
li {
margin-left:1px;
margin-right:1px;
}
2. ou bien, ce qu'ils ont fait eux (i.e. alsacréations), :
li {
border-right: 1px solid white;
}
Sujet clos
Aller à