[RISOLTO] griglia immagini con colonna che comprende due righe

[mariarosaria]

Ciao a tutti.
Più facile a vedersi che a spiegarsi...

Potreste dare un'occhiata qui scorrendo sotto la slideshow iniziale noterete una sorta di menu fatto con le immagini.
Dovrei fare in modo che la quarta immagine, quella lunga, comprenda le due righe di immagini quadrate...
Allego un'immagine così forse mi spiego meglio.

Ho provato diverse estensioni, ma anche se ottenevo l'effetto griglia erano troppo "limitate" come personalizzazione. adesso ho creato un modulo con codice personalizzato, ma praticamente ho soltanto inserito delle immagini nell'editor di joomla cercando di comporle manualmente. Questo è il codice:

Codice: [Seleziona]

<p style="text-align: center;">
<a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra storia::un cuore" />[/url]

<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra giornata::tra preghiera e lavoro" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]</p>

<p style="text-align: justify;">
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]</p>
Ho provato anche a lavorare con le colonne, ma non sono stata capace 
Grazie a tutti

[tomtomeight]

Ciao
Dovresti utilizzare bootstrap, fai una riga con 4 colonne, nelle prime tre metti la prima immagine e la seconda accapo, nella quarta  una sola, ovviamente devi calibrare le dimensioni delle immagini per mantenerle allineate come in figura

[mariarosaria]

Grazie.
Scusa, ma...
Non sono molto ferrata.
Non ho capito bene la sequenza da rispettare. E comunque non so usare bootstrap.
Sapresti indicarmi una guida abbastanza semplice?
Grazie mille

[tomtomeight]

Scrivi bootstrap sul motore google e troverai tanti esempi e guide, scegli solo i link di w3school é tutto free.

[Anthony Marra]

Ciao a tutti.
Più facile a vedersi che a spiegarsi...

Potreste dare un'occhiata qui scorrendo sotto la slideshow iniziale noterete una sorta di menu fatto con le immagini.
Dovrei fare in modo che la quarta immagine, quella lunga, comprenda le due righe di immagini quadrate...
Allego un'immagine così forse mi spiego meglio.

Ho provato diverse estensioni, ma anche se ottenevo l'effetto griglia erano troppo "limitate" come personalizzazione. adesso ho creato un modulo con codice personalizzato, ma praticamente ho soltanto inserito delle immagini nell'editor di joomla cercando di comporle manualmente. Questo è il codice:

Codice: [Seleziona]

<p style="text-align: center;">
<a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra storia::un cuore" />[/url]

<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra giornata::tra preghiera e lavoro" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]</p>

<p style="text-align: justify;">
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]</p>
Ho provato anche a lavorare con le colonne, ma non sono stata capace 
Grazie a tutti

Buonasera, dando uno sguardo al tuo sito ho effettuato una prova. Ho modificato le classi delle 6 immagini piccole da:
"class="effectck-jazz" a class="effectck-jazz2" e l'immagine che che vuoi ad altezza delle due righe in class="effectck-jazz3"
Poi aggiungendo una nuova regola css per le immagini piccole "jazz2":

Codice: [Seleziona]

.imageeffectck.effectck-jazz2
float: left
e la regola css per l'immagine alta due righe

Codice: [Seleziona]

.imageeffectck.effectck-jazz3
float: right
e sono riuscito ad ottenere il seguente risultato
https://prnt.sc/ii1a3b
Ovviamente cambiando classe alle immagini perdi l'effetto hover e quindi bisogna ricopiare alcune righe dal file css imageeffectck.css copiandole magari nel file "custom css" (in modo che a futuri aggiornamenti non perdi le modifiche) riportando appunto gli stessi effetti per jazz2 e jazz3.

Fai una prova e vedi se ti va bene..

Aggiungo anche che più semplicmente potresti aggiungere direttamente nel codice dello style
"float:left" per le immagini piccole
e "float:right" per quella grande che deve coprire le due righe
ed ottieni lo stesso risultato senza dover modificare i css.
Ho fatto una prova con il codice che hai postato tu e mi funziona.
ad esempio:

Codice: [Seleziona]

style="vertical-align: bottom; float: left;"

[mariarosaria]

