Risolvere i problemi css

mercoledì 13 gennaio 2010 - 21.05

ghisirds Profilo | Junior Member

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

>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

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

alx_81 Profilo | Guru

>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

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

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

>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

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

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
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 !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5