Articolo dividerlo in due colonne nella parte superiore

[nikned]

Buongiorno a tutti,
sono un neofita e quindi mi rivolgo a voi, ho già letto diversi post simili ma senza riuscire a risolvere il mio problema.
Vorrei impostare su due colonne un testo e poi nella parte inferiore tornare ad una sola colonna.
vi posto la pagina cosi capite meglio, ora uso una tabella senza bordi ma l'effetto è molto brutto e il responsive potrebbe non funzionare correttamente.


link


vedete i servizi li vorrei in due colonne per non creare un elenco unico brutto esteticamente mentre "altri test" riposizionarli su un unica colonna ( questo penso si faccia con un semplice intterruzione di pagina) la cosa difficile che non riesco a dividere in due colonne


Se riuscite a spiegarmi per filo e per segno ve ne sarei grato che sono alle prime armi.

[nikned]

Up

[floyd1616]

Ciao,
buongiorno a tutti


spero possa esserti utile questo articolo: impaginare i contenuti in colonne con i css

https://www.extrowebsite.com/blog/css3-multi-column-layout-module-impaginare-contenuti-in-colonne

Saluti

[nikned]

Perfetto,
l'ho letto e riletto ma non capisco ugualmente come fare, non avendo mai scritto...


prima domanda, i suddetti codici citati nel post da te mandato vanno inseriti nell'editor dell'articolo?
e poi non capisco come assemblarli assieme...


mettiamo che io voglio solo due colonne nell'articolo, che siano ovviamente responsive e non come le tabelle.


Vado in editor e ho incollato:

Codice: [Seleziona]


<div class="column">
testo...
<>
.column {
   column-count: 2;
   column-gap: 20px;
}


ovviamente non funziona...

[floyd1616]

ciao,
...ovviamente non funziona in quanto, se non scrivi il codice CSS adeguato, non vedrai nulla.

Ti riporto il codice css che è stato utilizzato per l'esempio

Codice: [Seleziona]

body{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
font-family:sans-serif;
margin:0;
padding:.5rem 0 0;
font-size:18px;
text-align:center;
color:#545454;
}

.column{margin:1.5em}

@media screen and (min-width:768px){
.column{
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
column-count:2;
column-gap:20px
}
}

.column h1{margin:0;padding:0;line-height:normal;margin-bottom:30px}

p{line-height:1.45em;padding:0;margin:0 0 10px;text-align:justify}

oltre a trovare l'esempio al seguente url: 
https://www.extrowebsite.com/esempi/css3-multi-column-layout-module-realizzare-layout-2-colonne

Il codice css lo scrivi nel file del tuo template (template.css) o come lo hai rinominato.

Per avere il risultato che vorresti, dovresti disabilitare l'editor di joomla, qualunque esso sia. Altrimenti, dopo aver scritto codice html ed aver salvato, perderesti tutto. Da frontend non vedrai mai nulla.

Spero di essere stato sifficientemente chiaro.

saluti.

[nikned]

Ma modificando il template.css poi mi ritroverò le due colonne su tutti gli articoli o sbaglio?

[floyd1616]

No.
Solo nelle pagine in cui vai ad inserire "quel" codice html.

Attento agli altri div che hai già nel tuo sito. Se ce ne fosse qualche altro con la stessa classe assegnata da me, per l'esempio, faresti una gran confusione per il layout.

Andresti a mischiare il codice aggiunto dopo, con quello già presente.

saluti

[nikned]

Ti ringrazio per la risposta,
mi sembra particolarmente complesso come procedura per avere due colonne però lo tengo buono per quando capirò qualcosina di più sul funzionamento di joomla e se riuscirò a farlo lo metterò risolto con la procedura, per ora ti ringrazio ancora.