menu con css

angelonardelli

Nuovo Utente
20 Mar 2011
1
0
0
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;}
 
Ultima modifica di un moderatore:

amhal

Utente Attivo
17 Feb 2011
89
1
8
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
asevenx menu a tendina multilivello solo con css HTML e CSS 1
A Realizzare un mega menu con css HTML e CSS 2
M menu espandibile con i css con sottolivelli HTML e CSS 2
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
G Menu arrotondati con CSS HTML e CSS 2
M Menu con Css: ie impazzito? HTML e CSS 0
K Menu dinamico con file .css ASP.NET 1
B allineare le voci del menu con stile (Css) HTML e CSS 9
T problemi con dati menu a tendina HTML e CSS 2
D menu con submenu orizzontale HTML e CSS 0
P Sub menu con Collapse. Javascript 0
F Dropdown menu con tabella PHP 33
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
M [PHP] Creare un menu a tendina con pdo PHP 18
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
A [HTML] Menu con effetto slide down HTML e CSS 0
D Sono disperato: Menu select dinamici con Ajax e PHP PHP 1
D Sono disperato: Menu select dinamici con Ajax e PHP Ajax 2
V [PHP] Menu a tendina con popolamento dati da un db PHP 6
K Problema ancore in pagine diverse con menu fixed HTML e CSS 6
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
G problema con menu spry dreamweaver Webdesign e Grafica 5
C Link menu che appaiono con onclick Javascript 2
Carlito's Menu con tendina a comparsa al mouseover HTML e CSS 1
J Menu a tendina con bootstrap 3 HTML e CSS 3
A Menu orizzontale con tendina orizzontale HTML e CSS 10
M sottomenu stessa altezza di menu con voce attiva evidenziata Javascript 3
L Problema onClick con un menu a tendina Javascript 3
C Creazione Menu dinamico con Checkbox PHP 0
U Estrazione dati da un db con un menu selezione in cascata PHP 6
R Eliminazione tag da menu a tendina creato con dati prelevati da tabella Mysql PHP 3
andre9004 Dropdown menu con .hover() jQuery 2
L Selezione da database con DropDown Menu e visualizzazione PHP 10
F Problema con Menu Javascript HTML e CSS 1
C Menu con puntatore mobile jQuery 8
F problema menu a tendina con explorer HTML e CSS 2
Frank10 Problemino con il menu fisso in fondo pagina ed il solito, explorer HTML e CSS 10
D Menu con immagine a stile DropDown jQuery 0
neo996sps Modifica query PHP con menu a tendina PHP 1
P Menu verticale con subvoci HTML e CSS 1
F Php Mysql - visualizzare record per anno con menu a tendina PHP 4
I problema con un menu javascript Javascript 4
F Drop Down Menu compatibile con internet explorer HTML e CSS 0
L gestione menu a tendina con cartella PHP 17
J FORM: Menu a tendina con tantissime occorrenze HTML e CSS 0
V url voce menu con parentesi [ ] wordpress WordPress 0
P Menu a discesa con estrazione dati da datbase mysql PHP 21

Discussioni simili