[HTML 5] Creare un'immagine dinamica per selezionare i posti in un cinema cliccando

[Dani88]

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?

[DanieleC88]

Secondo me ti converrebbe fare il tutto con degli elementi separati, come in una tabella. Ogni "cella" rappresenterebbe un posto ed avrebbe l'uno o l'altro colore. Puoi anche usare delle immagini, in modo da far apparire bene il tutto.

Se proprio vuoi usare un <canvas>, allora devi disegnarlo a mano ed implementare un gestore per l'evento onmousedown (usa attachEvent su Internet Explorer ed addEventListener sugli altri!) e in base alle coordinate del click, poi, puoi scegliere cosa fare (prenotare il posto o altro).

ciao ;)

EDIT: questo potrebbe tornarti utile se vuoi percorrere la seconda strada: https://developer.mozilla.org/en/HTML/Canvas

[MaxArt]

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?No, rischi di complicarti le cose. E poi manca ancora il supporto di IE.

La sala del cinema come la rappresenti? Con una tabella rettangolare? Con una disposizione ad arco?
Io direi di provare col vetusto (dall'HTML 3.0 se non erro) ma efficente tag <map> ed i suoi figli <area>.

[DanieleC88]

E poi manca ancora il supporto di IE.
Vero, ma lo si può aggirare: http://excanvas.sourceforge.net/
In attesa che Microsoft muova il culo...

[nico159]

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?
Va benissimo, puoi usare framework come http://raphaeljs.com che utilizza canavas su tutti i browser, a parte IE dove viene usato VML

Guarda anche la controparte per i grafici, http://g.raphaeljs.com sopratutto questo esempio http://g.raphaeljs.com/dotchart.html

In attesa che Microsoft muova il culo...
IE9 ;)

[MaxArt]

Vero, ma lo si può aggirare: http://excanvas.sourceforge.net/
In attesa che Microsoft muova il culo...Lo muoverà con l'uscita di IE9, per ora nulla da fare.
C'è anche Chrome Frame per IE se si vogliono vedere i <canvas>.
Ma non toglie ancora che i semplici disegni vettoriali che si creano con lineTo, fillRect ed altre menate non sono facilmente trattabili. Ad esempio, come fai per gli eventi?

Va benissimo, puoi usare framework come http://raphaeljs.com che utilizza canavas su tutti i browser, a parte IE dove viene usato VML

Guarda anche la controparte per i grafici, http://g.raphaeljs.com sopratutto questo esempio http://g.raphaeljs.com/dotchart.htmlQuello non è <canvas>, è un SVG generato dinamicamente.

[nico159]

Quello non è <canvas>, è un SVG generato dinamicamente.
Sì hai ragione, scusate

[fero86]

La sala del cinema come la rappresenti? Con una tabella rettangolare? Con una disposizione ad arco? che?! tu hai mai visto un cinema coi posti disposti ad arco? :D

[DanieleC88]

Ad esempio, come fai per gli eventi?
Mi ci sto scontrando ultimamente. Ti farò sapere. :D

[MaxArt]

Sì hai ragione, scusateIl che non vuol dire che non sia una buona idea, intendiamoci: sono tecnologie (SVG e VML) implementate in almeno il 98% dei browser su Internet.
Il VML poi ha anche la gestione degli eventi classica dell'HTML, mentre non ti so dire per i SVG. Di contro devono andare in modalità speciale, ma comunque non credo gliene importi.

che?! tu hai mai visto un cinema coi posti disposti ad arco? :DSì, se sono particolarmente capienti. O quantomeno non hanno la classica disposizione rettangolare, ma i posti laterali sono leggermente angolati verso il centro.

