[HTML] Non riesco a centrare menu orizzontale

elpirata

Utente Attivo
18 Mar 2009
264
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.372
338
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.372
338
83
Beh! Vedo che hai risolto!
 

elpirata

Utente Attivo
18 Mar 2009
264
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.

;)
 
Discussioni simili
Autore Titolo Forum Risposte Data
D [HTML] Non riesco aprire foto singole in un album creato con "iWebAlbum" HTML e CSS 1
A Html e css non riesco a capire l'errore HTML e CSS 13
W Non riesco a integrare php con html PHP 1
I Non riesco a vedere i codici html Windows e Software 4
A [HTML] Testo mail non visualizzabile su IOS HTML e CSS 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
E [HTML] non apre link a file locale ma se lo imposto su barra indirizzi lo apre HTML e CSS 3
M [HTML] Picture Tag non funziona in header-Element HTML e CSS 0
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
L [HTML] Caricato sito sul server, ma non funziona con tutti i browser HTML e CSS 2
P [HTML] Codice non funzionante su ZP HTML e CSS 1
Koboshi [HTML] Line-height non funziona ç_ç HTML e CSS 3
I [HTML] @font-face non trova i fonts HTML e CSS 16
I [HTML] <ul> markers non appaiono HTML e CSS 17
G [HTML] Glyphicon non visualizzate in internet explorer Content Management System (CMS) 1
S [HTML] Problema non visibilità del sito HTML e CSS 1
Shyson [HTML] Colonna non scrolla quando arriva sopra la pagina HTML e CSS 0
momeraths [HTML] Come non far scaricare video HTML e CSS 1
G [HTML] il browser non legge le texture predefinite HTML e CSS 4
G [HTML] Visualizzare iframe in un blog non funziona sempre xchė? HTML e CSS 3
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3
WebDr [HTML] Link non link HTML e CSS 3
A [HTML] Checkbox non visibili su tutti i browser HTML e CSS 3
E [HTML] Sito responsive non visualizzato su Samsung HTML e CSS 1
A [HTML] background fisso che non si ridimensiona con lo zoom HTML e CSS 4
P [HTML] Passaggio Url tramite Form non funziona più HTML e CSS 8
A [WordPress] [HTML] Nth-child non funziona più WordPress 3
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
Monital [HTML] le inpuit text non si rimpiccioliscono se si diminuisce la finestra del browser HTML e CSS 4
R [HTML] La finestra del browser non si autoadatta al mio sito HTML e CSS 3
F [HTML] Scalare un div ma non il suo contenuto HTML e CSS 1
R Perchè non si riescono a settare dinamicamente i parametri di una pagina HTML? Javascript 1
M Mail in html con allegato non coesistono? PHP 6
M Form html-php, la pagina php non mi rileva la variabile PHP 5
M Perchè non invia la mail in formato html? PHP 5
M Il menu HTML funziona correttamente se richiamato da un file php non funziona più PHP 3
C Script Javascript/Html che con internet Explorer non viene visualizzato. Javascript 7
Q php/html non stampa i valori PHP 3
G non visualizza filmato swf in sito html HTML e CSS 2
F Non visualizzare index.html Webdesign e Grafica 1
T Mail: non funzionano i codici html! PHP 6
T unloadmovie in html non va! Flash 0
L Netbeanse non compila javascript/html Javascript 1
SolidSnake4 invio mail html con php non va PHP 6
F HTML non lavora dal menu Visualizza x Kodemondo HTML e CSS 3
L [AJAX] explorer: modulo form non presente nell'html Ajax 0
G Come non far scaricare immagini da sito html Javascript 5
J Invio email e il browser non interpreta l'html... Windows e Software 2
M html con inerzia javascript..non funge..help Javascript 0

Discussioni simili