28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit soucis et j'espère que vous pourrez m'aider. J'essaye de faire un menu bien simple, avec une image comme background. Mon image a les deux extrémités rondes. Alors ce que j'ai fais c'est couper les 2 extrémités et une partie du milieu. J'essaye de les réunir pour former un tout sous un menu. Je procède ainsi pour ne pas à avoir à créer une image pour chaque menu, car y en a qui sont plus long que d'autre.

Je ne sais pas si c'est la bonne façon de faire non plus étant pas très familiarisé avec le css.

Je vais poster mon code espérant que ça soit utile pour me dépanner. Le html


<ul id="menu">
            	<li class="active"><a href="#" class="left">&nbsp;</a><a href="#" class="middle">Accueil</a><a href="#" class="right">&nbsp;</a></li>
                <li><a href="#" class="left">&nbsp;</a><a href="#" class="middle">Accueil</a><a href="#" class="right">&nbsp;</a></li>
                <li><a href="#" class="left"></a><a href="#" class="middle">Accueil</a><a href="#" class="right"></a></li>
                <li><a href="#" class="left"></a><a href="#" class="middle">Accueil</a><a href="#" class="right"></a></li>
          </ul>



LE css



#menu
{
	margin-left:20px;
	text-align:center;
	height:52px;
	width:100%;
	overflow:hidden;
}

#menu li
{
	float:left;
	padding:0;
	height:52px;
	margin-bottom:0;
	margin-top:-2px;
}

#menu li a
{
	float:left;
	text-align:center;
	height:52px;
	margin-left:17px;
	line-height:50px;
}


#menu li.active a.left, #menu li a.left:hover
{
	float:left;
	background:url(../images/menu-left.jpg) no-repeat bottom left;
	height:52px;
	width:17px;
	
	
}

#menu li.active a.middle, #menu li a.middle:hover
{
	float:left;
	background:url(../images/menu-middle.jpg) repeat-x bottom left;
	height:52px;
	position:relative;
	left:-17px;
	
}

#menu li.active a.right, #menu li a.right:hover
{
	float:left;
	background:url(../images/menu-right.jpg) no-repeat bottom left;
	height:52px;
	width:21px;
	position:relative;
	left:-34px;
	
	
}


Quand mon menu est actif ca va mais sur les hover c'Est le bordel.

MErci d'Avance
Je vous joins les 3 images pour donner une idée
upload/19442-menu-left.jpg upload/19442-menu-middl.jpg upload/19442-menu-right.jpg