Chers amis du forum je vous salus en premier et deuxiemement je sollicite votre concours pour le code suivant. En effet, je désire centre ou placer à droite le menu deroulant ci-après en fonction du site web suivant: -www.lausanne-nettoyages.com
Bien que j'ai une bonne notion de la langage html et une connaissance moyenne au CSS, j'ai tout essaié mais toujours aucune changement. J'ai créer le menu suivant avec le logiciel PureCSSMenu
Merci d'avance de votre aide.
<body>
<p> <bgcolor="#ffffff">
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute; left:-1px;top:100%;}
ul.pureCssMenu ul ul{position: absolute; left:100%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#F59F1D;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float:left;
}
ul.pureCssMenu ul{
width:240px;
}
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-color:#F59F1D;
border-width:1px;
border-color:#fff;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:bold 14px Arial;
color: #000000;
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:#808080; 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:#ADFF0A;
border-color:#45ADE4;
border-style:solid;
font:bold 12px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ADFF0A;
border-color:#45ADE4;
border-style:solid;
font:bold 12px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !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 img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:10px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 12px Arial;
color:#000000;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 12px Arial;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/"><span>Présentation</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="http://www.lausanne-nettoyages.com/?page_id=138">Devis / offre</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=140">Produits et machines</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=151">Domaines d'intervention et prestation</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=155">Sécurité</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=158">Triages & debarras de déchets</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=161">Avant / Après nettoyages</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=54">Réferences</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=26">Gallery</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=5">Contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<!-- (c) 2009, PureCSSMenu.com -->
Modifié par halas (14 Mar 2011 - 13:17)
Bien que j'ai une bonne notion de la langage html et une connaissance moyenne au CSS, j'ai tout essaié mais toujours aucune changement. J'ai créer le menu suivant avec le logiciel PureCSSMenu
Merci d'avance de votre aide.
<body>
<p> <bgcolor="#ffffff">
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute; left:-1px;top:100%;}
ul.pureCssMenu ul ul{position: absolute; left:100%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#F59F1D;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float:left;
}
ul.pureCssMenu ul{
width:240px;
}
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-color:#F59F1D;
border-width:1px;
border-color:#fff;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:bold 14px Arial;
color: #000000;
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:#808080; 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:#ADFF0A;
border-color:#45ADE4;
border-style:solid;
font:bold 12px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ADFF0A;
border-color:#45ADE4;
border-style:solid;
font:bold 12px Arial;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !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 img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:10px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 12px Arial;
color:#000000;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 12px Arial;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/"><span>Présentation</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="http://www.lausanne-nettoyages.com/?page_id=138">Devis / offre</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=140">Produits et machines</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=151">Domaines d'intervention et prestation</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=155">Sécurité</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=158">Triages & debarras de déchets</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.lausanne-nettoyages.com/?page_id=161">Avant / Après nettoyages</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=54">Réferences</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=26">Gallery</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://www.lausanne-nettoyages.com/?page_id=5">Contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<!-- (c) 2009, PureCSSMenu.com -->
Modifié par halas (14 Mar 2011 - 13:17)