Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Problema alllineamento menu

    Ciao gente, sto realizzando un sito web con i css. Al momento tutto bene, tranne un problema di visualizzazione del menù. Su FF ed Opera appare spostato a sx, mentre su IE appare, come dovrebbe, al centro, integrato col corpo dell'intero sito.

    URL
    Codice css:
    codice:
    #chromemenu{
    width: 760px;
    background-color: #f0f0f0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }
    
    #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    #chromemenu ul{
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    margin: 0;
    float: left;
    font: bold 12px Verdana;
    }
    
    
    #chromemenu ul li{
    display: inline;
    }
    
    
    #chromemenu ul li a{
    float: left;
    color: #004e90;
    font-weight: bold;
    padding: 6px 12px 6px 7px;
    text-decoration: none;
    }
    
    #chromemenu ul li a:hover{
    color: #df0007;
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #e7e7e7; /*Theme Change here*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: #f0f0f0;
    width: 200px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=135,strength=2); /*Add Shadow in IE. Remove if desired*/
    }
    
    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #e2e2e2; /*Theme Change here*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: #004e90;
    }
    
    .dropmenudiv a:hover{ /*Theme Change here*/
    background-color: #e7e7e7;
    color: #df0007;
    }
    Per aspera ad astra

  2. #2
    Tu hai dato al menu il float:left, quindi Opera, FF, e Moz, interpretano corrttamente allineando a sinistra. Se vuoi centrarlo devi togliere il float a[*] e lasciare display:inline, ed in più devi dare text-align: center ad <ul>. ti consiglio anche di dare height: 0 a[*] per la compatibilità con IE5.

  3. #3
    Ho modificato il css come segue:
    codice:
    #chromemenu{
    width: 760px;
    background-color: #f0f0f0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    }
    
    #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    #chromemenu ul{
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    margin: 0;
    font: bold 12px Verdana;
    text-align: center
    }
    
    
    #chromemenu ul li{
    display: inline;
    height: 0px;
    }
    
    
    #chromemenu ul li a{
    color: #004e90;
    font-weight: bold;
    padding: 6px 12px 6px 7px;
    text-decoration: none;
    }
    
    #chromemenu ul li a:hover{
    color: #df0007;
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #e7e7e7; /*Theme Change here*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: #f0f0f0;
    width: 200px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=135,strength=2); /*Add Shadow in IE. Remove if desired*/
    }
    
    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #e2e2e2; /*Theme Change here*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: #004e90;
    }
    
    .dropmenudiv a:hover{ /*Theme Change here*/
    background-color: #e7e7e7;
    color: #df0007;
    }
    Ma non ho avuto il risultato sperato. :master:
    Per aspera ad astra

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.