Mi ci sto scontrando ultimamente. Ti farò sapere. :DBravo! :)
Per me invece basta una comune funzione Javascript:
function isInside(point, plist) {
var lc=0, i=0, p, op=plist[plist.length-1];
for (; i<plist.length; i++, op=p) {
p=plist[i];
if ((p.y>=point.y && op.y<point.y) || (p.y<point.y && op.y>=point.y))
if ((p.x>=point.x && op.x>point.x) || (p.x>point.x && op.x>=point.x)
|| p.x+(point.y-p.y)*(op.x-p.x)/(op.y-p.y)>=point.x) lc++;
}
return lc%2===1;
}Questa prende un punto (oggetto con membri numerici x e y) e restituisce vero se è all'interno del poligono delimitato dall'array di punti plist (i punti devono essere in senso orario o antiorario, ovviamente non a casaccio).

[Dani88]

mhmmm dunque non ho capito molto la logica con cui dovrei farlo. Cioè io devo partire con un'img di base e costruirgli sopra una "griglia nascosta" che mi permetta di capire dove si clicca? Oppure devo proprio generare tutta l'img via codice?

[MaxArt]

mhmmm dunque non ho capito molto la logica con cui dovrei farlo. Cioè io devo partire con un'img di base e costruirgli sopra una "griglia nascosta" che mi permetta di capire dove si clicca? Oppure devo proprio generare tutta l'img via codice?Generarla via codice puoi farlo, ma non sarà mai al 100% fedele. In questo caso puoi usare la funzione che ho scritto.
Se invece usi un'immagine fissa è meglio l'opzione della "griglia invisibile".

[Dani88]

dunque ho fatto una prova veloce:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var seatDimension=30;
var startX=20;
var startY=30;
var column=0;
var row=0;
var canvas = document.getElementById('prova');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
while(column<400+startY){
while(row<200+startX){
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (column+startY,row+startX, seatDimension, seatDimension);
row+=seatDimension+10;
}
row=0;
column+=seatDimension+10;
}
}
else {
// canvas-unsupported code here
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black;}
</style>
</head>
<body onload="draw();">
<canvas id="prova" width="600" height="600"></canvas>
</body>
</html>

ho usato quindi un canvas per disegnare dei quadrati di 30x30 distanziati di 10px.
Ma con la roba che disegno su canvas posso poi interagire?
O si tratta solo di disegno puro senza altre possibilità di interazione?

[DanieleC88]

Se proprio vuoi usare un <canvas>, allora devi disegnarlo a mano ed implementare un gestore per l'evento onmousedown (usa attachEvent su Internet Explorer ed addEventListener sugli altri!) e in base alle coordinate del click, poi, puoi scegliere cosa fare (prenotare il posto o altro).

.

[MaxArt]

ho usato quindi un canvas per disegnare dei quadrati di 30x30 distanziati di 10px.Io spero tanto che questo sia solo un abbozzo di quello che vuoi fare, perché per fare cose del genere usare <canvas> è eccessivo ed inutilmente complicato.

[Dani88]

Io spero tanto che questo sia solo un abbozzo di quello che vuoi fare, perché per fare cose del genere usare <canvas> è eccessivo ed inutilmente complicato.
Si si ovviamente non voglio fare i posti con i quadratini :D :D avevo in mente una cosa del tipo:
http://img146.imageshack.us/img146/6186/immaginexp.png (http://img146.imageshack.us/i/immaginexp.png/)

Stavo rivalutando anche quanto suggerito da DanieleC88 di usare elementi separati. Potrei usare l'immagine di una poltrona singola (con colori diversi) replicata a seconda delle necessità.
A quel punto dovrebbe essere forse più semplice gestire gli eventi di click?

[DanieleC88]

Eh be' sì. A quel punto è solo un lavoro meccanico, ma è mooooolto più semplice. IMHO.

[Dani88]

ho buttato giù una prova veloce col metodo da te consigliato:
<style type="text/css">
table#disposizione_posti{
cursor:pointer;
border-collapse: separate;
border-spacing:10px;
}
td {
width:30px;
height:30px;
text-align:center;
}
</style>

<script>
var counter=0;
var posti=new Array();
function mouseOut(e){
//e.style.backgroundColor="green";
}

