Problème centrage de menu

Résolu
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -  
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Tout est dans le titre... je n'arrive pas à centrer mes menus...

Voici les codes : 

	<div id="menu">

		<ul>
			<li><a href="http://#">menu 1</a></li>
			<li><a href="http://#">menu 2</a></li>
			<li><a href="http://#">menu 3</a></li>
			<li><a href="http://#">menu 4</a></li>
			<li><a href="http://#">menu 5</a></li>
			<li><a href="http://#">menu 6</a></li>
		</ul>
	</div>
	<!-- end #menu -->


et le css : 

#menu {
}

#menu ul {
	float: center;
	margin: 0px;
	padding: 0px 40px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	float:left;
	width: 113px;
	height: 26px;
	padding: 5px 0px 0px 0px;
	background: url(images/homepage03.gif) no-repeat top;
	text-decoration: none;
	text-transform: lowercase;
	text-align: center;
	letter-spacing: -1px;
	font-size: 13px;
	color: #FFFFFF; 
        margin:0;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active a {
	background-image: url(images/homepage04.gif);
	color: #555555;
}


Un grand merci d'avance

A voir également:

18 réponses

Réponse 1 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
salut ;-)))))

ok je t ai fais ca vite fait !

2 ,3 petites choses que j ai modifier ,

1 : correction de 3 conditionel IE que je trouvais bizares en <!--[if gte IE 6]> , donc ajout de 3 balises de fermeture </a> !

2 :changement du curseur default pour la main sur les liens , donc ajout de la class="nogo" sur les span qui n ont pas de liens mais ouvre un sous menu , pour repasser le curseur a default ( a fignoler peut etre pour autre chose que sur les span , mais pas le temps et ca fonctionne comme ca , a toi de chercher si tu veux changer ;-)) )!

j ai mis les images de bg , les dimensions et j ai centre !! regarde les commentaire que j ai mis dans le css !!

CSS 
#menucentre{
  width:470px;     /* A MODIFIER SI TU AJOUTE OU ENLEVE DES MENU (pour la : 113px X 4 menus = 452px + les marges et padding = a peut pres 470px ) */
  margin: auto;

}


