tab menu centrato verticalmente e orizzonatalmente

**stellina81** · 28-03-2009, 18:58

Ciao a tutti,
ho un menu orizzontale a tab. Devo centrare le voci di menu all'interno del tab, sia in orizzontale che in verticale.
A farlo in orizzontale non ho alcun problema ma non riesco a centrare le scritte in verticale.
Avete qualche suggerimento???

grazie!!

#menu{
margin: 0;
padding: 0;
width: 666px;
height: 60px;
display:block;
text-align: left;
}

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#menu li{
margin: 0 15px 0 0;
padding: 0;
float: left;
font-size: 14px;
text-align: center;
background: transparent url(tab.gif) no-repeat;
}

#menu li a{
width: 98px;
height: 60px;
padding: 12px 0;
line-height: 14px;
display: block;
float: left;
text-decoration: none;
}

#menu li a:hover{
background: transparent url(tab_over.gif) no-repeat;
}

<div id="menu">
<ul>
[*]tutti gli strumenti
[*]musica
.....

[/list]
</div>

**fcaldera** · 28-03-2009, 19:03

se i menu sono di una sola riga imposta il line-height pari all'height

**stellina81** · 28-03-2009, 19:08

il problema è che alcune voci sono su due righe e altre stanno su una riga sola...

**fcaldera** · 28-03-2009, 19:31

in questo caso puoi risolvere impostando i vari[*] con display: inline-block (anziché float:left) e ai quali potresti dare vertical-align: middle

**stellina81** · 28-03-2009, 19:45

ho provato la tua soluzione, ma "vertical-align: middle" non fa nulla.

**fcaldera** · 28-03-2009, 19:56

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />

        <title>Inline Blocks test</title>


        
        <style type="text/css">
        html, body {
            margin          : 0;
            padding         : 0;
        }

        body {      
            text-align      : center;
            font-size       : 12px;
        }
        
        .ib {
            display         : inline-block;
        }


        .ib {
            width           : 150px;
            vertical-align  : middle;
            *margin-top     : -1px;
            *display        : inline;
        }

        </style>

    </head>

<body>

    <h1>inline-block</h1>

    



    <ul>
            <li class="ib">

            

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt.</p>

        <li class="ib">

            

Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>

        <li class="ib">

            

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
            enim ad minim veniam.</p>

        [/list]

</body>
</html>

**stellina81** · 28-03-2009, 21:04

se fisso l'altezza del blocco non funziona più l'allineamento verticale,
considera che ogni tab ha un'immagine di sfondo con gli angoli arrotondati per cui ho bisogno di fissare le dimensioni del blocco altrimenti l'immagine di sfondo risulta tagliata.
per di più utilizzi questo codice

<li class="menu">musica
al posto di
<li class="menu">

storia</p>
non funziona più l'allineamento verticale...

mi interessa approfondire la questione....

:master:

**StefanoFilter** · 29-03-2009, 14:58

ho provato cosi...

Codice PHP:


#menu{

margin: 0;

padding: 0;

width: 666px;

height: 60px;

position:relative;

background-color:red;

}



#menu ul{

text-align:center;

padding: 0;

height:18px;

width:600px;

background-color:#999999;

position:absolute;

top:50%;

left:50%;

margin-top:-9px;

margin-left:-300px;

}



#menu li{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

background: transparent url(tab.gif) no-repeat;

list-style:none;

display:inline;

margin-right:10px;

}



#menu li a{

text-decoration: none;

}



#menu li a:hover{

background: transparent url(tab_over.gif) no-repeat;

}

Codice PHP:


<div id="menu">

<ul>[*][url="#"]tutti gli strumenti[/url][*][url="#"]musica[/url][*][url="#"]musica[/url][*][url="#"]musica[/url][/list]

</div>

Discussione: tab menu centrato verticalmente e orizzonatalmente

Strumenti discussione

Ricerca discussione

Visualizza

tab menu centrato verticalmente e orizzonatalmente

Permessi di invio