function selectSeat(e){
if(document.getElementById(e).alt=="empty"){
document.getElementById(e).alt="full"
document.getElementById(e).src="full.gif";
//alert(e);
posti[e]=1;
counter++;
}
else{
document.getElementById(e).alt="empty"
document.getElementById(e).src="empty.gif";
posti[e]="";
counter--;
}
}

function showData(){
var postiFinali=new Array();
var a=0;
for(i=0;i<posti.length;i++){
if(posti[i]==1){
postiFinali[a]=i+1;
a++;
}
}
alert("Posti totali: "+counter+" i cui numeri sono:"+postiFinali.toString());
}

</script>
<?php
$index=0;
echo"<table id='disposizione_posti'><tr>
";
while($index<50){
if($index%11==0 && $index!=0){
echo"</tr><tr>";
}
else{
echo "<td><img id='$index' onclick='selectSeat($index)' alt='empty' src='empty.gif' width='20px'>".($index+1)."</img></td>
";
}
$index++;
}
echo"
</table>
<input type=button value='CLICCA QUI' onclick='showData()'></input>
";
?>
Il risultato è forse sufficiente per quello che mi serve...
Volevo sapere è possibile far comparire i numeri SOPRA le immagini dei posti? Per sopra intendo proprio dentro l'img..
Un'altra cosa, ora il controllo per vedere se un posto l'ho già selezionato io e volessi deselezionarlo lo faccio sull'attributo alt dell'immagine...mi sembra un po sporca come cosa però...avete da suggerirmi idee migliori?

[DanieleC88]

Potresti cambiare immagine a seconda della class a cui appartengono, e fare il controllo su quella.

[Dani88]

però ho un problemino...se ipotizziamo la sala del cinema non sia così squadrata ma abbia posti messi in maniera diversa, con corridoi, ecc... com faccio a gestirlo??:mc:
Sarebbe comodissimo poterla speficiare tipo in pixel la posizione...con un div che contiene le immagini e dando la posizione relativa ci riesco secondo te?

[DanieleC88]

Riesci a spezzare l'immagine in modo che gli "spazi" (corridoi et similia) possano essere rappresentati con immagini? A quel punto infili l'immagine spaziatrice e hai risolto.

[MaxArt]

