[HTML] Non riesco a centrare menu orizzontale

elpirata · 21 Lug 2016

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 · 21 Lug 2016

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 · 2016-08-05T00:36:36+0200

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>
    <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 · 2016-08-07T23:06:58+0200

Beh! Vedo che hai risolto!

elpirata · 2016-08-08T11:09:41+0200

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 · 2016-08-08T14:51:07+0200

elpirata ha scritto:
in che senso "vedi che ho risolto ???",

Nel senso che il codice di Jonn funziona come tu volevi

Cerca

Cerca

[HTML] Non riesco a centrare menu orizzontale

elpirata

Utente Attivo

Max 1

Super Moderatore

Jonn

Utente Attivo

Max 1

Super Moderatore

elpirata

Utente Attivo

Max 1

Super Moderatore

Discussioni simili