ul.pureCssMenu ul
{
	display: none;
}
ul.pureCssMenu li:hover>ul
{
	display: block;
}
ul.pureCssMenu ul
{
	position: absolute;
	left: -1px;
	top: 98%;
}
ul.pureCssMenu ul ul
{
	position: absolute;
	left: 98%;
	top: -2px;
}
ul.pureCssMenu, ul.pureCssMenu ul
{
	margin: 0px;
	list-style: none;
	padding: 0px 2px 2px 0px;
}
ul.pureCssMenu table
{
	border-collapse: collapse;
}
ul.pureCssMenu
{
	display: block;
	zoom: 1;
	float: left;
}
ul.pureCssMenu ul
{
	width:113px;
}
ul.pureCssMenu li
{
	display: block;
	margin: 2px 0px 0px 2px;
	font-size: 0px;
	background-image: url(images/homepage03.gif);   /* BG MENU  */
	background-repeat: no-repeat;
	width: 113px;                                   /* DIMENSIONS */
	height: 26px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus
{
	outline-style: none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover
{
	display: block;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	padding: 2px 5px 2px 10px;
	_padding-left: 0;
	font: bold 12px "Trebuchet MS";
	color: #0F0F0F;
	text-decoration: none;
 cursor: pointer;           /* CURSEUR MAIN */
}
 /* BALISE NOGO */
.nogo{
   cursor: default;
}
ul.pureCssMenu span
{
	overflow: hidden;
}
ul.pureCssMenu li
{
	float: left;
}
ul.pureCssMenu ul li
{
	float: none;
}
ul.pureCssMenu ul a
{
	text-align: left;
	white-space: nowrap;
}
ul.pureCssMenu li.sep
{
	text-align: left;
	padding: 0px;
	line-height: 0;
	height: 100%;
}
ul.pureCssMenu li.sep span
{
	float: none;
	padding-right: 0;
	width: 3px;
	height: 100%;
	display: inline-block;
	background-color: #cccccc #111111 #111111 #cccccc;
	background-image: none;
}
ul.pureCssMenu ul li.sep span
{
	width: 100%;
	height: 3px;
}
ul.pureCssMenu li:hover
{
	position: relative;
}
ul.pureCssMenu li:hover>a
{     /* decommente si tu veux une couleur bg derriere l image ou des border */
   /*	background-color: #14C0FF;
	border-color: #377D9F;
	border-style: solid;*/
	font: bold 12px "Trebuchet MS";
	color: #FFF;
	text-decoration: none;
	background-image: url(images/homepage03.gif);   /* BG POUR QUE L IMAGE RESTE QUAND TU NAVIGUE SUR LE SOUS MENU */
  background-repeat: no-repeat
}
ul.pureCssMenu li a:hover
{
	position: relative;
      /* decommente si tu veux une couleur bg derriere l image ou des border */
	/*background-color: #14C0FF;
   border-color: #377D9F;
	border-style: solid;*/
	font: bold 12px "Trebuchet MS";
	color: #FFF;
	text-decoration: none;
	background-image: url(images/homepage04.gif);   /* BG DU HOVER */
  background-repeat: no-repeat
}
ul.pureCssMenu li.dis a
{
	color: #666 !important;
}
ul.pureCssMenu img
{
	border: none;
	float: left;
	_float: none;
	margin-right: 2px;
	width: 16px;
	height: 16px;
}
ul.pureCssMenu ul img
{
	width: 16px;
	height: 16px;
}
ul.pureCssMenu img.over
{
	display: none;
}
ul.pureCssMenu li.dis a:hover img.over
{
	display: none !important;
}
ul.pureCssMenu li.dis a:hover img.def
{
	display: inline !important;
}
ul.pureCssMenu li:hover>a img.def
{
	display: none;
}
ul.pureCssMenu li:hover>a img.over
{
	display: inline;
}
ul.pureCssMenu a:hover img.over, ul.pureCssMenu a:hover ul img.def, ul.pureCssMenu a:hover a:hover ul img.def, ul.pureCssMenu a:hover a:hover a:hover ul img.def, ul.pureCssMenu a:hover a:hover img.over, ul.pureCssMenu a:hover a:hover a:hover img.over, ul.pureCssMenu a:hover a:hover a:hover a:hover img.over
{
	display: inline;
}
ul.pureCssMenu a:hover img.def, ul.pureCssMenu a:hover ul img.over, ul.pureCssMenu a:hover a:hover ul img.over, ul.pureCssMenu a:hover a:hover a:hover ul img.over, ul.pureCssMenu a:hover a:hover img.def, ul.pureCssMenu a:hover a:hover a:hover img.def, ul.pureCssMenu a:hover a:hover a:hover a:hover img.def
{
	display: none;
}
ul.pureCssMenu a:hover ul, ul.pureCssMenu a:hover a:hover ul, ul.pureCssMenu a:hover a:hover a:hover ul
{
	display: block;
}
ul.pureCssMenu a:hover ul ul, ul.pureCssMenu a:hover a:hover ul ul
{
	display: none;
}
ul.pureCssMenu span
{
	display: block;
	background-image: url(./images/arr_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 12px;
}
ul.pureCssMenu li:hover>a>span
{
	background-image: url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span
{
	_background-image: url(./images/arrv_white.gif);
}
ul.pureCssMenu ul span, ul.pureCssMenu a:hover table span
{
	background-image: url(./images/arr_white.gif);
}


HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="menu.css" type="text/css" />
  </head>
  <body>
    <!--DEBUT DIV menucentre a AJOUTER -->
    <div id="menucentre">
      <ul class="pureCssMenu pureCssMenum">
        <li class="pureCssMenui">
          <a class="pureCssMenui" href="#">Menu 1</a>
        </li>
        <li class="pureCssMenui">
          <a class="pureCssMenui" href="#">
           <!-- VOILA LES CLASS nogo -->
          <span class=" nogo">Menu 2</span><!--[if gte IE 6]></a><![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]--></a>
          <ul class="pureCssMenum">
            <li class="pureCssMenui">
              <a class="pureCssMenui" href="#"><span class=" nogo">Menu 2.1</span><!--[if gte IE 6]></a><![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]--></a>
              <ul class="pureCssMenum">
                <li class="pureCssMenui">
                  <a class="pureCssMenui" href="#"><span class="nogo">Menu 2.1.1</span><!--[if gte IE 6]></a><![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]--></a>
                  <ul class="pureCssMenum">
                    <li class="pureCssMenui">
                      <a class="pureCssMenui" href="#">Menu 2.1.1.1</a>
                    </li>
                    <li class="pureCssMenui">
                      <a class="pureCssMenui" href="#">Menu 2.1.1.2</a>
                    </li>
                    <li class="pureCssMenui">
                      <a class="pureCssMenui" href="#">Menu 2.1.1.3</a>
                    </li>
                  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="pureCssMenui">
                  <a class="pureCssMenui" href="#">Menu 2.1.2</a>
                </li>
                <li class="pureCssMenui">
                  <a class="pureCssMenui" href="#">Menu 2.1.3</a>
                </li>
              </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="pureCssMenui">
              <a class="pureCssMenui" href="#">Menu 2.2</a>
            </li>
          </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li class="pureCssMenui">
          <a class="pureCssMenui" href="#">Menu 3</a>
        </li>
        <li class="pureCssMenui">
          <a class="pureCssMenui" href="#">Menu 4</a>
        </li>
      </ul>
    </div>
    <!--FIN DIV menucentre -->
  </body>
</html>


A+
1
Réponse 2 / 18
schancel Messages postés 296 Date d'inscription   Statut Membre Dernière intervention   49
 
ajoute la balise <center> <div id="menu"> ........ </div></center>
0
Réponse 3 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Bonsoir,

Merci de ta réponse, j'ai essayé mais aucun changement !
0
Réponse 4 / 18
ddtddt Messages postés 216 Date d'inscription   Statut Membre Dernière intervention   5
 
et si tu supprime s

#menu li {
float: left;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Bonsoir ddtddt,

J'ai supprimé mais aucun changement... :(
0
Réponse 6 / 18
ddtddt Messages postés 216 Date d'inscription   Statut Membre Dernière intervention   5
 
et si tu rajoute maintenant

#menu ul li {
text-align: center;
}
0
Réponse 7 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
??
ce serait pas plus simple comme ca sans ces floats , d autant que "float-center" n existe pas :-))! 

#menu ul {
   text-align: center;
   margin: 0px;
   padding: 0px 40px 0px 0px;
   list-style: none;
   line-height: normal;
 }

 #menu li {
   display: inline-block;
   width: 113px;
   height: 26px;

 }

 #menu a {
   background: url(images/homepage03.gif) no-repeat top;
   text-decoration: none;
   text-transform: lowercase;
   letter-spacing: -1px;
   font-size: 13px;
   color: #fff;
   margin: 0;
   padding: 5px 0px 0px 0px;
 }

 #menu a:hover {
   text-decoration: underline;
 }

 #menu .active a {
   background-image: url(images/homepage04.gif);
   color: #555;
 }
