[RISOLTO] Disporre immagini senza usare la tabella

[bancomat69]

ciao a tutti, purtroppo ho un disguido con la visualizzazione delle immagini, in particolare quelle del menù "le opere" del sito http://www.nadiaalimonti.it su smartphone e tablet android. questa la discussione aperta e chiusa in merito http://forum.joomla.it/index.php/topic,259376.0.html.

ho aperto questa perché creando un articolo di prova senza l'utilizzo di tabelle, utilizzate per la centratura delle immagini e relativi link, la visualizzazione su suddetti supporti avviene correttamente a discapito delle diciture associate alle immagini.
provo a fare un esempio:

Adesso:

Immagine 1 con sotto la dicitura	Immagine 2 con sotto la dicitura
Immagine 3 con sotto la dicitura	Immagine 4 con sotto la dicitura

Prova:
Immagine 1
Immagine 2
dicitura immagine 1
Immagine 3
dicitura immagine 2

spero di essere riuscito a spiegarvi cosa succede.

mi aiutate a risolvere? io vorrei ottenere la stessa visualizzazione che ho con l'utilizzo della tabella ma senza usarla.

P.S.: vi allego la visualizzazione del sito da Galaxy S5

[tomtomeight]

Usa i div.

[bancomat69]

ciao ho provato ad utilizzare i div. quello che ho scritto è:
<div style="float: left; width: 300px; height: 300px; border: 1px solid red;"><img style="float: center; width: 190px; height: 270px;" title="" src="images/sampledata/nadia/001.jpg" alt="img"  />

<h2 align="center">Gli Albori</h2>
</div>

va molto bene tranne che per una cosa. l'immagine non è centrata. cosa devo correggere nel comando??
ed inoltre come faccio a disporre 2 immagini sopra e 2 sotto con il div???

grazie

[tomtomeight]

Si tratto di html, prova a cercare in rete trovi molto di più di quello che potrei risponderti.

[maxzilla]

Ciao bancomat69,
ti informo che "float: center" non esiste , o left o right,
in caso dovresti agire sui margini dopo aver prima definito la larghezza del div
con margin-left:auto e margin-right:auto

sulla pagina che hai segnalato, hai rimesso la table?

[giusebos]

...le tabelle sono ottime per i dati, ma per le immagini ci sono tanti compromessi. Eviterei.
Userei invece le classi che il template ti mette a disposizione; disabilita l'editor, cancella tutto ed incolla il seguente codice:

<div class="row show-grid">

<div class="col-md-4">
<img src="images/sampledata/nadia/001.jpg" class="img-responsive img-thumbnail" alt="Responsive image">
</div>


<div class="col-md-4">
<img src="images/sampledata/nadia/002.jpg" class="img-responsive img-thumbnail" alt="Responsive image">
</div>


<div class="col-md-4">
<img src="images/sampledata/nadia/003.jpg" class="img-responsive img-thumbnail" alt="Responsive image">
</div>

</div>

controlla i nomi dei file delle immagini che non so se sono giusti

[bancomat69]

ciao a tutti, vi ringrazio per i vostri suggerimenti ma ho ottenuto il risultato con le seguenti istruzioni:

<div style="float: left; width: 300px; height: 300px; border: 1px solid White;"><center><a href="mio articolo1;tmpl=component" target="_blank"><img style="width: 190px; height: 270px;" title="" src="mia immagine1" alt="img" />[/url]</center>
<h3 align="center"><strong>Gli Albori</strong></h3>
</div>
<div style="float: left; width: 300px; height: 300px; border: 1px solid White;"><center><a href="mio articolo2;tmpl=component" target="_blank"><img style="width: 190px; height: 270px;" title="" src="mia immagine2" alt="img" />[/url]</center>
<h3 align="center"><strong>...in cammino</strong></h3>
</div>
<div style="clear: both;"> </div>
<div style="float: left; width: 300px; height: 300px; border: 1px solid White;"><center><a href="mio articolo3;tmpl=component" target="_blank"><img style="width: 190px; height: 270px;" title="" src="mia immagine3" alt="img" />[/url]</center>
<h3 align="center"><strong>studio Leonardo</strong></h3>
</div>
<div style="float: left; width: 300px; height: 300px; border: 1px solid White;">

<center><a href="mio articolo4;tmpl=component" target="_blank"><img style="width: 270px; height: 200px;" title="" src="mia immagine4" alt="img" />[/url]</center>
<h3 align="center"><strong>...e ancora avanti</strong></h3>
</div>
<div style="clear: both;"> </div>

non so se ho scritto castronerie, ma se può essere utile sono ben contento.

[giusebos]

il codice proposto era più pulito e ti adattava le immagini al div, mentre con il tuo avrai ancora problemi con altre risoluzioni.
L'importante però e che tu sia soddisfatto, quindi puoi inserire il [risolto] come si conviene

[bancomat69]

sicuramente proverò anche la soluzione che mi hai suggerito giusebos. temporaneamente lascio quella inserita e appena possibile la modificherò.

grazie

[bancomat69]

...le tabelle sono ottime per i dati, ma per le immagini ci sono tanti compromessi. Eviterei.
Userei invece le classi che il template ti mette a disposizione; disabilita l'editor, cancella tutto ed incolla il seguente codice:



controlla i nomi dei file delle immagini che non so se sono giusti

scusa giusebos un'ultima cosa, questa soluzione prevede la disposizione delle immagini una sotto l'altra. come scrivo il codice per averle 2 sopra e 2 sotto?

[giusebos]

la classe "col-md-4" cra tre colonne, se ne desideri 2 devi sostituire "col-md-4" con "col-md-6"

la logica è che il totale delle colonne bootstrap è 12, quindi 12/2=6 e quindi "col-md-6", mentre 12/3=4 e quindi "col-md-4".

conoscere un minimo le classi bottstrap ti consente di padroneggiare qualsiasi template basato su questo framework, non è difficile, anzi è paragonalbile alla conoscenza delle tabelline per poter fare un minimo di conti.

nel sito ufficiale, anche se in inglese, si riesce a tradurlo e a capirlo benissimo usando google traslator

[bancomat69]

ok.

grazie 1000

ora si può chiudere

[giusebos]

no i post non si chiudono, questa discussione servirà ai posteri per un problema uguale o simile.