in una <td> vertical-align non ubbidisce sempre

[KillerWorm]

Hai ragione. Non stavo considerando quel fatto. In tal caso è corretto reimpostare display:table-cell, come hai fatto.

[jomla]

Sto lavorando su una nuova pagina di prova che adotta i <div> anziché le tabelle.
Ho settato i <div> che dovranno contenere la traduzione e la foto con position:absolute per avere la massima precisione nel posizionamento e li ho inseriti in un <div> settato con position:relative e height:auto.
Avevo infatti pensato che una volta riempiti i 2 div interni rispettivamente 1 con la traduzione e 1 con la foto avrebbero causato un'aumento proporzionale del div che li contiene il quale avrebbe spinto in basso la tabella fonetica come faceva la versione tabellare.
Invece il div contenitore non spinge in basso la tabella fonetica ma la va a coprire quando i 2 div interni aumentano di altezza.
Immagino quindi che dovrò fare a meno del position:absolute nei 2 div dinamici a meno che non esita un sistema migliore.
La tabella era molto comoda per ottenere un corretto posizionamento

[lucavizzi]

Gli elementi cui applichi la position absolute "escono dal flusso del documento", se hai bisogno di "spingere in basso" i restanti contenuti usa il float.

<div id="wrapper">

    <div class="floated">
        <!--contenuti di sinistra-->
    </div>

    <div class="floated">
        <!--contenuti di destra-->
    </div>

</div>

<style type="text/css">
#wrapper{
    width:1000px;
    margin:auto;
    clear:both;
    /*se ci sono contenuti flottati all'interno bisogna impostare un overflow:hidden affinché il div si "espanda" in verticale*/
    overflow:hidden; 
}
.floated{
    width:50%;
    float:left;
}

</style>

[KillerWorm]

Ciao, come per tutte le cose, chiaramente non è così semplice ottenere un risultato ottimale senza aver fatte proprie le tecniche di base, utili a raggiungere tale scopo.

Per chi è abituato all'uso di tabelle, per la costruzione dei layout, è normale che passando ad un approccio moderno, per la costruzione di layout senza tabelle, ci si trovi un po' in difficoltà.
Bisogna studiare, capire e fare propri dei nuovi concetti basati sul corretto uso dei css. Senza dubbio ci vorrà del tempo per comprendere bene il tutto ed utilizzarlo al meglio.

Senza alcuna offesa, credo che quello che hai fatto non è "rifare tutto il lavoro in versione moderna", hai semplicemente sostituito gli elementi della tabella con dei div e degli span applicandogli qualche regola css, ma questo è come voler mettere, dentro il cofano di una cinquecento, il motore di una formula uno. Qualcosa andrà storto di sicuro.

Ad ogni modo il mio precedente appunto voleva essere prima di tutto informativo. Non era mia intenzione spronarti nel rifare tutto il lavoro di quella pagina (bisognerebbe comunque valutarne la necessità), anche perché l'intero tuo sito è di vecchia concezione.

Resta chiaro che nessuno ti proibisce di continuare ad usare le tabelle per il layout, ma che questo è comunque un metodo inappropriato e deprecabile.

Il mio consiglio è questo: se vuoi veramente rifare il tutto secondo una concezione moderna, perché magari può tornare utile prima di tutto a te stesso per accrescere da un punto di vista tecnico/professionale, devi necessariamente buttare via l'intera vecchia struttura, iniziare da zero e andare per gradi, ma la vedo un po' in salita se pensi di risolvere tutto attraverso una discussione su un forum.
Diversamente, se si tratta solo di qualche pagina creata più che altro per tuo diletto e secondo le tue vecchie conoscenze informatiche, allora tiene tranquillamente le tabelle.. la media degli utenti non si accorgerà nemmeno che tu stia usando un layout tabellare, anzi probabilmente non saprà cogliere nemmeno la differenza tra l'uno e l'altro.

Chiaramente sei libero di fare ciò che credi sia meglio

[OT]
Qualche nota "fuori tema"...

Sul codice della tua pagina ho notato questa riga:

$('parola').focus();

Non ha molto senso. Presumo ci sia un errore. Se deve riferirsi all'elemento con id="parola" allora dovrai scrivere così:

$('#parola').focus();

Nella "Tavola fonetica" hai scritto: "zeta sonora ... come in azione", ma "azione" non dovrebbe avare la "zeta sorda"?! Perdona eventualmente la mia ignoranza ma sul mio vecchio dizionario mi risulta così.
Ho pensato che magari fosse "sonora" per il dialetto romagnolo imolese ma sul traduttore della tua pagina non viene trovata alcuna corrispondenza per questo termine...

Giusto un consiglio: non sarebbe meglio indicare "zeta sonora come in zanzara", così da avere anche un riscontro col traduttore proposto?
[/OT]

[jomla]

Ciao, come per tutte le cose, chiaramente non è così semplice ottenere un risultato ottimale senza aver fatte proprie le tecniche di base, utili a raggiungere tale scopo.


Per chi è abituato all'uso di tabelle, per la costruzione dei layout, è normale che passando ad un approccio moderno, per la costruzione di layout senza tabelle, ci si trovi un po' in difficoltà.
Bisogna studiare, capire e fare propri dei nuovi concetti basati sul corretto uso dei css. Senza dubbio ci vorrà del tempo per comprendere bene il tutto ed utilizzarlo al meglio.

Infatti io ti ringrazio infinitamente per avermi indicato la retta via e la seguirò soprattutto da febbraio quando andrò in pensione

Senza alcuna offesa, credo che quello che hai fatto non è "rifare tutto il lavoro in versione moderna", hai semplicemente sostituito gli elementi della tabella con dei div e degli span

No...... direi che è il contrario perchèè sono partito da un modellino di una tabella che ho trovato e vi ho inserito i miei 2 <form> ma la storia non cambio e tu hai ragionissimo

Ad ogni modo il mio precedente appunto voleva essere prima di tutto informativo. Non era mia intenzione spronarti nel rifare tutto il lavoro di quella pagina (bisognerebbe comunque valutarne la necessità),

Tutt'altro ........
Ho già valutato la necessità di farlo e lo farò

Il mio consiglio è questo: se vuoi veramente rifare il tutto secondo una concezione moderna, perché magari può tornare utile prima di tutto a te stesso per accrescere da un punto di vista tecnico/professionale, devi necessariamente buttare via l'intera vecchia struttura, iniziare da zero e andare per gradi, ma la vedo un po' in salita se pensi di risolvere tutto attraverso una discussione su un forum.

certo

[OT]
Qualche nota "fuori tema"...


Sul codice della tua pagina ho notato questa riga:

$('parola').focus();

Non ha molto senso. Presumo ci sia un errore. Se deve riferirsi all'elemento con id="parola" allora dovrai scrivere così:

$('#parola').focus();

no $();è una mia funzione e va bene così

Nella "Tavola fonetica" hai scritto: "zeta sonora ... come in azione", ma "azione" non dovrebbe avare la "zeta sorda"?! Perdona eventualmente la mia ignoranza ma sul mio vecchio dizionario mi risulta così.
Ho pensato che magari fosse "sonora" per il dialetto romagnolo imolese ma sul traduttore della tua pagina non viene trovata alcuna corrispondenza per questo termine...


Giusto un consiglio: non sarebbe meglio indicare "zeta sonora come in zanzara", così da avere anche un riscontro col traduttore proposto?
[/OT]

imperdonabile mio errore