Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

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>
        <!-- Fine codice per menu orizzontale -->    

    </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:

          <div id='cssmenu'>
          <ul>
               <li class='active'><a href='#'><span>Home</span></a></li>

a:
Code:

          <div id='cssmenu'>
          <ul>
          <div id='secondario'>
          <li><span></span></li>
          </div>
          <li class='active'><a href='#'><span>Home</span></a></li>
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.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.