Aller au contenu

menu avec 2 coins


conan

Sujets conseillés

Bonsoir,

Je suis en train de faire un menu horizontal qui doit comporter 2 coins et je n'y arrive pas depuis un petit moment.

En fait j'ai donc un fond de menu ( image qui se répéte )

un coin à gauche qui est arrondi vers le bas ( image )

un coin à droite qui est arrondi vers le bas ( image)

les 2 coins ont un arrondis opposés

Mon menu généré en Php ( $menu = les différent <li></li>)

'<div id="menu"><div class="menuleft"> </div><ul>'.$menu.'</ul><span class="menuright"> </span></div>';

Voici mon CSS ( les couleur sont temporaire ;-) c'est pour mieux me reperer )

#menu
{
 background-image: url(../img/bgmenu.png);
}

#menu .menuleft
{
background-image: url(../img/menuleft.png);
width:22px;
background-color: Blue;
float:left;
}

#menu .menuright
{
background-image: url(../img/menuright.png);
width:22px;
background-color: Blue;
float:right;
}

#menu ul
{
margin:0;
padding: 0 4px;

height:35px;
border:none;
list-style: none;


}

#menu ul li
{


display: inline;

}

#menu ul a
{
text-decoration: none;
padding: 2px 4px;
margin:0 3px;
border:1px solid red;
}

#menu ul a:hover
{
background : Orange;
}

merci de votre aide !

Lien vers le commentaire
Partager sur d’autres sites

Bonjour conan,

Je ne comprends pas quel est le problème. Aurais-tu une URL à nous donner ? ou au moins une capture d'écran ?

Merci :)

Lien vers le commentaire
Partager sur d’autres sites

Le mieux est de mettre deux images une avec le fond ET le coin haut et l'autre avec le meme fond ET le coin bas et appliquer l'une en background du ul et l'autre en background du div menu et le tour est joué, plus simple encore si le background est uni !

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
Bonjour conan,

Je ne comprends pas quel est le problème. Aurais-tu une URL à nous donner ? ou au moins une capture d'écran ?

Merci :)

<{POST_SNAPBACK}>

voici l'url en question : En dev

login/pwd : vince/test

Le menu en question est celui se situant en desous des "blocs" encadré en rouge, j'ai réussi à placer le coin à droite en margin négative mais c'est pas parfait, sous IE c'est pas du tout pareil !

Sinon tant que j'y suis :P depuis hier j'ai un peu le même problème avec ma barre "Texte de demo" dans laquelle je souhaiterais mettre à droite le bloc de la flèche d'ouverture.

merci de votre aide.

Modifié par conan
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...