[HTML] Non riesco a centrare menu orizzontale

elpirata

Utente Attivo
18 Mar 2009
230
7
18
Un saluto a tutti,
ho un menu orizzontale che vorrei fosse mostrato sempre al centro dello schermo qualsiasi essa sia la risoluzione e vorrei che la pagina scorresse al di sotto di esso, naturalmente il menu deve essere centrato solo orizzontalmente

questo è il css che non riesco a modificare:

Codice:
ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    background-color:#dedede;
    border-width:1px;
    border-style:solid;
    border-color:#5f5f5f;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
   
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    -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;
    background-color:#FFFFFF;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#d4d4d4;
    padding:0 10px 10px;
    }
   
   
ul#css3menu1 li:hover>*{
    display:block;
    }
   
ul#css3menu1 li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
    }
   
ul#css3menu1 li:hover{
    z-index:1;
    }
   
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;zoom:1;
    padding:0;
    *display:inline;
    }
   
* html ul#css3menu1 li a{
    display:inline-block;
    }
   
ul#css3menu1>li{
    margin:0;
    }
   
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;
    }
   
ul#css3menu1 a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px Trebuchet MS;
    color:#000000;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px;
    background-color:#c1c1c1;
    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#css3menu1 ul li{
    float:none;margin:10px 0 0;
    }
   
ul#css3menu1 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#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#f8ac00;
    border-color:#C0C0C0;
    border-style:solid;color:#000000;
    text-shadow:#FFF 0 0 1px;
    background-image:url("mainbk.png");
    background-position:0 100px;
    }
   
ul#css3menu1 img{
    border:none;
    vertical-align:middle;
    margin-right:10px;
    }
   
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
    }
   
ul#css3menu1 > li.switch{
    display:none;
    cursor:pointer;
    width:25px;
    height:20px;
    padding:10px;
    }
   
ul#css3menu1 > li.switch:before{
    content:"";position:absolute;
    display:block;
    height:4px;
    width:25px;
    border-radius:4px;
    background:#000000;
    -moz-box-shadow:0 8px #000000, 0 16px #000000;
    -webkit-box-shadow:0 8px #000000, 0 16px #000000;
    box-shadow:0 8px #000000, 0 16px #000000;
    }
   
ul#css3menu1 > li.switch:hover:before{
    background:#000000;
    -moz-box-shadow:0 8px #000000, 0 16px #000000;
    -webkit-box-shadow:0 8px #000000, 0 16px #000000;
    box-shadow:0 8px #000000, 0 16px #000000;
    }
   
.c3m-switch-input{
    display:none;
    }
   
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{
    background-color:#f8ac00;
    background-image:url("mainbk.png");
    background-position:0 100px;border-style:solid;
    border-color:#C0C0C0;color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
    }
   
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{
    background-color:#FFFFFF;
    background-image:none;
    color:#868686;
    text-decoration:none;
    }
   
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
    }
   
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    }
   
@media screen and (max-width: 768px) {
    ul#css3menu1 > li {
        position: initial;
        }
       
    ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
        left: 0;
        right:auto;
        top: 100%;
        }
       
    ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 0;
        width: 100% !important;
        }
       
   

@media screen and (max-width: 289px) {
    ul#css3menu1 {
        width: 100%;
        }
       
    ul#css3menu1 > li {
        display: none;
        position: relative;
        width: 100% !important;
        }
       
    ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {
        display: block;
        }
       
    ul#css3menu1 > li.switch > label {       
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;}

questo invece l'html:

HTML:
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0">
    <title>Menu</title>
        <!-- Start css3menu.com HEAD section -->
        <link rel="stylesheet" href="css/menu.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
        <!-- End css3menu.com HEAD section -->       
</head>

<body ontouchstart="">
<!-- Start css3menu.com BODY section -->
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
    <li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
    <li class="topfirst"><a href="home.php" style="height:32px;line-height:32px;"><img src="css/img/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="css/img/news.png" alt=""/>Commesse</span></a>
    <ul>
        <li><a href="inserisci.php"><img src="css/img/favour.png" alt=""/>Nuova</a></li>
        <li><a href="ricerca.php"><img src="css/img/find.png" alt=""/>Ricerca</a></li>
    </ul></li>
    <li class="toplast"><a href="#" style="height:32px;line-height:32px;"><span><img src="css/img/alarm_5.png" alt=""/>Appuntameti</span></a>
    <ul>
        <li><a href="qeleapp.php" target="_parent"><img src="css/img/service.png" alt=""/>Oggi</a></li>
        <li><a href="insapp.php"><img src="css/img/add2_5.png" alt=""/>Carica</a></li>
        <li><a href="ricapp.php"><img src="css/img/find2.png" alt=""/>Ricerca</a></li>
    </ul></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">dhtml menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->

</body>
mi dareste una mano ?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83
Premesso che per darti una risposta esaustiva al massimo ti si dovrebbe rifare tutto il layout in modo responsive.
Comunque intanto potresti iniziare con mettere il menu dentro ad un contenitore e dare la regola css margin:0 auto; per portarlo sempre al centro orizzontale della pagina, quindi usare anche la regola z-index con un valore tipo 999, per fare in modo che stia al di sopra del resto della pagina, quindi position:fixed; per renderlo fisso e la pagina scorra sotto.

