• User Newbie

    Problema con menu

    Ciao ragazzi ho provato a fare un menu in CSS basandomi su uno preso da un sito..ecco
    il codice HTML

    [php]
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
    <div id="content-head">

    <ul class="tabs">
        <li class="first"></li>
        <li><a class="on" href="xxx.com">summary</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href=xxx.com">styles</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href="xxx.com">essentials</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href="xxx.com">most popular</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a class="on" href="xxx.com">highest rated</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href="xxx.com">artists A-Z</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href="xxx.com">forums</a></li>
        <li class="spaz"><img src="telefilmenu-border.gif" alt="|"></li>
        <li><a href="xxx.com">editor's blog</a></li>
        <li class="last"></li>
    </ul>
    

    </div>
    </body>
    </html>
    [/php]CSS

    [php]
    /* CONTENT HEAD */

    #content-head {
    height: 140px;
    background: top left no-repeat #000;
    border-bottom: 1px solid #56564A;
    position: relative;
    }

    height: 36px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    left: 10px;
    }
    li {
    height: 36px;
    margin: 0;
    padding:0;
    list-style: none;
    float: left;
    }
    li a {
    height: 36px;
    padding: 0 5px;
    font: bold 12px Arial;
    text-decoration:none;
    color: #000000;
    float: left;
    background: url(telefilmenu.gif) repeat-x;
    }
    .spaz{
    width: 1px;
    height:36px;
    vertical-align: bottom;
    padding: 0 5px 0 5px;
    background: url(telefilmenu.gif) repeat-x;
    }
    li a:hover {
    text-decoration: underline;
    }
    li a.on {
    background: #006F9F;
    text-decoration: none;
    color: #FFFFFF;
    }

    background: url(telefilmenu-sx.gif) no-repeat;
    width: 10px;
    height:36px;
    }
    li.last {
    background: url(telefilmenu-rx.gif) no-repeat;
    width: 10px;
    height:36px;
    }

    [/php]Er ora i problemi 😄

    Testo non centrato verticalmente..
    Su quel sito nell'"id content-head li a" alla linea:

    font: bold 12px Arial;

    loro usavano
    font: bold 12px/36px Arial;

    E il font stava centrato..
    Problema: io nel mio sito ho già impostato tt i font, e non vorrei star qua a reimpostare questo solo per poter mettere /36px (perkè io dopo la linea del css dove si sceglie il font la tolgo).

    Secondo problema: con IE il "menu grigio", cioè l'UL, è 10px dal basso, e non attaccato..perkè?

    Ciao thx 😄


  • Super User

    Ciao,

    modificando font: bold 12px/36px Arial; hai tolto il line-height (il 36px).

    Per centrare verticalmente una riga di testo (come nel caso dei link), serve impostare un line-height pare a l'altezza del suo elemento genitore. Infatti quelli 36px sono anche l'altezza degli elementi...aggiungilo nel css.

    Non ho capito il secondo problema.:bho:


  • User Newbie

    Ciao, grazie mille per il primo aiuto, ho risolto.

    Il secondo problema invece è che con IE 7 e solo con IE il mio menu "UL" rimane 10 px rialzato dal basso,e non capisco perchè..