Impaginazione Css - Menu Button

**kakashi** · 11-04-2012, 16:43

Salve ragazzi sto creando un menu a button, ho creato un campo li a, con all'interno un background e poi dei padding per dare spazio al testo.

Ma come metto i dati, non riesco mai a centrarli perfettamente, vorrei sapere se al mio codice manca qualcosa ed eventualmente qualche soluzione visto che non ne vengo a capo. Grazie

Allego anche uno screen di come esce

codice:

#header div.menu{
                position: absolute;
                top: 132px;
                left: 160px;
                width: 795px;
                text-align: right
            }
            div.menu ul{
                list-style: none;
            }
            div.menu li{
                display: inline;
                width: 111px;
                height: 51px;
            }
            div.menu li a{
                font-size: 30px;
                background: url(images/button.png) no-repeat;
                font-family: 'Advent Pro', sans-serif;
                margin: 0px;
                padding: 13px 20px 13px 20px;
                width: 70px;
            }

codice:

<body>
    <div id="wrapper">
        <div id="header">
            <div class="logo">[img]images/logo-kude.png[/img]</div>
            <div class="menu">
                <ul>[*]home[*]servizi[*]folio[*]contatti[/list]
            </div>
        </div>
        <div class="contenitore">
            Prova
        </div>
        <div id="footer"></div>
    </div>
</body>

**kakashi** · 12-04-2012, 09:51

un piccolo aiuto no?

**Mich_** · 12-04-2012, 09:58

Hai gia` guardato i menu pronti?
Alcuni sono citati tra i "link utili" (a me piace come sono organizzati quelli di CSSplay)

Forse nessuno ha voglia di rispondere ad un tentativo di reinventare l'acqua calda ...

**kakashi** · 12-04-2012, 10:12

Non è un fatto di scoprire l'acqua calda, ma solo di aiutare.

Comunque grazie della risposta

**esseAemme** · 12-04-2012, 16:22

Ciao,

io proverei aggiungere a div.menu li e div.menu li a un centra verticalmente, e centra orizzontalmente...

Sam

**kakashi** · 12-04-2012, 16:25

Grazie alla fine ho risolto cercando meglio su internet posto la soluzione

codice:

 div.menu li{

                display: inline;

                width: 111px;

                height: 51px;

            }

            div.menu li a{

                font-size: 30px;

                background: url(images/button.png) no-repeat;

                font-family: 'Advent Pro', sans-serif;

                margin: 0px;

                padding: 13px 20px 13px 20px;

                width: 70px;

            }

            div.menu li a:hover{

                font-size: 30px;

                background: url(images/button-active.png) no-repeat;

                color: Black;

                margin: 0px;

            }*/

            ul {

                padding: 5px;

                margin: 10px 0;

                list-style: none;

                float: left;

                clear: left;

            }



            ul li {

                float: left;

                display: inline; /*For ignore double margin in IE6*/

                margin: 0 10px;

            }



            ul li a {

                float: left;

                font-size: 25px;

                background: url(images/button.png) no-repeat;

                font-family: 'Advent Pro', sans-serif;

                margin: 0px;

                padding: 0 0 10px 0;

                width: 111px;

            }



            ul li a span {

                margin: 0 auto;

                padding-left: 25px;

                padding-right: 5px;

                padding-top: 10px;

                padding-bottom: 10px;

                width: 50px;

                position: relative; /*To fix IE6 problem (not displaying)*/

                float:left;

            }

Discussione: Impaginazione Css - Menu Button

Strumenti discussione

Ricerca discussione

Visualizza

Impaginazione Css - Menu Button

Permessi di invio