Benvenuto Ospite

Aiutamici Forum » Spazio Webmaster » HTML » centrare menu con css

centrare menu con css

Opzioni

Topic Precedente · Topic Sucessivo

etabyte

Inviato: Wednesday, July 10, 2013 7:06:51 AM

Rank: Newbie

Iscritto dal : 7/10/2013
Posts: 2

Buon giorno a tutti,
mi sono appena iscritto a questo forum trovato per caso durante la ricerca della soluzione ad un problema che mi trascino da qualche giorno ed al quale spero qualcuno di voi possa dare un aiuto.
Si tratta di questo: ho scaricato da un sito un bel menu (Free) perfettamente funzionante e adatto alle mie esigenze che però allinea a sinistra le varie voci (home, contatti ecc. ecc.). Vorrei fare in modo che tali voci fossero sempre centrate orizzontalmente nella pagina mantenendo la barra nella quale sono inseriti per tutta la lunghezza della pagina. Potete gentilmente aiutarmi? grazie.
questo è il codice in questione:

Code:

<!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">
  <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title></title>
      <meta name="keywords" content="" />
      <meta name="kie " content="" />

<style type="text/css">
@charset 'UTF-8';
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0; }

#cssmenu ul, #cssmenu li {
list-style: none;
margin: 20px auto 20px auto;
margin: 0;
padding: 0; }

#cssmenu ul {
position: relative;
z-index: 597; }

#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle; }

#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default; }

#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%; }

#cssmenu ul ul li {
float: none; }

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

#cssmenu ul li:hover > ul {
visibility: visible; }

#cssmenu ul ul {
margin-top: 0; }

#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none; }

#cssmenu ul li.last ul {
left: auto;
right: 0; }

#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%; }

#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both; }

/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif; }
#cssmenu:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
background-color: #606a77;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
background-image: -moz-linear-gradient(top, #4f5864, #49515b);
background-image: -o-linear-gradient(top, #4f5864, #49515b);
background-image: linear-gradient(#4f5864, #49515b);
-moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
-webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
content: '';
display: block;
height: 8px;
width: 100%; }
#cssmenu > ul {
border-bottom: 1px solid #252A30;
border-top: 1px solid #252A30;
-moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
background-color: #566171;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
background-image: -o-linear-gradient(top, #6e7d8f, #404854);
background-image: linear-gradient(#6e7d8f, #404854);
height: 27px;
padding: 15px 15px 15px 5px; }
#cssmenu > ul > li {
margin: 0 10px; }
#cssmenu > ul > li.has-sub:hover > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; }
#cssmenu > ul > li:hover > a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
background-color: #e2e2e2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, #c8c8c8));
background-image: -webkit-linear-gradient(top, white, #c8c8c8);
background-image: -moz-linear-gradient(top, white, #c8c8c8);
background-image: -o-linear-gradient(top, white, #c8c8c8);
background-image: linear-gradient(white, #c8c8c8); }
#cssmenu > ul > li.active:hover > a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
background-color: #cb7b72;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
background-image: linear-gradient(#f49b8e, #bd584d); }
#cssmenu ul a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
background-color: #c2c2c2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: linear-gradient(#f1f1f1, #a8a8a8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
color: #3c444d;
font-size: 12px;
line-height: 27px;
padding: 0 20px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
#cssmenu ul ul {
width: 170px; }
#cssmenu ul ul a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
line-height: 150%; }
#cssmenu ul .active > a {
color: #FFF;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
background-color: #c46a60;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
background-image: -o-linear-gradient(top, #ef7260, #b04c41);
background-image: linear-gradient(#ef7260, #b04c41); }
#cssmenu ul .has-sub {
position: relative; }
#cssmenu ul .has-sub ul {
-moz-border-radius: 0 3px 3px 3px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
background-color: #c3c3c3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: linear-gradient(#e9e9e9, #aaaaaa);
padding: 3px 0; }
#cssmenu ul .has-sub ul a {
background: none;
padding: 8px 8px 8px 16px;
border-bottom: 1px solid transparent;
text-align: left; }
#cssmenu ul .has-sub ul .has-sub a:after {
content: none; }
#cssmenu ul .has-sub li:hover > a {
border-bottom: 1px solid #1D2024;
color: #FFF;
background-color: #55616f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
background-image: -moz-linear-gradient(top, #56606f, #3f4852);
background-image: -o-linear-gradient(top, #56606f, #3f4852);
background-image: linear-gradient(#56606f, #3f4852);
-moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
-webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
position: relative;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
#cssmenu ul .has-sub li:hover > a:after {
border-left: 0 none;
background-color: #c35f54;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
background-image: linear-gradient(#ea5f51, #a9463b);
-moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
-webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
content: '';
height: 100%;
width: 6px;
position: absolute;
right: 0;
top: 0; }
#cssmenu ul .has-sub > a {
padding-right: 0; }
#cssmenu ul .has-sub > a:after {
content: '▼';
border-left: 1px solid rgba(100,100,100,0.2);
color: #5D6A7A;
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
display: inline-block;
font-size: 9px;
margin-left: 5px;
text-align: center;
height: 25px;
width: 24px;
text-shadow: 0 -1px 0 #101417; }
#cssmenu ul .active > a:after { color: #FFF; }

</style>
      

  </head>
  <body>

<div id='cssmenu'>

<ul>

<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Item</span></a></li>
<li><a href='#'><span>Item</span></a></li>
<li><a href='#'><span>Item</span></a></li>
<li class='has-sub'><a href='#'><span>Item</span></a>
<ul>
<li><a href='#'><span>Item</span></a></li>
<li class='has-sub'><a href='#'><span>ffff</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Item</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Item</span></a></li>
<li class='last'><a href='#'><span>Item</span></a></li>

</ul>
</div>

  </body>
</html>

Torna in alto

Sponsor

Inviato: Wednesday, July 10, 2013 7:06:51 AM

Torna in alto

etabyte

Inviato: Thursday, July 11, 2013 9:00:08 AM

Rank: Newbie

Iscritto dal : 7/10/2013
Posts: 2

Grazie lo stesso a tutti, se può servire ho risolto così:
ho aggiunto nel CSS il seguente codice

Code:

#secondario{ width: 950px; margin: auto; }

e modificato la pagina da:

Code:

Code:

Torna in alto

Utenti presenti in questo topic

Guest

Aiutamici Forum » Spazio Webmaster » HTML » centrare menu con css

Salta al Forum

Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Invia topic via Email

RSS Feed

Watch this topic

Stampa topic

Normale

Threaded