• User Attivo

    Allineamento verticale in una cella

    Non riesco ad allineare verticalmente i testi che stanno dentro una cella.
    Mi si schiacciano tutti verso l'alto.
    Ho provato a usare l'attrbuto vertical-align, ma senza succeso (al massimo faccio arrivare la scritta a metà cella).
    Come fare?
    Devo lavorare sulle proprietà del testo o su quelle della cella?


  • User Attivo

    @HaccaH said:

    Non riesco ad allineare verticalmente i testi che stanno dentro una cella.
    Mi si schiacciano tutti verso l'alto.
    Ho provato a usare l'attrbuto vertical-align, ma senza succeso (al massimo faccio arrivare la scritta a metà cella).
    Come fare?
    Devo lavorare sulle proprietà del testo o su quelle della cella?

    ciao,
    magari posta il codice, così si può essere più precisi. 😉

    In linea di massima ti consiglio di utilizzare i CSS per il posizionamento.

    Se intendi lavorare sul blocco di testo utilizza l'attributo margin, altrimenti puoi lavorare direttamente sulla cella, utilizzando l'attributo **padding.

    fai qualche esperimento poi facci sapere :ciauz:
    **


  • User Attivo

    meglio che posto il codice, che è meglio:
    [HTML]
    <table>
    <tr height="80px" align="center"><td class="menu"><h2><a href="" class="menu"> chi siamo</a></h2></td></tr>
    </table>
    [/HTML]
    e il foglio di stile è così:
    [HTML]td.menu { border-top:1px solid #000000;
    border-right:1px solid;
    border-bottom:1px solid;
    vertical-align:middle}
    a.menu:link { font-family:Arial;
    font-size:15px;
    font-weight:500;
    text-transform:lowercase;
    text-decoration:none;
    color:#0000FF}
    a.menu:visited { font-family:Arial;
    font-size:15px;
    font-weight:500;
    text-transform:lowercase;
    text-decoration:none;
    color:#0000FF}
    a.menu:active { font-family:Arial;
    font-size:15px;
    font-weight:500;
    text-transform:lowercase;
    text-decoration:none;
    color:#0000FF}
    a.menu:hover { font-family:Arial;
    font-size:16px;
    font-weight:500;
    text-transform:uppercase;
    text-decoration:none;
    color:#FF0000}[/HTML]

    Ho messo vertical-align a midlle perchè era l'unico attributo che abbassava la scritta. Se provavo con bottom o baseline, comunque non cambiava niente.
    Ora, utilizzando qualsiasi attributo o foglio si stile, non sono riuscito ad allineare la scritta ciao al bordo basso della tabella.
    Ho provato a unire padding e margin, ma niente.

    come faccio?


  • Super User

    Ciao... un errore è evidente (quello in rosso)... Ci vuole bottom e non middle...

    Poi ci vuole un aggiunta (quelle in giallo), cioè ridurre le dimensioni dell'h2 che di default ha un bel margine.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    td.menu {
        border-top:1px solid #000000;
       border-right:1px solid; 
       border-bottom:1px solid;
       vertical-align:bottom;
       }
    h2.menu {
    margin:0;
       }
    a.menu:link {  font-family:Arial;
         font-size:15px;
         font-weight:500;
         text-transform:lowercase;
         text-decoration:none;
         color:#0000FF}
    a.menu:visited { font-family:Arial;
         font-size:15px;
         font-weight:500;
         text-transform:lowercase;
         text-decoration:none;
         color:#0000FF}
    a.menu:active {  font-family:Arial;
         font-size:15px;
         font-weight:500;
         text-transform:lowercase;
         text-decoration:none;
         color:#0000FF}
    a.menu:hover {  font-family:Arial;
         font-size:16px;
         font-weight:500;
         text-transform:uppercase;
         text-decoration:none;
         color:#FF0000}
    -->
    </style>
    </head>
    
    <body>
     <table>
         <tr height="80px" align="center"><td class="menu"><h2 class="menu"><a href="" class="menu"> chi siamo</a></h2></td></tr>
    </table>
    </body>
    </html>
    
    

    Potrebbero esserci altri errorini, o parti superflue, ma per rapidità mi limito alla risoluzione del problema 🙂

    :ciauz:


  • User Attivo

    Perfetto... ora funziona..
    Era che mi dimenticavo di togliere il margine dell'h2, come hai scritto.
    grazie