Ciao Anthony!
Grazie mille per la risposta.
Stavo appunto cercando qualcosa sul bootstrap come suggerito da tomtomeight e poi ho letto il tuo messaggio.
Faccio subito della prove.
Sul bootstrap, nel sito w3 school, non ho trovato degli esempi con una colonna che mi comprendesse due righe e da sola non ci arrivo.
Avevo provato a sistemarle con gli allineamenti, ma non avevo pensato alla tua soluzione, in quanto avevo utilizzato top e bottom, ma non avevo provato right e left.
Provo e ti faccio sapere (ma siccome tu l'hai fatto, se non mi funziona sono io che non sono capace  )
Grazie ancora

[Anthony Marra]

Io ho provato entrambe le soluzioni che ti ho postato e funzionano.
Quello che ti suggeriva tom era appunto di creare una riga con quattro colonne. nelle prime 3 colonne inserivi le 6 immagini.. per intenderci 3 sopra e 3 sotto. e nell'ultima colonna inserivi l'immagine grande.
La riga era sempre una.

[mariarosaria]

Ah... adesso capisco...

Nel frattempo ho fatto qualche prova...
Questo è il nuovo codice:

Codice: [Seleziona]

<p><a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra storia::un cuore" /></a>
<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra giornata::tra preghiera e lavoro" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="float: left;" title="Il nostro carisma::un cuore" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="float: right;" title="Il nostro carisma::un cuore" /></a></p>
<p><a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a></p>
Ho cominciato dall'ultima soluzione che era la più semplice.
Le immagini però non si smuovono... Ho fatto anche qualche prova in diretta con firebug.
Daresti un'occhiata al codice? Lo style:float va inserito nel tag degli attributi dell'immagine suppongo...

[mariarosaria]

Aspetta, ok ok...
E' la classe dell'effeto che mi creava problemi...

Mi sa che devo modificare per forza il css dell'effetto. Esatto?
Ci sarà qualche attributo che prevale. giusto?

[Anthony Marra]

no aspetta non so che soluzione hai adottato. ma se hai seguito la mia ultima soluzione vuol dire che hai cancellato qualcosa.
Fai semplicemente una cosa.
dal codice che hai bostato tu prima

Codice: [Seleziona]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" /></a></p>aggiungi qui

Codice: [Seleziona]

style="vertical-align: bottom;float:left " senza modificare altro. altrimenti togli la classe per questo ti toglie l'effetto
devi semplicmeente aggiungere il "float" dopo il vertical align di ogni riga
P.s. cancella la cache browser e joomla per questo prima non vedevi la modifica

[mariarosaria]

Allora. Ho fatto le classi personalizzate come avevi detto tu, nel file custom e funziona.
Ho fatto la classe jazzl (per left) e jazzr (per right).
Avevo già tentato con float left e vertical align, solo che non avevo cancellato la cache del browser (in joomla è disattivata). Giusto per capire se era un problema di cache browser proverò ugualmente.
Adesso non mi rimane che sistemare le grandezze e le spaziature. Ma se volessi mantenere queste misure centrando il tutto rispetto al modulo? Devo centrare i due paragrafi?

[mariarosaria]

Niente...
Mantengo la modifica delle classi css. Aggiungendo align e float alle singole immagini non va (stavolta ho svuotato la cache):

Codice: [Seleziona]

<p><a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra storia::un cuore" /></a>
<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra giornata::tra preghiera e lavoro" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="Il nostro carisma::un cuore" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="" width="230" height="460" class="effectck-jazz" style="vertical-align: bottom; float: right;" title="Il nostro carisma::un cuore" /></a></p>

<p><a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a></p>
Un problema adesso è la spaziatura fra le immagini piccole e quella grande...

[Limma]

Un problema adesso è la spaziatura fra le immagini piccole e quella grande...

Credo che anche modificando la risoluzione del monitor compaia qualche problema di visualizzazione.
In ogni caso il tuo quesito non è di facilissima soluzione (almeno per me...), ma ho fatto un paio di test usando le tue immagini, basandomi sulla griglia di Bootstrap 3.
Qui i risultati.
Problemi ce ne sono ancora, naturalmente, ma con la spaziatura ci si avvicina e scalando la risoluzione il comportamento è più "regolare" (anche se qui ci sarebbe da lavorare ancora... E una delle immagini quadrate che usi ha una risoluzione maggiore delle altre, cosa che nelle griglie responsive disturba, come vedrai scalando la risoluzione del display).

Not so easy... 

[Anthony Marra]

Per la spaziatura potresti risolvere in due modi.
impostato il "width" di jazzl a "255px !importat"
oppure impostando a jazzr il "margin-right: a 90px"
però ovviamente poi dovresti anche lavorare sulle mediaquery per risolvere problemi di impaginazione per altre risoluzioni

[mariarosaria]

Grazie Anthony, ma meglio non buttarsi in un'impresa simile... non ne sono capace. e comunque penso che sia una soluzione poco responsive.

Il risultato migliore mi sembra quello di limma fatto con i quadrati colorati!  (e, appunto, mi sembra la migliore come adattabilità alle diverse misure). Anche perchè comunque avevo già l'idea di limitare questo modulo ai pc e ai tablet, utilizzandone uno completamente diverso per i cellulari, così mi evito un bel ò di problemi (e adatterò qualcosa di più "immediato" per uno schermo piccolo)
Un'ultima domanda mi sorge spontanea... Dove imposto fino a quale risoluzione voglio che le immagini rimangano incolonnate (e quindi si rimpiccioliscano) e da quando devono iniziare a "staccarsi" le colonne? C'è un modo?
Proverò a copiare/"rubare" il codice di limma 

Grazie a tutti