Prova così e sappici dire come va
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
CSS:
Codice:
#menucontainer{

    /* Larghezza DIV che contiene il Menu, deve esserci altrimenti non si puo centrare */
    width: 286px;

    /* Questo tiene il menu posizionato fisso */
    position: fixed;

    /*Diamo una distanza da sinistra del 50% */
    left: 50%;

    /*Sottraiamo la metà della larghezza dell'oggetto da centrare
    dalla distanza della regola precedente, in questo caso 286/2=143 */
    margin-left: -143px;
    z-index: 1000;
}
ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    background-color:#dedede;
    border-width:1px;
    border-style:solid;
    border-color:#5f5f5f;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
  
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    -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;
    background-color:#FFFFFF;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#d4d4d4;
    padding:0 10px 10px;
    }
  
  
ul#css3menu1 li:hover>*{
    display:block;
    }
  
ul#css3menu1 li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
    }
  
ul#css3menu1 li:hover{
    z-index:1;
    }
  
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;zoom:1;
    padding:0;
    *display:inline;
    }
  
* html ul#css3menu1 li a{
    display:inline-block;
    }
  
ul#css3menu1>li{
    margin:0;
    }
  
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;
    }
  
ul#css3menu1 a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px Trebuchet MS;
    color:#000000;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px;
    background-color:#c1c1c1;
    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#css3menu1 ul li{
    float:none;margin:10px 0 0;
    }
  
ul#css3menu1 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#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#f8ac00;
    border-color:#C0C0C0;
    border-style:solid;color:#000000;
    text-shadow:#FFF 0 0 1px;
    background-image:url("mainbk.png");
    background-position:0 100px;
    }
  
ul#css3menu1 img{
    border:none;
    vertical-align:middle;
    margin-right:10px;
    }
  
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
    }
  
ul#css3menu1 > li.switch{
    display:none;
    cursor:pointer;
    width:25px;
    height:20px;
    padding:10px;
    }
  
ul#css3menu1 > li.switch:before{
    content:"";position:absolute;
    display:block;
    height:4px;
    width:25px;
    border-radius:4px;
    background:#000000;
    -moz-box-shadow:0 8px #000000, 0 16px #000000;
    -webkit-box-shadow:0 8px #000000, 0 16px #000000;
    box-shadow:0 8px #000000, 0 16px #000000;
    }
  
ul#css3menu1 > li.switch:hover:before{
    background:#000000;
    -moz-box-shadow:0 8px #000000, 0 16px #000000;
    -webkit-box-shadow:0 8px #000000, 0 16px #000000;
    box-shadow:0 8px #000000, 0 16px #000000;
    }
  
.c3m-switch-input{
    display:none;
    }
  
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{
    background-color:#f8ac00;
    background-image:url("mainbk.png");
    background-position:0 100px;border-style:solid;
    border-color:#C0C0C0;color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
    }
  
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{
    background-color:#FFFFFF;
    background-image:none;
    color:#868686;
    text-decoration:none;
    }
  
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
    }
  
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    }
  
@media screen and (max-width: 768px) {
    ul#css3menu1 > li {
        position: initial;
        }
      
    ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
        left: 0;
        right:auto;
        top: 100%;
        }
      
    ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 0;
        width: 100% !important;
        }
      
  

@media screen and (max-width: 289px) {
    ul#css3menu1 {
        width: 100%;
        }
      
    ul#css3menu1 > li {
        display: none;
        position: relative;
        width: 100% !important;
        }
      
    ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {
        display: block;
        }
      
    ul#css3menu1 > li.switch > label {      
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;}
HTML:
HTML:
<html>
    <head>
        <title>Menu</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0">
        <!-- Start css3menu.com HEAD section -->
        <link rel="stylesheet" href="menu.css" type="text/css" />
        <!-- End css3menu.com HEAD section -->
    </head>
    <body ontouchstart="">
        <div id="menucontainer">
            <!-- Start css3menu.com BODY section -->
            <input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
            <ul id="css3menu1" class="topmenu">
                <li class="switch"><label onClick="" for="css3menu-switcher"></label></li>
                <li class="topfirst"><a href="home.php" style="height:32px;line-height:32px;"><img src="css/img/home.png" alt=""/>Home</a></li>
                <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="css/img/news.png" alt=""/>Commesse</span></a>
                    <ul>
                        <li><a href="inserisci.php"><img src="css/img/favour.png" alt=""/>Nuova</a></li>
                        <li><a href="ricerca.php"><img src="css/img/find.png" alt=""/>Ricerca</a></li>
                    </ul>
                </li>
                <li class="toplast"><a href="#" style="height:32px;line-height:32px;"><span><img src="css/img/alarm_5.png" alt=""/>Appuntameti</span></a>
                    <ul>
                        <li><a href="qeleapp.php" target="_parent"><img src="css/img/service.png" alt=""/>Oggi</a></li>
                        <li><a href="insapp.php"><img src="css/img/add2_5.png" alt=""/>Carica</a></li>
                        <li><a href="ricapp.php"><img src="css/img/find2.png" alt=""/>Ricerca</a></li>
                    </ul>
                </li>
            </ul>
            <!-- End css3menu.com BODY section -->
        </div>
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
        <br /><br /><br /><br />
    </body>
<html>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83
Beh! Vedo che hai risolto!
 

elpirata

Utente Attivo
18 Mar 2009
230
7
18
Ciao Max1 buongiorno,
in che senso "vedi che ho risolto ???",
non ho ancora applicato la soluzione proposta da jonn, conto di farlo al più presto anche perchè per me è importante anche rilasciargli un feedback.

;)
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83