Allineamento articoli in colonne Blog

[Iluvee]

Salve a tutti, ho questo problema che non riesco a risolvere. Ho una serie di articoli che hanno la stessa identica larghezza, ma altezze diverse. Devo visualizzarli in un Blog a 3 colonne. (uso come Template Protostar)
Sia con Ordinamento Verticale sia con Ordinamento Orizzontale il risultato non cambia.
In pratica la prima riga allinea i primi 3 articoli in alto, poi la seconda riga allinea i successivi 3 articoli di nuovo tra loro creando cosi' spazi diversi.
L'effetto che voglio ottenere in pratica e' che, a seconda dell'altezza dell'Articolo, quello che segue vada di seguito e NON si allinei a niente.

Riporto solo come esempio l'allineamento che vorrei ottenere:
http://demo.joomlaplates.com/#BW

Riporto altresi' il codice di esempio di un articolo che ho impostato; ai vari DIV ho assegnato delle classi css per impostare spaziature e colori.

------------codice articolo-----------

<div class="articoliBox_L" style="margin: 0 auto;">
<div class="boxFoto_L" style="width: 180px; height: 120px; margin: 0 auto;"><img src="images/Foto/Ridotte/mosaic-01r.jpg" alt="mosaic 01r" class="zoom1" /></div>
<table border="0" style="margin-top: 5px; width: 180px; height: 94px;" align="center">
<tbody>
<tr>
<td style="text-align: left;">
<div class="testoarticoli_L">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor&hellip;&nbsp;</div>
</td>
</tr>
</tbody>
</table>
</div>

-------------fine codice-------------

Se qualcuno gentilmente potesse darmi qualche dritta gli saro' molto grato.

Lucio

[Iluvee]

Implemento il post precedente:
nel frattempo ho provato a rifare 6 articoli a campione togliendo tutti i DIV e lasciando foto e testo liberi tra <p></p>
Vedo che il risultato non cambia.
In pratica pensavo potesse essere l'uso dei DIV che incasinava, ma evidentemente c'e' qualcosa da modificare altrove. Non so se ci sia un CSS che blocchi la disposizione del Blog a colonne o altro, o se devo procedere proprio in un'altra maniera.

Allego anche gli stili CSS che ho fatto per i vari DIV (dovessero servire)

-------------
.articoliBox_L {
     margin: 0 auto;
     width: 220px;
     background-color: #FFF;
     padding-top: 20px;
     padding-bottom: 20px;
     float: left;
}
.boxFoto_L {
     width: 100%;
     height: 100%;
     overflow: hidden;
}
.zoom1 {
     transition: 1.2s ease;
     -moz-transition: 1.2s ease;
     -webkit-transition: 1.2s ease;
     -o-transition: 1.2s ease;
     -ms-transform : 1.2s ease;
}
.zoom1:hover{
     transform : scale(1.3);
     -moz-transform : scale(1.3);
     -webkit-transform : scale(1.3);
     -o-transform : scale(1.3);
     -ms-transform : scale(1.3);
}
.testoarticoli_L {
   font-family: "Verdana";
   font-size: 14px;
   line-height: 18px;
   color: #77787b;
}
-------------

Lucio

[Limma]

Questo esempio si avvicina a quello che cerchi?

[Iluvee]

Direi che e' la morte sua!
Ma non capisco come sbloccare l'allineamento che da' in automatico alle colonne.


Lucio

[Limma]

Stamattina ho visto l'esempio che hai linkato nel tuo primo post, e ho cercato di ricreare qualcosa di simile (e molto più grezzo...).
Per farlo ho adottato le griglie responsive di Bootstrap 3 e alcuni div.

Mi pare che tu di css e html ne sappia più di me, per cui ti riporto così qui il codice che ho scritto.
(Come vedrai, per fare prima a scrivere, ho usato del codice inline nei div, da includere poi in classi css).

Codice: [Seleziona]