0
Réponse 8 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Bonjour,

Alors grâce à toi cette fois les menus sont centrés, mais le problème c'est qu'ils font maintenant la taille des lettres, l'image des menus ont disparus...
0
Réponse 9 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
j'ai également essayé ta modification, aucun changement...
0
Réponse 10 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
ok et si tu suprime 
width: 113px;
   height: 26px;


dans #menu li

et que tu le remet dans

#menu a

a+
0
Réponse 11 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
il y a juste l'espacement des menus qui a changé

a+ et merci de ton aide
0
Réponse 12 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
ok

remet le widht et height dans le #menu li

et rajoute un "display:block " a #menu a

dis moi ?
0
Réponse 13 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Mille merciiii ça fonctionne :P

Par contre, je voudrais maintenant faire ceci :

Menu 1; Menu 2; Menu 3 ensuite les sous menus Menu 1.1; Menu 2.1, etc et ensuite un autre niveau de sous menu Menu 1.1.1, Menu 1.1.2; Menu 2.1.1, etc

Je voudrais que le niveau Menu 1.1 apparaissent en dessous du menu 1 etc que menu 1.1.1 apparaisse à droite de menu 1.1.

Je vois pas si tu comprends ce que je veux dire ?
0
Réponse 14 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
oui je vois :-))