ho buttato giù una prova veloce col metodo da te consigliato:
...
Il risultato è forse sufficiente per quello che mi serve...
Volevo sapere è possibile far comparire i numeri SOPRA le immagini dei posti? Per sopra intendo proprio dentro l'img..
Un'altra cosa, ora il controllo per vedere se un posto l'ho già selezionato io e volessi deselezionarlo lo faccio sull'attributo alt dell'immagine...mi sembra un po sporca come cosa però...avete da suggerirmi idee migliori?Mah, perché sporco? In effetti nell'alt ci metti un'informazione utile (full/empty), mica delle stringacce senza senso (per l'utente).
Comunque, le alternative sono queste:
- puoi usare semplicemente un altro membro, di tua invenzione: gli elementi del DOM sono comunque oggetti, usali come tali. In IE i nuovi membri compariranno come attributi del DOM, ma chi se ne frega...
- puoi usare direttamente un'altra strada: come aveva consigliato DanieleC88 (ma siete la stessa persona? :asd:) sarebbe buono usare le classi.
In questo caso ti consiglio di creare le classi td.full e td.empty, in questa maniera:
td.full {
background-image: url(full.gif);
background-repeat: no-repeat;
background-position: center center;
} /* o direttamente background: url(full.gif) no-repeat center center; al posto di tutte e tre */
td.empty {
background: url(empty.gif) no-repeat center center;
}
In questo modo, puoi anche fare a meno di mettere l'elemento <img> nel codice, e poi attaccare gli eventi direttamente al <td>. Inoltre, con facilità puoi scrivere sopra il numero del posto.
Se poi vuoi divertirti puoi sempre creare delle pseudo-classi td.empty:hover e td.full:hover per illuminare il posto al passaggio del mouse.

[MaxArt]

però ho un problemino...se ipotizziamo la sala del cinema non sia così squadrata ma abbia posti messi in maniera diversa, con corridoi, ecc... com faccio a gestirlo??:mc:
Sarebbe comodissimo poterla speficiare tipo in pixel la posizione...con un div che contiene le immagini e dando la posizione relativa ci riesco secondo te?Ma certo, puoi fare benissimo così. In questo caso devi solamente abbandonare la tabella, e ti crei un grosso <div> contenitore di tutta la sala, specificando altezza e larghezza in pixel, e poi piazzarci liberamente i vari posti.
Ecco un foglio di stile adeguato:
div.cinema { /*questo è il contenitore dei posti della sala*/
width: 600px;
height: 400px;
position: relative; /*necessario, o i posti non saranno posizionati bene*/
}
div.posto {
position: absolute;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
}
div.empty {
background: url(empty.gif) no-repeat center center;
}
div.full {
background: url(full.gif) no-repeat center center;
}
A questo punto il tuo algoritmo in php può posizionare in maniera "precisa al pixel" i posti nella sala:

<?php
$index=0;
echo "<div class='cinema' id='disposizione_posti'>";
while($index<50) {
echo "<div id='$index' onclick='selectSeat($index)' class='posto empty' style='top: ".((int)($index/11)*35)."px; left: ".(($index%11)*35+100)."px'>".($index+1)."</div>";
$index++;
}
echo"</div>
<input type=button value='CLICCA QUI' onclick='showData()' />";
?>

L'unico problema è che magari nella classe "posto" devi inserire dei padding verticali (e quindi sistemare l'altezza), perché una delle maggiori pecche dello standard CSS è che ANCORA (neanche nella versione 3) non ha un modo per disporre verticalmente testo ed elementi inline dentro un elemento di altezza specifica. Ancora si devono usare le tabelle... :nono:
Una robaccia così, insomma:
<table><tr><td class="posto empty">...</td></tr></table>
al posto del <div> di prima.

Riesci a spezzare l'immagine in modo che gli "spazi" (corridoi et similia) possano essere rappresentati con immagini? A quel punto infili l'immagine spaziatrice e hai risolto.Con una tabella rischia di essere complicato, dovrebbe giocare con rowSpan e colSpan.

[DanieleC88]

(ma siete la stessa persona? :asd:)
No! :asd:

[DanieleC88]

Con una tabella rischia di essere complicato, dovrebbe giocare con rowSpan e colSpan.
Infatti per l'immagine pensavo anche io ad un <div> di ripiego. ;)

[MaxArt]

Poi c'è un altro "trucchetto": al posto di passare l'id dell'elemento alla funzione selectSeat, passagli l'elemento stesso! Così:
onclick='selectSeat(this)'
La funzione quindi diventa molto meno "pesante" da leggere:
function selectSeat(e){
if(e.className==="posto empty"){
e.className="posto full"
posti[e]=1;
counter++;
} else {
e.className="posto empty"
posti[e]="";
counter--;
}
}

Altri consigli:
- usare il confronto === è leggermente più veloce di ==;
- usare un array per segnare dei posti è sprecato... :fagiano: Ma se li devi usare allora usa solo valori numerici (1 o 0) oppure, anche meglio, booleani (true e false). Non alternare tra 1 e ""...
- usa join() con convertire in una stringa leggibile l'array, così puoi mettere uno spazio dopo le virgole:
postiFinali.join(', ')

[Dani88]

Ma certo, puoi fare benissimo così. In questo caso devi solamente abbandonare la tabella, e ti crei un grosso <div> contenitore di tutta la sala, specificando altezza e larghezza in pixel, e poi piazzarci liberamente i vari posti.
Ecco un foglio di stile adeguato:
div.cinema { /*questo è il contenitore dei posti della sala*/
width: 600px;
height: 400px;
position: relative; /*necessario, o i posti non saranno posizionati bene*/
}
div.posto {
position: absolute;
width: 30px;
height: 30px;
text-align: center;
}
div.empty {
background: url(empty.gif) no-repeat center center;
}
div.full {
background: url(full.gif) no-repeat center center;
}
A questo punto il tuo algoritmo in php può posizionare in maniera "precisa al pixel" i posti nella sala:

<?php
$index=0;
echo "<div class='cinema' id='disposizione_posti'>";
while($index<50) {
echo "<div id='$index' onclick='selectSeat($index)' class='posto empty' style='top: ".((int)($index/11)*35)."px; left: ".(($index%11)*35+100)."px'>".($index+1)."</div>
$index++;
}
echo"</div>
<input type=button value='CLICCA QUI' onclick='showData()' />";
?>

Con una tabella rischia di essere complicato, dovrebbe giocare con rowSpan e colSpan.
Si questa soluzione mi sembra a prima vista la più pulita :)
effettivamente lavorare con le celle della tabella, nonostante per una prova veloce sia forse più semplice concettualmente, mi crea non poca confusione per configurazioni più complesse, probabilmente per la poca libertà che lascia.
Una domanda: mettendo il div esterno come relative il fatto che esso sia dentro ad altri div non influisce minimamente sulla posizione dei div interni giusto?

[MaxArt]

Una domanda: mettendo il div esterno come relative il fatto che esso sia dentro ad altri div non influisce minimamente sulla posizione dei div interni giusto?Giusto: i div di classe "posto" prenderanno come riferimento il primo antenato con attributo di stile position diverso da "static" (che è quella di default). Se si specifica "relative" senza indicare top, bottom, left o right è praticamente uguale a "static" ma ti consente di posizionare gli elementi in maniera assoluta al suo interno ;)

[Dani88]

Poi c'è un altro "trucchetto": al posto di passare l'id dell'elemento alla funzione selectSeat, passagli l'elemento stesso! Così:
onclick='selectSeat(this)'
La funzione quindi diventa molto meno "pesante" da leggere:
function selectSeat(e){
if(e.className==="posto empty"){
e.className="posto full"
posti[e]=1;
counter++;
} else {
e.className="posto empty"
posti[e]="";
counter--;
}
}

Altri consigli:
- usare il confronto === è leggermente più veloce di ==;
- usare un array per segnare dei posti è sprecato... :fagiano: Ma se li devi usare allora usa solo valori numerici (1 o 0) oppure, anche meglio, booleani (true e false). Non alternare tra 1 e ""...
- usa join() con convertire in una stringa leggibile l'array, così puoi mettere uno spazio dopo le virgole:
postiFinali.join(', ')

