Allineamento verticale in una cella

haccah

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?

18andlife

@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
**

haccah

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?

claudioweb

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

haccah

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