voila un exemple en CSS 3 avec menu, sub menu et sub sub menu

(ps: la les images sont inserees dans le css c est pour cela que cela fait des adresse zarbie ) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <title> 
      RAD ZONE Webcreation 
    </title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <style type="text/css"> 
   /*<![CDATA[*/ 

body{ 
    background-color: #444; 
    } 
    #menu{ 
    text-align: center; 
    } 

    ul#radmenu, ul#radmenu ul{ 
    margin: 0; 
    list-style: none; 
    padding: 0; 
    background-color: #000; 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII="); 
    background-repeat: repeat; 
    border-width: 0px; 
    border-style: solid; 
    border-color: #999; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    } 

    ul#radmenu ul{ 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    -moz-box-shadow: 0.7px 0.7px 1px #777777; 
    -webkit-box-shadow: 0.7px 0.7px 1px #777777; 
    box-shadow: 0.7px 0.7px 1px #777777; 
    background-color: #333; 
    background-image: none; 
    border-width: 1px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-style: solid; 
    border-color: #5A5E60; 
    padding: 0 9px 9px; 
    } 

    ul#radmenu li:hover > *{ 
    display: block; 
    } 

    ul#radmenu li{ 
    width: 113px ; 
    position: relative; 
    zoom: 1; 
    display: block; 
    white-space: nowrap; 
    font-size: 0; 
    float: left; 
    } 

    ul#radmenu li:hover{ 
    z-index: 1; 
    } 

    ul#radmenu ul ul{ 
    position: absolute; 
    left: 100%; 
    top: 0; 
    } 

    ul#radmenu{ 
    padding: 1px 1px 1px 0; 
    font-size: 0; 
    z-index: 999; 
    position: relative; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    } 

    ul#radmenu > li, ul#radmenu li{ 
    margin: 0 0 0 1px; 
    } 

    * html ul#radmenu li a{ 
    display: inline-block; 
    } 

    ul#radmenu ul > li{ 
    margin: 1px 0 0; 
    } 

    ul#radmenu a:active, ul#radmenu a:focus{ 
    outline-style: none; 
    } 

    ul#radmenu a, ul#radmenu a.pressed{ 
    display: block; 
    vertical-align: middle; 
    text-align: center; 
    text-decoration: none; 
    font: bold 12px Verdana; 
    color: #ccc; 
    cursor: pointer; 
    } 

    ul#radmenu ul li{ 
    float: none; 
    margin: 9px 0 0; 
    } 

    ul#radmenu ul a{ 
    text-align: left; 
    padding: 8px 0 0 0; 
    background-color: #333; 
    background-image: none; 
    border-width: 1px 0 0 0; 
    border-style: solid; 
    border-color: #262626; 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    font: 13px Verdana; 
    color: #ccc; 
    text-decoration: none; 
    } 

    ul#radmenu li:hover > a{ 
    background-color: #00c4ff; 
    border-style: none; 
    font: bold 12px Verdana; 
    color: #fff; 
    text-decoration: none; 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII="); 
    background-position: 0 100px; 
    } 

    ul#radmenu img{ 
    border: none; 
    vertical-align: middle; 
    margin-right: 10px; 
    } 

    ul#radmenu img.over{ 
    display: none; 
    } 

    ul#radmenu li:hover > a img.def{ 
    display: none; 
    } 

    ul#radmenu li:hover > a img.over{ 
    display: inline; 
    } 

    ul#radmenu li a.pressed img.over{ 
    display: inline; 
    } 

    ul#radmenu li a.pressed img.def{ 
    display: none; 
    } 

    ul#radmenu span{ 
    display: block; 
    overflow: visible; 
    background-position: right center; 
    background-repeat: no-repeat; 
    padding-right: 0px; 
    } 

    ul#radmenu ul span{ 
    background-image: url("data:image/gif;base64,R0lGODlhBwAMAKIFAL6+vtra2ry8vL29vcjIyP///wAAAAAAACH5BAEAAAUALAAAAAAHAAwAAAMZWLoVZoyMFwVdEkaglREWxmETZmlZ53RFAgA7"); 
    padding-right: 27px; 
    } 
    #topmenu a{ 
    height: 14px; 
    line-height:14px ; 
    } 

    ul#radmenu a{ 
    padding: 10px; 
    background-color: #333; 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII="); 
    background-repeat: repeat; 
    background-position: 0 200px; 
    border-width: 0px; 
    border-style: none; 
    border-color:; 
    color: #ccc; 
    text-decoration: none; 
    } 

    ul#radmenu li:hover > a, ul#radmenu li > a.pressed{ 
    background-color: #00c4ff; 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII="); 
    background-position: 0 100px; 
    border-style: none; 
    color: #fff; 
    text-decoration: none; 
    } 

    ul#radmenu ul li:hover > a, ul#radmenu ul li > a.pressed{ 
    background-color: #333; 
    background-image: none; 
    border-style: solid; 
    border-color: #262626; 
    font: 13px Verdana; 
    color: #1F80AE; 
    text-decoration: none; 
    } 

    ul#radmenu li.toppremier > a{ 
    border-radius: 4px 0 0 4px; 
    -moz-border-radius: 4px 0 0 4px; 
    -webkit-border-radius: 4px; 
    -webkit-border-top-right-radius: 0; 
    -webkit-border-bottom-right-radius: 0; 
    text-shadow: #000000 0px -1px 1px; 
    } 

    ul#radmenu li.toppremier:hover > a, ul#radmenu li.toppremier > a.pressed{ 
    text-shadow: #3d3d3d 0px -1px 1px; 
    } 

    ul#radmenu li.topmenu > a{ 
    text-shadow: #000000 0px -1px 1px; 
    } 

    ul#radmenu li.topmenu:hover > a, ul#radmenu li.topmenu > a.pressed{ 
    text-shadow: #3d3d3d 0px -1px 1px; 
    } 

    ul#radmenu li.topdernier > a{ 
    border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    -webkit-border-radius: 0; 
    -webkit-border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    text-shadow: #000000 0px -1px 1px; 
    } 

    ul#radmenu li.topdernier:hover > a, ul#radmenu li.topdernier > a.pressed{ 
    text-shadow: #3d3d3d 0px -1px 1px; 
    } 

    ul#radmenu ._ > li > a{ 
    padding: 0; 
    } 

    ul#radmenu li.subpremier > a{ 
    border-width: 0; 
    border-style: none; 
    padding: 0; 
    } 

    ul#radmenu li.subpremier:hover > a, ul#radmenu li.subpremier > a.pressed{ 
    border-style: none; 
    } 
   /*]]>*/ 
   </style></head> 
  <body> 
    <div id="menu"> 
      <ul id="radmenu" class="topmenu"> 
        <li class="toppremier"> 
          <a href="#"><span>Menu 0</span></a> 
          <ul> 
            <li class="subpremier"> 
              <a href="#">Menu 0 0</a> 
            </li> 
            <li> 
              <a href="#">Menu 0 1</a> 
            </li> 
            <li> 
              <a href="#">Menu 0 2</a> 
            </li> 
            <li> 
              <a href="#"><span>Menu 0 3</span></a> 
              <ul> 
                <li class="subpremier"> 
                  <a href="#">Menu 0 3 0</a> 
                </li> 
                <li> 
                  <a href="#">Menu 0 3 1</a> 
                </li> 
                <li> 
                  <a href="#"><span>Menu 0 3 2</span></a> 
                  <ul> 
                    <li class="subpremier"> 
                      <a href="#">Menu 0 3 2 0</a> 
                    </li> 
                    <li> 
                      <a href="#">Menu 0 3 2 1</a> 
                    </li> 
                    <li> 
                      <a href="#">Menu 0 3 2 2</a> 
                    </li> 
                    <li> 
                      <a href="#">Menu 0 3 2 3</a> 
                    </li> 
                  </ul> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li class="topmenu"> 
          <a href="#"><span>Menu 1</span></a> 
          <ul> 
            <li class="subpremier"> 
              <a href="#">Menu 1 0</a> 
            </li> 
            <li> 
              <a href="#">Menu 1 1</a> 
            </li> 
            <li> 
              <a href="#"><span>Menu 1 2</span></a> 
              <ul> 
                <li class="subpremier"> 
                  <a href="#">Menu 1 2 0</a> 
                </li> 
                <li> 
                  <a href="#">Menu 1 2 1</a> 
                </li> 
                <li> 
                  <a href="#">Menu 1 2 2</a> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
        <li class="topmenu"> 
          <a href="#"><span>Menu 2</span></a> 
          <ul> 
            <li class="subpremier"> 
              <a href="#">Menu 2 0</a> 
            </li> 
            <li> 
              <a href="#"><span>Menu 2 1</span></a> 
              <ul> 
                <li class="subpremier"> 
                  <a href="#">Menu 2 1 0</a> 
                </li> 
                <li> 
                  <a href="#"><span>Menu 2 1 1</span></a> 
                  <ul> 
                    <li class="subpremier"> 
                      <a href="#">Menu 2 1 1 0</a> 
                    </li> 
                    <li> 
                      <a href="#">Menu 2 1 1 1</a> 
                    </li> 
                  </ul> 
                </li> 
              </ul> 
            </li> 
            <li> 
              <a href="#">Menu 2 2</a> 
            </li> 
          </ul> 
        </li> 
        <li class="topmenu"> 
          <a href="#"><span>Menu 3</span></a> 
          <ul> 
            <li class="subpremier"> 
              <a href="#"><span>Menu 3 0</span></a> 
              <ul> 
                <li class="subpremier"> 
                  <a href="#">Menu 3 0 0</a> 
                </li> 
              </ul> 
            </li> 
            <li> 
              <a href="#">Menu 3 1</a> 
            </li> 
            <li> 
              <a href="#">Menu 3 2</a> 
            </li> 
          </ul> 
        </li> 
        <li class="topdernier"> 
          <a href="#">Menu 4</a> 
        </li> 
      </ul> 
    </div> 
  </body> 