Il fatto di passare direttamente l'elemento all'inizio ci avevo pensato, però non riesco a risalire al numero in questa maniera :( cioè nn sono riuscito a trovare un metodo che tipo faccia
"e.getId"
Al posto dell'array tu cosa mi consigli? Questi posti poi devo passarli ad altre pagine per elaborazioni successive, ma per ora mi limitavo a mostrarli per vedere se tutto ok :)

[MaxArt]

Il fatto di passare direttamente l'elemento all'inizio ci avevo pensato, però non riesco a risalire al numero in questa maniera :( cioè nn sono riuscito a trovare un metodo che tipo faccia
"e.getId":wtf:
e.id, semplice così! :D

Edit: in effetti nel codice che ti ho scritto c'è un errore dovuto al copy/paste :fagiano: Anziché posti[e], dovresti mettere proprio posti[e.id].

Al posto dell'array tu cosa mi consigli? Questi posti poi devo passarli ad altre pagine per elaborazioni successive, ma per ora mi limitavo a mostrarli per vedere se tutto ok :)Ahah, lascia perdere, sono menate mie :D
Il fatto è che, almeno in passato, gli array in Javascript non erano proprio degli "array" nel senso della programmazione classica, cioè delle celle di memoria di dimensioni uguale messe una di seguito all'altra, molto veloci e facilmente accessibili. Erano invece molto più simili agli oggetti, dove ogni elemento di fatto era considerato come un membro. Ed infatti gli Array in JS sono un'estensione di Object, e typeof [] ti restituisce "object".
Questo vuol dire che accedere ad un elemento era, prestazionalmente parlando, veloce come accedere un membro di un oggetto, cioè: molto lento. :fagiano:
Ma per cose come queste, cioè pochi calcoli dipendenti dall'interazione con l'utente, va più che bene.

I motori JS più recenti hanno sopperito a questa lacuna, ed ora anche IE8 (con un incremento di prestazioni di roba tipo il 3000% :asd:).

[Dani88]

ok perfetto :D ho implementato la cosa e questo è il risultato:
http://img375.imageshack.us/img375/2565/cattura.png (http://img375.imageshack.us/i/cattura.png/)

:sofico: :sofico:
non riesco però a spostare il testo al "centro del sedile" perchè così sul bordo mi convince poco...

[wingman87]

Hai provato con vertical-align:middle?

[Dani88]

Hai provato con vertical-align:middle?
non si applica solo alle immagini?:confused:
io stavo giocando con margin perchè pensavo fosse solo per le immagini...ora provo :)

edit:
infatti nada :(

[MaxArt]

ok perfetto :D ho implementato la cosa e questo è il risultato:
http://img375.imageshack.us/img375/2565/cattura.png (http://img375.imageshack.us/i/cattura.png/)

:sofico: :sofico:
non riesco però a spostare il testo al "centro del sedile" perchè così sul bordo mi convince poco...Intanto bravo, il risultato mi pare assai buono.
Per l'allineamento verticale ti ho detto di usare padding, ad esempio:
padding-top: 10px;
height: 20px;
Ricorda che l'altezza va diminuita concordemente. Aggiusta le dimensioni finché non trovi il risultato ottimale.

Hai provato con vertical-align:middle?Non va. È una della maggiori carenze dei fogli di stile: non c'è modo di specificare il posizionamento verticale di un oggetto all'interno di un altro. Si può fare SOLO con le celle di una tabella.
vertical-align serve solo per le immagini (e forse per altro? Boh, comunque elementi inline) e serve a dare una posizione verticale rispetto al testo e non all'elemento contenitore.

[Dani88]

che pirla :D :D stavo toccando margin che non mi serve per quello che dovevo fare :D
Se non ho capito male infatti dato che il padding è uno spessore che però ha lo stesso sfondo del testo e dato che l'img ha grandezza fissa io sto abbassando la cella dove sta realmente il contenuto (il testo) ma l'img invece rimane a metà del dell'altezza data da:
padding-bottom +height+ padding-top
esatto? Il primo non lo metto ed ecco li che sposto la scritta in basso :D

edit:
perfetto direi :)
http://img19.imageshack.us/img19/279/catturab.th.png (http://img19.imageshack.us/i/catturab.png/)

ho aggiunto una classe selected che sono i posti selezionati dall'utente, mentre available (verdi) sono quelli disponibili e not-available(rossi) quelli occupati.
Tali info dovrò poi andarle a leggere dal database...

[MaxArt]

Esattamente :)

Il problema dell'indicazione dell'altezza (e della larghezza: è il cosiddetto box model) risale ai tempi della "browser war" tra IE e Netscape. IE intendeva width e height come comprensivi di bordo e padding, mentre Netscape come viene inteso attualmente dal W3C.

Il fatto è che l'interpretazione di IE è *di gran lunga* più logica e consente di lavorare assai meglio con le dimensioni, tant'è vero che nel CSS3 è possibile specificare quale box model usare con l'attributo box-sizing, impostato a content-box o border-box (come i vecchi IE).

Non è l'unica fesseria che il W3C ha fatto passare.

[wingman87]

