allineamento immagine all'interno di un DIV

[mintradir]

Ciao a tutti, in questa pagina http://www.behappy.cloud/test/SF/punta-ala.html vorrei poter allineare l'immagine della caffettiera al centro del DIV insieme al testo ,( idem per le atre tre immagini che non ho ancora inserito nei successici 3), ma non riesco a capire come procedere.
Consigli?


Grazie

[maicolstaip]

Ciao,
hai provato a mettere

Codice: [Seleziona]

<div class="center">?

Ciao!

[xplosion]

Prova ad aggiungere nel file css del template, questa istruzione:

Codice: [Seleziona]

.bwrap{
    text-align:center;
    padding:30px 10px 0 10px;}

[mintradir]

Grazie 1000 Maicol risolto con la classe "center"


Grazie ovviamente anche a xplosion

[Limma]

risolto con la classe "center"

Sì, però così si centra solo l'immagine-icona e il testo resta allineato a sx e asimmetrico rispetto al rettangolo che lo contiene, e in più il testo check-in va a capo, cosa che, anche se questione di gusti, mi disturba assai...

Riprenderei quindi la regola css per la classe .bwrap suggerita da xplosion, con una lieve modifica:

Codice: [Seleziona]

padding: 30px 0 0;
text-align: center;Dovretsi ottenere quattro div con testo e immagini perfettamente centari e simmetrici.

[mintradir]

Ciao Limma,


grazie e si concordo con te, vorrei apportare questa modifica al file css, ma mi sta salendo il nervo perchè è un oretta che sto cercando di risalire al percorso del file e non lo trovo; utilizzando la console vedo che il file è in: components/com_jxtc/css.php ed infatti li è ma invece di avere 1300 righe ne ha 120.... non riesco a capire...
Suggerimenti?

[xplosion]

Guarda che è sufficiente inserire nel file css del tuo template predefinito !

P.S.: Vedi che hai un errore in footer. Non hai chiuso un div

Codice: [Seleziona]

<div class="module bwrap"<p>Silverfield S.r.l. Via Frà Si....

[mintradir]

Grazie 1000! tutto risolto 

[mintradir]

Ciao a tutti,


scusatemi se vi disturbo ancora per un problema di allineamento di DIV e per di più nella stessa pagina (http://www.behappy.cloud/test/SF/punta-ala.html). Prometto di fare a breve un corso di CSS così non vi tedierò più.
In the meanwhile vorrei realizzare una struttura di DIV in modo da riprodurre un idea del genere: http://www.behappy.cloud/test/SF/images/4immagini.png


Ma mi ci sono perso, ho creato una struttura a tre colonne ma poi non so come:

• centrare l'immagine dell'inspired green sulla prima colonna
• distanziare le due immagini nella seconda colonna
• idem della prima colonna nella terza

Grazie
Lorenzo

[Limma]

In the meanwhile vorrei realizzare una struttura di DIV in modo da riprodurre un idea del genere: http://www.behappy.cloud/test/SF/images/4immagini.png

Ho fatto un "tentativo" rapidissimo per riprodurre il tuo esempio.
Non è proprio uguale, ma ci si avvicina abbastanza, credo.
Scorri verso il basso questa pagina.

P.S. Non mi voglio sostituire di certo ai moderatori ( ), ma forse sarebbe meglio tu aprissi un nuovo topic con questo tuo nuovo quesito.

[mintradir]

Ciao Limma,


Grazie molte per la prova. Ho provato ad utilizzare i DIV come suggerisci, ma non ottengo il tuo stesso risultato, non capisco perchè mi sembra tutto abbastanza lineare nella dichiarazione delle righe e nella chiusura, ma è come se non rilevasse la fine della riga. 

Codice: [Seleziona]




<div>
<div class="row">
<div class="col-md-12" align="center"><img src="images/inspired_green.jpg" alt="Inspired Green"><>
<>
<div class="row">
<div class="col-md-2" align="center">&nbsp;<>
<div class="col-md-4" align="center"><img src="images/inspired_rock.jpg" alt="Inspired Rock"><>
<div class="col-md-4" align="center"><img src="images/inspired_pop.jpg" alt="Inspired Pop"><>
<div class="col-md-2" align="center">&nbsp;<>
<>
<div class="row">
<div class="col-md-12" align="center"><img src="images/inspired_pure.jpg" alt="Inspired Pure"><>
<>
<>

Non capisco perché chiudi il tag img con />
[/size][/color]

[Limma]

Il codice che hai postato l'hai scritto tu, o l'hai preso dal sorgente della pagina che ti ho linkato?
In ogni caso il codice - semplice e davvero basic - che ho utilizzato io è:

Codice: [Seleziona]

<div class="row">
<div class="col-md-12" align="center"><img src="/images/ImagoTest3/Untitled-2.jpg" alt="Untitled 2" /></div>
</div>
<div class="row">
<div class="col-md-2" align="center">&nbsp;</div>
<div class="col-md-4" align="center"><img src="/images/ImagoTest3/Untitled-3.jpg" alt="Untitled 3" /></div>
<div class="col-md-4" align="center"><img src="/images/ImagoTest3/Untitled-4.jpg" alt="Untitled 4" /></div>
<div class="col-md-2" align="center">&nbsp;</div>
</div>
<div class="row">
<div class="col-md-12" align="center"><img src="/images/ImagoTest3/Untitled-5.jpg" alt="Untitled 5" /></div>
</div>
Per quanto attiene poi alla chiusura del tag img leggi qui al punto 2.

[mintradir]

Copiato dal tuo e modificato solo il nome immagini e il campo alt, a e tolto la / prima di images che altrimenti non mi funzionava il path.
Non capisco dove è l'errore.





ok grazie per il chiarimento del punto 2 mi ero andato a leggere W3S e non ne avevo trovato menzione.

[Limma]

Il codice che hai postato tu manca, rispetto al mio, di tutti i tag di chiusura dei vari div.
La griglia è quella di Bootstrap 3

[mintradir]

Non ti seguo. Quali tag di chiusura ho omesso? ho rincontrollato le due versioni ma non vedo <> mancanti.

[Limma]

Non ti seguo. Quali tag di chiusura ho omesso? ho rincontrollato le due versioni ma non vedo <> mancanti.

... se il tag di apertura è <div> (o <p> o qualunque altro), il tag di chiusura sarà </div> (o </p> ecc. ecc.)...

Dove hai visto le chiusure dei tag con <>?

[mintradir]

si infatti è ciò che avevo scritto, non ho capito perché è stato troncato.
Comunque resta il fatto che non capisco dove sono questi div non chiusi ( non riesco a scrivere qui nel post la sintassi corretta del div chiuso perchè sempre mi scrive <>)

[Limma]

Il codice che hai postato tu manca, rispetto al mio, di tutti i tag di chiusura dei vari div.

Ok, ho visto il sorgente della tua pagina web e i tag div risultano regolarmente chiusi.
Il punto è che quando scrivi qui nel topic spariscono (perchè poi?), e da qui il fraintendimento.
La frase a caratteri microscopici del tuo ultimo post: "non riesco a scrivere qui nel post la sintassi corretta del div chiuso perchè sempre mi scrive <>", ha chiarito l'equivoco. 

La griglia è quella di Bootstrap 3

Mi riquoto perchè questa mia affermazione aveva un significato sostanziale.
Il codicetto da me usato (e che tu hai utilizzato) funziona solo se il template è basato su Bootstrap 3 e, ancora una volta spulciando il sorgente del tuo sito, ho visto che è invece basato su Bootstrap 2.

La griglia quindi non poteva funzionare e venivano solo letti gli elementi di blocco con l'allineamento al centro delle immagini (vedi quello che appare ora nella tua pagina).

La griglia da usare quindi è:

Codice: [Seleziona]

<div class="row-fluid">
<div class="span12">contenuto</div>
</div>
<div class="row-fluid">
<div class="span2">contenuto</div>
<div class="span4">contenuto</div>
<div class="span4">contenuto</div>
<div class="span2">contenuto</div>
</div>
<div class="row-fluid">
<div class="span12">contenuto</div>
</div>



[mintradir]

sostituito, ma la situazione non cambia...

[Limma]

.... avevo provato online con i soliti tool di ispezione e funzionava perfettamente...
Ora sto fuori col cellulare e, se nessuno interviene pruma, darò un'occhiata in serata.

[mintradir]

grazie 1000
tanto ho anche altre parti da sviluppare non sono fermo.
grazie ancora

[Limma]

sostituito, ma la situazione non cambia...

Perchè hai aggiunto il trattino nelle classi span???
Questo il tuo codice:

Codice: [Seleziona]

<div class="row-fluid">
<div class="span-12" align="center"><img src="/test/SF/images/inspired_green.jpg" alt="Inspired Green"></div>
</div>
<div class="row-fluid">
<div class="span-2" align="center">&nbsp;</div>
<div class="span-4" align="center"><img src="/test/SF/images/inspired_rock.jpg" alt="Inspired Rock"></div>
<div class="span-4" align="center"><img src="/test/SF/images/inspired_pop.jpg" alt="Inspired Pop"></div>
<div class="span-2" align="center">&nbsp;</div>
</div>
<div class="row-fluid">
<div class="span-12" align="center"><img src="/test/SF/images/inspired_pure.jpg" alt="Inspired Pure"></div>
</div>
La scrittura corretta è span12 senza trattino, come nel codice che ti ho postato poco fa.
Toglili e vedrai che funzionerà alla perfezione (o quasi... ).

[mintradir]

E pur si muove!!!
Ottimo
 

[mintradir]

modificando gli span della seconda riga da 2-4-4-2 in 1-5-5-1 ho ottenuto anche immagini grandi uguali

[Limma]

 
Anche se Bootstrap 2 oramai non ha più segreti dai un'occhiata al sito ufficiale.
Troverai moltissime e utilissime info per risolvere eventuali nuove situazioni.

[mintradir]

Ottimo grazie ancora