</html>

a+
--

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Réponse 15 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Merci, mais tu n'aurais pas un code plus simple, car je trouve le css un peu compliqué et il m'a fait disparaître mon logo mdr
0
Réponse 16 / 18
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
;-))

je pourrais t en faire 10 , mais il faudrait mieux que tu le fasse et l adapte !

pour t aider tu peu utiliser un de ces bon generateur !

http://www.cssmenubuilder.com/cgi-sys/suspendedpage.cgi

http://purecssmenu.com/

http://cssmenumaker.com/

a+
0
Réponse 17 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Coucou,

Alors j'ai utiliser un générateur mais là je me perd complètement, il y a pas l'image en fond que je voulais images/homepage03.gif et images/homepage04.gif quand on passe la souris dessus, les menus sont pas centrés et je n'arrive pas a faire en sorte que mes menus fassent : 113*26 px

Pourrais-tu y jeter un coup d'oeil ?

Html : 
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 1</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu 2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu 2.1</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="pureCssMenum">
			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu 2.1.1</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="pureCssMenum">
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.1.1.1</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.1.1.2</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.1.1.3</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.1.2</a></li>
			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.1.3</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2.2</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 3</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 4</a></li>
</ul>


css : 

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background: url(images/homepage03.gif) no-repeat top;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:108.15px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background: url(images/homepage04.gif) no-repeat top;
	text-align:left;
	text-decoration:none;
	padding:2px 5px 2px 10px;
	_padding-left:0;
	font:bold 12px Trebuchet MS;
	color: #0F0F0F;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3px;
	height:100%;
	display:inline-block;
	background-color:#cccccc #111111 #111111 #cccccc;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#14C0FF;
	border-color:#377D9F;
	border-style:solid;
	font:bold 12px Trebuchet MS;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#14C0FF;
	border-color:#377D9F;
	border-style:solid;
	font:bold 12px Trebuchet MS;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #666 !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arr_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}


Si tu arrives a me sauver, je ne saurais comment te remercier, parce que là je perd complètement les pédales avec ces menus --'

Un énorme merciiiiiii
0
Réponse 18 / 18
le-dragon91 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   18
 
Un million de merciiiiii, tu me sauves la vie.

Tu es quelqu'un de formidable merciii
0

Discussions similaires

accéder au menu caché
Kabos -
Andy31200 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses