Sujet Précédent Sujet Suivant

Problème centrage de menu

Résolu/Fermé
le-dragon91 Messages postés 256 Date d'inscription mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 - 7 janv. 2012 à 14:28
le-dragon91 Messages postés 256 Date d'inscription mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 - 9 janv. 2012 à 14:52
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
9 janv. 2012 à 14:04
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 dimanche 20 mars 2011 Statut Membre Dernière intervention 7 décembre 2018 49
7 janv. 2012 à 18:56
ajoute la balise <center> <div id="menu"> ........ </div></center>
0
Réponse 3 / 18
le-dragon91 Messages postés 256 Date d'inscription mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
7 janv. 2012 à 19:08
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 mardi 1 novembre 2011 Statut Membre Dernière intervention 8 juin 2013 5
7 janv. 2012 à 21:25
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 03:01
Bonsoir ddtddt,

J'ai supprimé mais aucun changement... :(
0
Réponse 6 / 18
ddtddt Messages postés 216 Date d'inscription mardi 1 novembre 2011 Statut Membre Dernière intervention 8 juin 2013 5
8 janv. 2012 à 11:34
et si tu rajoute maintenant

#menu ul li {
text-align: center;
}
0
Réponse 7 / 18
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
8 janv. 2012 à 12:55
??
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 14:25
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 14:32
j'ai également essayé ta modification, aucun changement...
0
Réponse 10 / 18
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
8 janv. 2012 à 14:35
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 15:03
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
8 janv. 2012 à 15:24
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 15:40
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 8/01/2012 à 20:23
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
8 janv. 2012 à 20:57
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
8 janv. 2012 à 22:04
;-))

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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
9 janv. 2012 à 04:55
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 mercredi 4 octobre 2006 Statut Membre Dernière intervention 25 janvier 2014 18
9 janv. 2012 à 14:52
Un million de merciiiiii, tu me sauves la vie.

Tu es quelqu'un de formidable merciii
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

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

7 réponses