<div class="row">
<div class="col-md-4 col-sm-4">
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<img class="img-responsive" src="images/ImagoTest2/Assisi.jpg" alt="" /></div>
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
<img class="img-responsive" src="images/ImagoTest2/Mexico.jpg" alt="" /></div>
</div>
<div class="col-md-4 col-sm-4">
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<img class="img-responsive" src="images/ImagoTest2/Londra.jpg" alt="" /></div>
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
<img class="img-responsive" src="images/ImagoTest2/Frutta-secca.jpg" alt="" /></div>
</div>
<div class="col-md-4 col-sm-4">
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<img class="img-responsive" src="images/ImagoTest2/Siena.jpg" alt="" /></div>
<div style="padding: 10px; background: lightgray; margin: 10px; width: 100%;">
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<img class="img-responsive" src="images/ImagoTest2/clock.jpg" alt="" /></div>
</div>
</div>

Se usi Protostar, che utilizza Bootstrap 2, la griglia ha questa sintassi:

Codice: [Seleziona]

<div class="row-fluid">
<div class="span4">tutto quello che vuoi qui</div>
<div class="span4">tutto quello che vuoi qui</div>
<div class="span4">tutto quello che vuoi qui</div>
</div>

[Iluvee]

Si' uso Protostar e il mio intento era quello di trovare i parametri, appunto in Protostar, da modificare per adattarli a quel che vorrei fare.
Questo anche perche', una volta capito l'arcano, poter pubblicare la soluzione al problema che magari altri - come me - hanno avuto e si sono letti migliaia di righe di codice senza risposta.


Comunque, non era certo una critica alla tua risposta sia BEN CHIARO, anzi! Ti ringrazio infinitamente!


Dunque nel primo caso che mi hai postato non ho capito perche' assegni la class: row al DIV principale e la class: col-md-4 col-sm-4 (che ignoro sinceramente che classe sia) al DIV sottostante.
In Protostar me le prende queste 2 classi? Se si' no problem, mi sbatto a capire come funzionano poi se non riesco disturbero' nuovamente.


Nel secondo caso non capisco perche' assegni al primo DIV la class=row-fluid e al DIV sottostante la class=span4.


E comunque - se funziona non metto becco - vorrei sapere queste classi dove le trovo per poter fare "esperimenti"?
In template.css? O dove?
Perche' ormai non so piu' dove guardare.


Grazie ancora


Lucio

[Limma]

Ti rispondo rapidamente ora, tra un minuto devo uscire. Poi stasera, con calma, scrivo qualcos'altro, se servirà.

Comunque: il DIV con classe "row" o "row-fluid" è il contenitore dentro al quale vanno i 3 DIV con classe span4 se si utilizza Bootstrap2, e nel tuo caso, usando Protostar, devi usare queste.
I 3 DIV span4 creano 3 colonne di uguale larghezza, nello stesso modo in cui le 3 colonne sono create dalla sintassi col-md-4 col-sm-4, che però è utilizzabile sono con Bootstrap3.
La doppia classe col-md-4 col-sm-4 di Bootsrap3 permette di stabilire che le 3 colonne resteranno affiancate fino alla risoluzione orizzontale di 768px, sotto la quale, invece, si incolonneranno (vedi la pagina che ti ho linkato con lo smartphone). Ma non mi perderei troppo tempo con Bootstrap3 visto che non lo puoi usare.

Dai una letta a questa pagina di documentazione su Bootstrap 2.

[Iluvee]

Ok, ti ringrazio preventivamente e probabilmente riusciro' a fare qualche prova stanotte - visto che son sveglio dall'una e mezza di stanotte e si dice che "la notte porta consiglio" (secondo me il detto vale se dormi, non se stai sveglio a vagliare files .php) comunque oggi devo pensare delle musiche per una lettura che devo fare il 13 e mi hanno appena mandato le letture. Quindi - anche giuro per staccare dal codice - oggi mi dedico a quello (finche' non crollo perche' tra poco son 12 ore che sono in piedi).
Se comunque hai dei chiarimenti da potermi postare - perche' vorrei davvero chiarirmi questa cosa e dopo (capita bene) cercare di scrivere una breve 'guidina' per chi avesse lo stesso problema - non appena mi sono resettato leggo e faccio tutti gli esperimenti del caso. Il tutto sempre partendo da Protostar (che comunque secondo me e' un gran Template e l'ho smontato e rimontato ormai in ogni sua parte o quasi) e senza dover comprare Template; ma alla fine rimboccandosi un po' le maniche e personalizzando le proprie cose, c'e' piu' gusto e soddisfazione, credo.
Grazie ancora
Lucio

