Risolvere i problemi css

mercoledì 13 gennaio 2010 - 21.05

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: mer 13 gen 2010 - 21:05

Salve a tutti.
Sto creando una galleria di immagini in un sito ma dopo vari e vani tentativi, non mi è ancora riuscito di allineare verticalmente delle immagini di altezza variabile in un div di altezza fissa.
Ho inserito tutte le immagini in div e a questi ho applicato una classe di cui riporto il codice:
.galleria { float: left; text-align: center; height: 150px; width: 150px; }
Così facendo ho tutte le immagini centrate in orizzontale ma in verticale rimangono allineate in alto.
Qual è quindi la soluzione più semplice e immediata nonché compatibile con tutti i browser per allinearle anche verticalmente ma senza l'utilizzo di tabelle?
Un grazie anticipato per ogni eventuale suggerimento.

__________________
http://www.idee-regalo.biz/regali-aziendali.html - http://www.originellegeschenkideen.net/taufe-geschenke.html

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: gio 14 gen 2010 - 17:55

>Salve a tutti.
ciao

>Qual è quindi la soluzione più semplice e immediata nonché compatibile
>con tutti i browser per allinearle anche verticalmente ma senza l'utilizzo di tabelle?
io creerei un div per immagine, definendo il padding al top e al bottom uguale in base allo spazio lasciato dall'immagine, in modo da allineare verticalmente al centro l'immagine.

--

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: gio 14 gen 2010 - 18:06

ma il fatto è che le immagini hanno tutte altezze diverse....!?

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: gio 14 gen 2010 - 18:26

>ma il fatto è che le immagini hanno tutte altezze diverse....!?
il calcolo del padding deve essere calcolato in base all'altezza dell'immagine. Essendo quella variabile, dovrai usare javascript per calcolare il corretto padding top da dare, che sarà la metà dello spazio che l'immagine lascia.
--

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi

freeteo Profilo | Guru

6.542 messaggi | Data Invio: ven 15 gen 2010 - 16:27

Ciao,
ho sempre avuto "odio" versa questa problematica fastidiosa

Cmq al tempo nel mio caso avevo risolto in questo modo:
http://phrogz.net/CSS/vertical-align/index.html
in particolare con il "method 1", solamente però che in ie <=6 non credo funzioni...

Ciao.

Matteo Raumer
[MCAD .net, MVP Visual C#]
http://blogs.dotnethell.it/freeteo

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: ven 15 gen 2010 - 16:30

guarda, dopo mille prove ho risolto così:

http://www.raggiorosso.com/Style/Examples/007/center.html#vertical

che mi sembra anche il più semplice che ho provato.

grazie e alla prossima

ciao

freeteo Profilo | Guru

6.542 messaggi | Data Invio: ven 15 gen 2010 - 16:45

>guarda, dopo mille prove ho risolto così:
>http://www.raggiorosso.com/Style/Examples/007/center.html#vertical
>che mi sembra anche il più semplice che ho provato.
ottimo!

Ciao.

Matteo Raumer
[MCAD .net, MVP Visual C#]
http://blogs.dotnethell.it/freeteo

ghisirds Profilo | Junior Member

151 messaggi | Data Invio: ven 15 gen 2010 - 16:49

grazie.
L'unico cruccio rimane la compatibilità con i browser, ma al momento mi sembra non dia problemi.
Potete darci un'occhio anche voi se avete browser diversi?
Questo il lavoro finito:
http://www.fotomatrimonio.biz/matrimonio-immagini.html

grazie
ciao

freeteo Profilo | Guru

6.542 messaggi | Data Invio: ven 15 gen 2010 - 17:33

Sembra tutto ok, però io ho versioni aggiornate dei vari browser, il problema potresti averlo per versioni vecchie...
Ti consiglio di usare un tool come Superpreview di Microsoft per testare diversi render...

Ciao.

Matteo Raumer
[MCAD .net, MVP Visual C#]
http://blogs.dotnethell.it/freeteo

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !