• User Attivo

    menu CSS

    Ciao ragazzi,
    ho trovato su internet un menu fatto in css che fa al caso mio. L'ho modificato e sostanzialmente ho ottenuto quello che volevo. Unico problema è che al passaggio del mouse sulla parola, che apre in sottomenù, a volte crea problemi con i browser. Vi chiedo se potete fare anche voi delle prove con ie7 - firefox - safari e magari se vi riesce risolvermi il problema in modo che sia ok in tutti i browser. Grazie.

    [html]
    <!-- Begin Menu Columns -->
    <div id="menu_div">

    <div class="menu">

    <ul>
    <li>UNO<!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../link1.html" title="link1">link1</a></li>
    <li><a href="../link2.html" title="link2">link2</a></li>
    <li><a href="../link3.html" title="link3">link3</a></li>
    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>

    <li>DUE<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../link1.html" title="link1">link1</a></li>
    <li><a href="../link2.html" title="link2">link2</a></li>
    <li><a href="../link3.html" title="link3">link3</a></li>
    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>TRE<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../link1.html" title="link1">link1</a></li>
    <li><a href="../link2.html" title="link2">link2</a></li>
    <li><a href="../link3.html" title="link3">link3</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../about.html">about</a>

    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>

    </div>
    </div>
    <!-- End Menu Columns -->

    [/html]

    
     /* Menu */
    #menu_div {
    background-color: White;
    width: 912px;
    height: 27px;
    }
    
    .menu1_div {
    width: 225px;
    height: 27px;
    margin-right: 4px;
    float:left;
    text-align: center;
    }
    
    .menu2_div {
    width: 225px;
    height: 27px;
    font-size:8pt;
    float:left;
    text-align: center;
    }
    
               /*Parte CSS Menu */
    
    /* style the outer div to give it width */
    
    .menu {
    width:912px;
    height:20px;
    margin-top:100px;
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    .menu ul ul {
    width:150px;
    }
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    
    .menu li {
    float:left;
    width:228px;
    position:relative;
    text-align: center;
    font-size:12px;
    }
    
    
    /* style the links for the top level */
    
    .menu a {
    display:block;
    font-size:10px;
    text-decoration:none;
    color:Black;
    text-align: center;
    width:227px; 
    height:15px; 
    background: White; 
    }
    
    .menu a:visited {
    display:block;
    text-decoration:underline; 
    }
    
    /* style the table so that it takes no part in the layout - required for IE to work */
    
    .menu table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;}
    
    
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    bottom:15px;
    left:0; 
    width:228px;
    }
    
    
    /* style the top level hover */
    
    .menu :hover > a, .menu ul ul :hover > a {
    color:Black;
    background: White;
    }
    
    /* make the second level visible when hover on first level list OR link */
    
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    visibility:visible;
    height:auto;
    }
    

  • User Attivo

    Ciao,
    riusciresti a postare un link con il menu? Da una rapida occhiata non mi piacciono quelle tabelle all'interno degli ul.


  • User Attivo

    Claudio_c

    Grazie della risposta. Stasera o domani vedo di metterlo online e di darti il link. Ora sono fuori per lavoro. Ciao


  • User Attivo

    L'unico problema che ho trovato è relativo a text-decoration: underline; in .menu a:visited che in FF2 e IE7 non funziona mentre in Safari si.
    Per il resto a me non ha dato problemi.

    Se ci fai sapere che problemi ti da.

    Ciao


  • User Attivo

    Allora prometto che stasera vi metto il link con il menù.

    Vi spiego il problema per bene. Questo è un menù con 3 voci che con l'hover fa aprire (sopra le 3 voci) 3 sottomenu, 1 per voce. Con alcuni browser però non è semplice far alzare il sottomenu che si richiude subito, se non passo sulla voce in maniera decisa. Questo è l'unico problema e stasera con il link lo vedrete meglio.
    Intanto vi aggiorno intanto che ho fatto tanti test con i browser anche considerando il sistema operativo. Vi faccio un elenco:

    XP
    firefox ok
    ie ok

    VISTA
    firefox ok
    ie ok
    safari ok
    opera ok
    google chrome ok

    TIGER OSX
    firefox problema
    safari problema

    LINUX UBUNTU 8.10
    firefox ok
    opera problema

    Vi ringrazio dell'aiuto e spero che mi riusciate ad aiutare. Grazie. Andrea


  • User Attivo

    Allora ragazzi,

    vista la vostra gentilezza ho provveduto subito a metterlo online.

    Eccolo a questo link: http://www.webalice.it/andreatop/prova/

    Fatemi sapere, grazie.


  • User Attivo

    La butto li... non è che il codice html non valido c'entra qualcosa?

    Io non ho la possibilità di provarlo su diversi sistemi operativi.

    Ciao


  • User Attivo

    Ciao lumpi,

    grazie per la risposta. Cosa intendi per html non valido? Ciao.


  • User Attivo

    Ciao,
    effettivamente facendo la validazione tramite la web developer toolbar di firefox, la pagina restituisce un bel pò di errori. Penso siano tutti quei commenti condizionali.
    Purtroppo ora non riesco a studiarmelo bene, se vuoi dei menu che funzionino alla grande prova su ttp://lwis.net/free-css-drop-down-menu/, sicuramente trovi quello che fa a caso tuo.

    Claudio


  • User

    Ciao,
    come ha scritto claudio_c la validazione da un bel po si errori.

    Conosco i commenti condizionali (forse non abbastanza) ma in questo caso che scopo hanno visto che togliendoli non ho variazioni in IE7?

    Mi puoi dare un link dove approfondire?

    Scusate ho scritto col nick della collega...

    Lumpi


  • User Attivo

    Grazie lumpi e grazie Claudio.

    Cosa intendi per link > dove approfondire? comunque intanto mi vedo quel link di claudio. Grazie e continuate a darmi una mano, grazie. :smile5:


  • User Attivo

    Non capisco a che cosa possa servire un commento tipo

    <!--[if IE 7]><!--></a><!--<![endif]-->
    ```perciò se conosci delle pagine dove poter approfondire l'argomento ti sarei grato se me le potessi passare.
    
    Ciao

  • User Attivo

    lumpi non so cosa possa significare.

    io ho modificato un menu drop-up già esistente. c'era già.

    novità sul perchè faccia quel verso?

    alle brutte mi sapete dire come cambio un menu drop-down a drop-up? grazie


  • User Attivo

    Ciao,
    nella pagina che ti ho segnalato c'è il menu che fa a caso tuo: ttp://lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.upward.html.

    E' crossbrowser e richiede un pò di JS solo per IE6.

    Claudio.


  • User Attivo

    Grazie claudio. ora spippolo appena ho 2 minuti e provo a modificarlo come più mi piace.

    Vi faccio sapere come ho risolto. Ciao.


  • User Attivo

    Allora ragazzi nel weekend ho spippolato e ho risolto grazie al link di claudio_c. l'ho aggiustato e ora funziona. Grazie a tutti ciao


  • User Attivo

    Ottimo, ciao!
    Claudio.


  • User Attivo

    Ciao claudio_c,

    avrei un'altra cosa da chiederti. Io quel menu che mi hai linkato te, l'ho modificato e messo sul sito. Mi sono accorto che con IE6 non fa.

    Leggendo a destra e sinistra mi sa che potrebbe funzionare con dei javascript, ma non so bene come funzionino e come usarli nel mio. Mi dai una mano? Ciao.


  • User Attivo

    Ciao,
    prova a segnalarmi il link che verifico. Su IE6 il link che ti ho girato funziona.


  • User Attivo

    Grazie Claudio, il sito è: www.eleonoraspacchini.com . dove ho sbagliato per te? grazie mille. Andrea.