[TABLE] come evitare riproporzionamento altezza righe

**Jarno** · 30-03-2005, 13:37

ho un sito così impostato:

codice:

+-----------+--------+
| contenuto | Menu 1 |
| sito      |--------|
|           | Menu 2 |
+-----------+--------+

è tutto allineato verticalmente al TOP e con altezze fissate in PX, ma quando il contenuto del sito si allunga eccessivamente il browser (IE in particolare) mi riproporziona i TD dei menu ! ma chi glielo ha chiesto !?!?

finora ho sempre risolto mettendo una "zeppa" in fondo al Menu2 così da tenere tutto pressato verso l'alto ed evitare il riproporzionamento

...ma ora mi chiedo ...è normale tutto questo o sono io che non so qualcosa? :master:

**alexdem24** · 30-03-2005, 14:03

perche' non utilizzi i css per posizionare i menu ?

**Jarno** · 30-03-2005, 14:11

credo tu intenda suggerirmi di usare i CSS al posto dei TABLE, vero? è una "tendenza" nuova che ho scoperto oggi ...ma per ora non ho voglia di risettarmi il cervello, casomai lo farò nei nuovi lavori, ma in quelli già fatti dovrei rilavorarci troppo

se invece intendevi suggerirmi di impostare l'allineamento e le grandezze con i CSS ....ti dico che è già così

do un esempio pratico di ciò che succede:

codice:

situazione iniziale:
+-----------+--------+
| contenuto | Menu 1 |
| sito      |--------|
|           | Menu 2 |
+-----------+--------+

situazione successiva desiderata (dato che è allineato tutto in alto e dato che ho fissato l'altezza di menu1):
+-----------+--------+
| contenuto | Menu 1 |
| sito      |--------|
| molto     | Menu 2 |
| molto     |        |
| lungo     |        |
+-----------+--------+

situazione successiva effettivamente ottenuta:
+-----------+--------+
| contenuto | Menu 1 |
| sito      |        |
| molto     |--------|
| molto     | Menu 2 |
| lungo     |        |
+-----------+--------+

per questo usao una "zeppa" invisibile che si ridimensiona a secondo del contenuto del sito:
+-----------+--------+
| contenuto | Menu 1 |
| sito      |--------|
| molto     | Menu 2 |
| molto     | XX     |
| lungo     | XX     |
+-----------+--------+

tutto questo è normale o sono fuori di testa?

**alexdem24** · 30-03-2005, 14:32

tutto questo è normale o sono fuori di testa?

Bhe, diciamo che vai a complicarti la vita per una cosa molto semplice.

Io volevo consigliarti di utilizzare i css per questo specifico caso.
Ovviamente sarebbe meglio per te utilizzare i css per tutta la paginazione; sono stati creati per questo, ma capisco che potrebbe risultarti troppo lungo quindi.

Quello che intendevo e' utilizzare un'opzione dei css per impostare l'altezza delle celle del menu.
Ad ogni td inserisci una cosa del tipo:

codice:

<td style="height:50px padding-top:4px">Menu1</td>

Dove con height imposti l'altezza della cella, mentre con il padding-top stabilisci la distanza che intercorre tra il bordo in alto della cella ed il testo.

A mio avviso ti converrebbe fare una classe in css, in modo da avere una sola dichiarazione per tutto il menu, con i vantaggi di dover fare una sola modifica nel caso decidessi di aumentare l'altezza delle celle.

Ma dipende da te.

Ciao

**Jarno** · 30-03-2005, 14:41

grazie 1000 per la risposta ...ma questo l'ho già fatto, è tutto formattato con i CSS (salvo appunto il layout che è fatto con TABLE)

il problema è che l'altezza/larghezza delle celle è interpretata dai browser come dimensione minima ovvero sotto i 50px (prendendo il tuo esempio) non si va di sicuro, ma se c'è uno spazio in eccesso, questo viene ridistribuito in proporzione tra tutte le celle:

1. ALTEZZE FISSATE: solo Menu1 50px, il resto è libero
2. ALTEZZE EFETTIVE: contenuto 700px, Menu1 50px, Menu2 550px
3. COSA FA IL BROWSER: ridistribuisce lo spazio eccedente (700-50-550=100px) tra Menu1 e Menu2

**alexdem24** · 30-03-2005, 14:43

per curiosita' mi posti il codice del table che hai ?

**Jarno** · 30-03-2005, 14:55

ti ho creato un esempio semplice semplice:

codice:

<HTML>
<BODY>
<TABLE border=1>
<TR>
  <TD rowspan=2 style="vertical-align:top">
	corpo
corpo
corpo
corpo
corpo
corpo
corpo

	corpo
corpo
corpo
corpo
corpo
corpo
corpo

	corpo
corpo
corpo
corpo
corpo
corpo
corpo

	</TD>
  <TD style="height:50px; vertical-align:top">
	Menu1
	</TD></TR>
<TR>
  <TD style="vertical-align:top">
	Menu2
	</TD></TR></TABLE>
</BODY>
<SCRIPT language="Javascript">alert("La cella Menu1 è grande: "+document.getElementById('Menu').offsetHeight+"px");</SCRIPT>

</HTML>

**Jarno** · 30-03-2005, 15:44

possibile che nessuno abbia mai notato questo effetto? eppure il mio esempio lo mostra molto semplicemente....

Discussione: [TABLE] come evitare riproporzionamento altezza righe

Strumenti discussione

Ricerca discussione

Visualizza

[TABLE] come evitare riproporzionamento altezza righe

Permessi di invio