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

    tab menu centrato verticalmente e orizzonatalmente

    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>

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    se i menu sono di una sola riga imposta il line-height pari all'height
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

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

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    in questo caso puoi risolvere impostando i vari[*] con display: inline-block (anziché float:left) e ai quali potresti dare vertical-align: middle
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

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

  6. #6
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    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>
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  7. #7
    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:

  8. #8
    ho provato cosi...

    Codice PHP:
    #menu{
    margin0;
    padding0;
    width666px;
    height60px;
    position:relative;
    background-color:red;
    }

    #menu ul{
    text-align:center;
    padding0;
    height:18px;
    width:600px;
    background-color:#999999;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-9px;
    margin-left:-300px;
    }

    #menu li{
    font-family:VerdanaArialHelveticasans-serif;
    font-size14px;
    backgroundtransparent url(tab.gifno-repeat;
    list-
    style:none;
    display:inline;
    margin-right:10px;
    }

    #menu li a{
    text-decorationnone;
    }

    #menu li a:hover{
    backgroundtransparent url(tab_over.gifno-repeat;

    Codice PHP:
    <div id="menu">
    <
    ul>[*][url="#"]tutti gli strumenti[/url][*][url="#"]musica[/url][*][url="#"]musica[/url][*][url="#"]musica[/url][/list]
    </
    div

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 © 2026 vBulletin Solutions, Inc. All rights reserved.