[Limma]

Nel frattempo ho creato una nuova pagina d'esempio, ricalcando quella che hai visto oggi, ma questa volta realizzata col template Protostar.
Non scrivo qui il codice usato per la pagina, caso mai domani quando ti svegli...! 

I link per le due pagine:
griglia bootstrap 3
griglia bootstrap 2

[Iluvee]

Ho visto gli esempi e fanno quello che devono. Quando puoi se mi dici su quali file sei intervenuto provo a vedere se ci capisco qualcosa (sperando non debba metter mano a jscript o jquery che li' avrei seri problemi).
Grazie


Lucio


P.S.: stanotte son riuscito a dormire Alleluja! 

[Limma]

Ciao, no niente javascript et similia, solo html e css.
In realtà, come vedrai nel file che allego, lo stile è tutto inline (giusto per fare prima), stile che va semplicemente trasformato in classi css da applicare dove serve.

Nel file trovi il codice che poi visualizza la pagina realizzata con Protostar che ti ho linkato ieri. 

P.S. Sai, in ogni caso, che esistono anche delle estensioni (che io non uso...) per fare quello che cerchi come da titolo del tuo thread.
 

[Iluvee]

Ho provato, ma non funziona. La seconda riga di articoli continua ad essere allineata e non sfalsata.

So che ci sono delle estensioni e anche template gratuiti gia' impostati per fare queste cose, ma ormai e' una questione di principio. Devo capire come funziona questa cosa.
Grazie mille per il tuo tempo


Lucio

[Limma]

Ho provato, ma non funziona. La seconda riga di articoli continua ad essere allineata e non sfalsata.

Che dire...?
Fai un copia-incolla del file che ho allegato sostituendo solo il percorso e le immagini che naturalmente non hai, e vedi cosa succede.
Funzionare, funziona...

[Iluvee]

Provo e ti dico, al momento avevo solo inserito le 2 classi, ma ho visto che tu hai usato un ulteriore div per l'articolo. Cambio tutto e provo.


Lucio

[Limma]

Una volta che riesci a replicare esattamente  (che vuol dire solo incollare il txt) il mio elementare esempio, devi solo vedere come adattarlo alle tue necessità, con tutte le modifiche del caso.

Attendo (good) news! 

[Iluvee]

Forse ho capito l'arcano. Tu mi stai postando un listato in cui ci sono tutti gli articoli in html e d'accordo. Probabilmente se faccio un nuovo articolo e incollo l'html che mi hai girato funziona. Io pero' ho 6 articoli diversi (poi ne avro' molti di piu' ovviamente) che devono poi essere gestiti dal layout Blog.
Ho comunque provato a cambiare il codice che mi hai passato in 5 articoli a campione e non funziona, oltre a ridimensionarmi le immagini ma va beh quello magari ci mettevo mano dopo.


Mi spiace per quella che ora mi sembra stia diventando una rottura


Lucio

[Limma]

No, non è una rottura. Direi che l'esempio che ho allestito non è adatto alle tue necessità. In ogni caso studiati un po' la documentazione su Bootstrap 2, e in rete trovi molte altre informazioni in merito.


In generale, nei moderni framework "responsive", non si usano "tabelle" e "misure fisse" in px per immagini o "contenitori", come hai visto nel mio piccolo esempio.

[Iluvee]

Devo dire che ho letto una guida fatta anche molto bene che spiega le funzioni del bootstrap. Vedo di rileggermela bene per vedere se capisco qualcosa, ma a un'occhiata che ho dato prima non direi che serva al mio caso, pero' complimenti perche' e' davvero fatta bene.
Alla fine mi sa che faccio prima a farmi un POSITION13 e gli do' io i parametri che mi servono. Boh! Qualcosa mi invento, ma mi rode da morire, dico la verità.


Grazie ancora per la disponibilità
Buon lavoro


Lucio