Non va. È una della maggiori carenze dei fogli di stile: non c'è modo di specificare il posizionamento verticale di un oggetto all'interno di un altro. Si può fare SOLO con le celle di una tabella.
vertical-align serve solo per le immagini (e forse per altro? Boh, comunque elementi inline) e serve a dare una posizione verticale rispetto al testo e non all'elemento contenitore.

Buono a sapersi, thank you!

[MaxArt]

Non va. È una della maggiori carenze dei fogli di stile: non c'è modo di specificare il posizionamento verticale di un oggetto all'interno di un altro. Si può fare SOLO con le celle di una tabella.
vertical-align serve solo per le immagini (e forse per altro? Boh, comunque elementi inline) e serve a dare una posizione verticale rispetto al testo e non all'elemento contenitore.Già che ci sono specifico due cose:
- in effetti, se si conosce l'altezza precisa di un elemento, per posizionarlo verticalmente in mezzo ad un altro si può fare così:
.mezzo {
height: 80px; /* si possono usare anche em, pt, ecc... */
position: absolute;
top: 50%;
margin-top: -40px; /* la metà di height */
}
Il contenitore, come già detto, non deve avere attributo di stile position lasciato a "static" (attenzione che per le celle delle tabelle è l'unico valore possibile, nonostanche che IE la pensi diversamente).
La stessa tecnica, ovviamente, vale per il posizionamento orizzontale (anzi, è necessario fare così perché non si può più fare affidamento a text-align). Purtroppo, questo non è il caso di semplici <span> contenenti testo, perché non possiamo saperne a priori l'altezza. La cosa migliore da fare è usare le dimensioni con unità em, ma bisogna tenere conto che l'altezza di una riga di testo *varia a seconda del font usato* (2.33em per il Times New Roman, 2.61 per l'Arial e così via).
- confermo che vertical-align ha influenza in generale per ogni elemento inline (quindi anche uno <span>, ad esempio). Rimane, a mio avviso, di utilità molto marginale.

Edit: P.S.: Dani88, se per caso non ti frega tanto degli utenti che ancora usano IE6, puoi entrare nel magico mondo delle immagini PNG a 32 bit :ave:

[Dani88]

approfitto della discussione sull'impaginazione che è uscita fuori per chiedervi una cosa sempre riguardo al sito che sto facendo e che non mi è chiarissima.
Dunque io ho usato un layout a 2 colonne, fatto in questo modo (codice scritto ora alla buona :)):

<div id=container>
<div id=header>titolo ecc..</div>
<div id=navigation>menu navigazione</div>
<div id=content>contenuti</div>
<div id=footer>footer</div>
</div>

il container ha position:relative, height:auto, min-height:100% (per fare stare il footer sempre in fondo usando bottom:0px);
navigation è float:left per fargli stare di fianco content, content ha una min-height:xxx px per evitare che se faccio resize del browser il footer vada sopra navigation.

In tal modo tutto è ok (se non è chiaro qualcosa posso postare i css) e il footer sta in fondo perfetto.
Il "problema" sta che se compare lo scroll laterale, cioè content è più lungo del solito, il footer sta sempre in fondo, ma sotto di lui compare una striscia bianca (o del colore del background del body se lo imposto) che non riesco a levare in nessun modo, anche perchè non capisco da dove esca.
Succede solo con firefox, IE sembra interpretarlo bene...
Ho dato anche a body,ecc l'altezza di 100% perchè leggevo che alcuni browser tendono a dare l'altezza pari al contenuto

[MaxArt]

Sì, è meglio se srivi anche il foglio di stile.
Che IE stai usando? Se è IE8, va bene sia in visualizzazione compatibilità che non?

Per i footer il mio consiglio è di usare questa tecnica:
http://ryanfait.com/sticky-footer/

Il problema dei footer è annoso. Non stupisce che molti siti siano creati con delle grosse <table>.
Il W3C tempo fa aveva detto "basta con le <table> per il layout dei siti!", ma le soluzioni che ha proposto sono diventate comunque un FAIL mica male... :doh: