Autore Topic: RISOLTO: Articolo su più colonne responsive (Letto 2205 volte)

gianfritz · « **il:** 16 Set 2017, 10:39:53 »

Vorrei mettere in home page un articolo suddiviso su 3 colonne, in modo che ci sia l'effetto responsive per i cellulari.
So che si dovrebbero usare i <div> ma con le indicazioni che trovo in giro non riesco a farlo.
Ho trovato sul forum l'indicazione di questo plugin:
https://extensions.joomla.org/extension/admiror-columnizer
ma non è responsive.
Puoi aiutarmi a realizzare questo desiderio?

tonicopi · « **Risposta #1 il:** 16 Set 2017, 11:13:52 »

Hai provato questo editor
Sembra che lo faccia

Alex21 · « **Risposta #2 il:** 16 Set 2017, 13:24:27 »

Se ti serve solo mettere in più colonne e non vuoi scaricare l'estensione che fa tante altre cose, la proprietà css che va bene dovrebbe essere display:inline-block;
Prova questo frammento:

Codice: [Seleziona]

<!DOCTYPE html>
<html>
    <head>
        <title>frammento colonne</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p></p>
        <div style="max-width: 1000px; margin: auto;">
            <div style="width: 100%; height: 200px;">
                <div style="display: inline-block; width: 250px;margin-right: 50px; margin-bottom: 10px; border: 1px solid;padding: 0 6px 0 6px;">
                    <p>Art. 1<br>Qualcosa<br>&nbsp;di scritto</p>
                <>
                <div style="display: inline-block; width: 250px; border: 1px solid;margin: 0 50px 0 0; padding: 0 6px 0 6px; margin-bottom: 10px;">
                    <p>Art. 2<br>Altra cosa<br>scritta<br>qui</p>
                <>
                <div style="display: inline-block; width: 250px; border: 1px solid;padding: 0 6px 0 6px;">
                    <p>Art. 3<br>Ultimo paragrafo<br>da<br>incolonnare</p>
                <>
            <>
    <>
    </body>
</html>

Il codice si mette direttamente nell'articolo, ovviamente omettendo <head> e <body> perché li mette joomla quando costruisce la pagina. A Te interessano solo i <div> e lo stile in linea.
Ciao!

gianfritz · « **Risposta #3 il:** 16 Set 2017, 16:53:16 »

Effettivamente lo avevo già visto ma non vorrei installare un editor nuovo. Grazie Tonicopi, sempre attento e disponibile.

Alex21, grazie del codice: l'ho usato, funziona, un po' corretto e modificato...
Ma avviene un allineamento strano nelle colonne (in verticale): sembra quasi che le tre colonne vengano allineato in basso (almeno così sembra da alcune prove che ho fatto).
Mi puoi dire pf come allineare in alto?

CORREGGO: ho trovato questo codice: vertical-align: top; che ho messo in ogni colonna.
La prima colonna è poco poco più bassa delle altre, ma sono già contento

Alex21 · « **Risposta #4 il:** 16 Set 2017, 18:57:16 »

Citazione da: gianfritz - 16 Set 2017, 16:53:16

Alex21, grazie del codice: l'ho usato, funziona, un po' corretto e modificato...

Lo stile definitivo è tuo naturalmente

Il frammento serviva solo per vedere display: inline-block;
Sul tuo articolo potrebbero essere attive anche regole di stile impostate dal template.
Quasi tutte le istruzioni css ammettono valori negativi, quindi una cosa tipo margin-top: -15px; funziona perfettamente.
Infine, permetti un consiglio. Quando avrai trovato con un po' di prove lo stile giusto, siccome quello in linea è, diciamolo, bruttino, si può aggiungere ad ogni div una classe <div class="myClass"> , poi eliminare style="" e trasferire il css necessario in un file esterno, quello personalizzabile del template.
Ciao!

gianfritz · « **Risposta #5 il:** 18 Set 2017, 11:09:09 »

Grazie alex21, le tue informazioni sono sempre molto precise e comprensibili.

Autore Topic: RISOLTO: Articolo su più colonne responsive (Letto 2205 volte)

gianfritz

RISOLTO: Articolo su più colonne responsive

tonicopi

Re:Articolo su più colonne responsive

Alex21

Re:Articolo su più colonne responsive

gianfritz

Re:Articolo su più colonne responsive

Alex21

Re:Articolo su più colonne responsive

gianfritz

Re:RISOLTO: Articolo su più colonne responsive