menu con css

angelonardelli · 20 Mar 2011

Ho trovato uno script css che crea un menu orizzontale che mi piace molto ma ha un'unica pecca.... non riesco a centrarlo. mi potete aiutare?

Posto il codice html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Logo</title>
  <link rel="stylesheet" href="Style.css" type="text/css" />
 </head>

 <body  style="background-color:#000000">
  <ul id="cssmenu" class="topmenu">
   <li class="topfirst"><a href="Home.html" target="secondo" title="Home">Home</a></li>
   <li class="topmenu"><a href="Chi sono.html" target="secondo" title="Chi sono">Chi sono</a></li>
   <li class="topmenu"><a href="Riconoscimenti.html" target="secondo" title="Riconoscimenti">Riconoscimenti</a></li>
   <li class="topmenu"><a href="Verdura.html" target="secondo" title="Verdura in intaglio">Verdura in intaglio</a></li>
   <li class="topmenu"><a href="Partecipazioni.html" target="secondo" title="Partecipazioni">Partecipazioni</a></li>
   <li class="toplast"><a href="Contatti.html" target="secondo" title="Contatti">Contatti</a></li>
  </ul>
 </body>

</html>

e il codice css

Codice:

ul#cssmenu,ul#cssmenu
 ul{margin:0;
 list-style:none;
 padding:0;
 background-color:#dedede;
 border-width:1px;
 border-style:solid;
 border-color:#5f5f5f;
 -moz-border-radius:0px;
 -webkit-border-radius:0px;
 border-radius:0px;}

ul#cssmenu
 ul{display:none;
 position:absolute;
 left:0;
 top:10%;
 -moz-box-shadow:3.5px 3.5px 5px #000000;
 -webkit-box-shadow:3.5px 3.5px 5px #000000;
 box-shadow:3.5px 3.5px 5px #000000;
 padding:0 10px 10px;
 background-color:#FFFFFF;
 border-radius:0px;
 -moz-border-radius:0px;
 -webkit-border-radius:0px;
 border-color:#d4d4d4;}

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

ul#cssmenu
 li:hover{position:relative;}

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

ul#cssmenu
 {display:block;
 font-size:0;
 float:left;}

ul#cssmenu
 li{display:block;
 white-space:nowrap;
 font-size:0;
 float:left;}

ul#cssmenu>li,ul#cssmenu
 li{margin:0;}

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

ul#cssmenu
 a{display:block;
 vertical-align:middle;
 text-align:left;
 text-decoration:none;
 font:bold 17px Verdana;
 color:#ffff00;
 text-shadow:#FFF 0 0 1px;
 cursor:pointer;
 padding:10px;
 background-color:#aa007f;
 background-image:url("mainbk.png");
 background-repeat:repeat;
 background-position:0 0;
 border-width:0 0 0 1px;
 border-style:solid;
 border-color:#C0C0C0;}

ul#cssmenu
 ul li{float:none;
 margin:10px 0 0;}

ul#cssmenu
 ul a{text-align:left;
 padding:4px;
 background-color:#FFFFFF;
 background-image:none;
 border-width:0;
 border-radius:0px;
 -moz-border-radius:0px;
 -webkit-border-radius:0px;
 font:14px Tahoma;
 color:#000;
 text-decoration:none;}

ul#cssmenu
 li:hover>a{background-color:#f8ac00;
 border-color:#C0C0C0;
 border-style:solid;
 font:bold 17px Verdana;
 color:#000000;
 text-decoration:none;
 text-shadow:#FFF 0 0 1px;
 background-image:url("mainbk.png");
 background-position:0 100px;}

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

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

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

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

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

ul#cssmenu
 ul li:hover>a{background-color:#FFFFFF;
 background-image:none;
 font:14px Tahoma;
 color:#868686;
 text-decoration:none;}

ul#cssmenu
 li.topfirst>a{height:5px;
 line-height:5px;
 border-radius:0px 0 0 0px;
 -moz-border-radius:0px 0 0 0px;
 -webkit-border-radius:0px;
 -webkit-border-top-right-radius:0;
 -webkit-border-bottom-right-radius:0;}

ul#cssmenu
 li.topfirst:hover>a{line-height:5px;}

ul#cssmenu
 li.topmenu>a{height:5px;
 line-height:5px;}

ul#cssmenu
 li.topmenu:hover>a{line-height:5px;}

ul#cssmenu
 li.toplast>a{height:5px;
 line-height:5px;
 border-radius:0 0px 0px 0;
 -moz-border-radius:0 0px 0px 0;
 -webkit-border-radius:0;
 -webkit-border-top-right-radius:0px;
 -webkit-border-bottom-right-radius:0px;}

ul#cssmenu
 li.toplast:hover>a{line-height:5px;}

amhal · 22 Mar 2011

pagina html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Logo</title>
  <link rel="stylesheet" href="Style.css" type="text/css" />
 </head>

 <body>

	<div id="blocco">


  <ul id="cssmenu" class="topmenu">
   <li class="topfirst"><a href="Home.html" target="secondo" title="Home">Home</a></li>
   <li class="topmenu"><a href="Chi sono.html" target="secondo" title="Chi sono">Chi sono</a></li>
   <li class="topmenu"><a href="Riconoscimenti.html" target="secondo" title="Riconoscimenti">Riconoscimenti</a></li>
   <li class="topmenu"><a href="Verdura.html" target="secondo" title="Verdura in intaglio">Verdura in intaglio</a></li>
   <li class="topmenu"><a href="Partecipazioni.html" target="secondo" title="Partecipazioni">Partecipazioni</a></li>
   <li class="toplast"><a href="Contatti.html" target="secondo" title="Contatti">Contatti</a></li>
  </ul>


	</div>


 </body>

</html>

aggiungi questo al foglio di stile

HTML:

body {
	background-color: #000000;
	margin: 0;
	text-align: center;
	}



#blocco	{

	margin: auto;	
	width: 801px;
	height: 500px;


	}

praticamente ho aggiunto un div, l'ho centrato e ho inserito il menù,
a me si vede al centro con ie e firefox prova.

ciao

Cerca

Cerca

menu con css

angelonardelli

Nuovo Utente

amhal

Utente Attivo

Discussioni simili