Article en plusieurs colonnes

[Minie]

Bonjour !

J'ouvre un sujet ici pour une question qui a l'air de revenir pas mal sur le net, a laquelle j'ai trouvé une demi-réponse en mode bidouillage pas propre, j'aimerais donc approfondir le sujet.

Comment écrire un article en plusieurs colonnes ? Les solutions trouvées sur le net:

1. Construire l'article dans un tableau

J'ai personnellement testé, je trouve que c'est la pire le tableau n’étant apparemment pas vraiment configurable choisi arbitrairement ses largeurs de colonne, écrasant un texte et donnant trop d'espace a un autre. J'avoue ne pas avoir vraiment poussé dans cette voie qui n'avait pas l'air d’être la meilleur solution.

Cette méthode a peut être une meilleur solution ?

2. Construire l'article sous forme de module

Cette solution m'avait l'air pas mal, et bien expliquée sur cette page, mais lorsque je "{loadposition perso10}" dans mon article pour appeler le module j'ai tout simplement une erreur 404 au chargement de la page. J'ai pourtant suivit les étapes avec exactitude. Peut être cela vient t'il de mon template ? Je n'ai pas inclus cette position perso, se créer t'elle automatiquement avec le "{loadposition}" ?

Quelqu'un a t'il essayé cette méthode ?

3. Modifier les paramètres de gestion d'article

Celle ci a l'air de loin la meilleure et très bien expliquée sur cette page, mais encore une fois je crois a une incompatibilité de mon Template car cette technique demande la modification du fichier defaut.php situé d'origine dans "components/com_content/views/article/tmpl/" pour le dupliquer dans "templates/mon-template/html/com_content/article/", hors mon template de base ne contient pas du tout de dossier html. J'ai créé le nécessaire et suivit a la lettre les instructions mais aucune option supplémentaire n’apparaît dans la gestion d'article.

Ma structure après les modifs :

mon-template/
-css/
--font/
font.css
index.html
-html/
--com_content/
les 6 fichiers mofiés.php
defaut.php
-images/
mes images de template
--système/
images + index.html
-img/
images+index.html

Une idée pour faire fonctionner cette solution qui parait la plus pratique une fois mise en place ?

4. Ma solution provisoire en mode bidouillage

Je voulais de mon article un titre centré et le reste en deux colonnes, j'ai donc cassé mon article en 3 articles distinct et modifié mon lien de menu en blog d'une catégorie puisque de base le premier article est pleine page et les deux autres en 2 colonnes. Cette solution est déjà plus propre que les tableaux mais comporte deux inconvénients majeur:
- Pour l'utilisation du site par une autre personne ceci risque d’être légèrement plus compliquée
- Mais surtout je n'arrive pas à modifier la largeur des colonnes qui sont par défaut de 50% chacune. Le code source de ma page m'indique que mes colonnes possèdent les classes CSS item column-1 et item column-2 j'ai donc donné une largeur en % différente pour chacune mais rien ne change.

Un idée ?

[jisse03]

Re : Article en plusieurs colonnes

Bonjour,

Sous Joomla! 3.x avec un template responsive Bootstrap (ou en 2.5 avec un template responsive + plugin JBootstrap), une solution très simple avec uniquement du CSS. Exemple donné pour 2 colonnes.

.my_features {
display: block;
overflow: hidden;
margin: 20px -5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.my-split {
width: 45%;
margin: 10px;
display: block;
float: left;
}
.my_features .my-split {
width: 50%;
margin: 20px 0;
}
.newsitem_text div:first-child .my-split-in {
padding-right: 20px;
}

et dans l'article ou tout autre document

<div class="my_features">
    <div class="my-split">
        <div class="my-split-in">
            <h3>Mon titre col 1</h3>
            <p>bla bla, re bla...</p>
        </div>
    </div>
    <div class="my-split">
        <div class="my-split-in">
            <h3>Mon titre col 2</h3>
            <p>bla2 bla2, re bla2...</p>
        </div>
    </div>
</div>

En jouant sur les largeurs de my-split et les marges, on peut passer en 3 colonnes.

[Minie]

Re : Article en plusieurs colonnes

Merci beaucoup c'est vrai que ca ne m’était pas venu à l'idée, on prend vite l'habitude de rédiger avec l'outil sans le code source et on part a la recherche de solutions toutes tirées par les cheveux en s’éloignant des bases.

Je ne suis que développeuse en herbe, mais, la solution 3. originale me paraissait quand même la plus adaptée uniquement dans le cas de la vente d'un site, le client ne pourra pas s'amuser a créer des balises html et du css.

En tout cas mon problème est réglé, merci a toi, je me pencherais plus tard sur le "pourquoi" la solution 3 n'a pas marché si d'autres sont dans mon cas

[Minie]

Re : Article en plusieurs colonnes

Je reviens quand même pour donner la version la plus simple qui puisse fonctionner pour deux colonnes si d'autres passent par la, c'est d’ailleurs la version que je garde sur mon site car je n'ai pas de marges car pas de bordures:

Code html:

<h1 style="text-align: center;">Mentions légales</h1>
<div class="mentionslegales">
<div class="mentions1">
texte colone de gauche</div>
<div class="mentions2">
texte colone de droite</div>
</div>

Code CSS:

.mentionslegales {
display: block;
}

.mentions1 {
width: 30%;
display: block;
float: left;
}

.mentions2 {
width: 50%;
display: block;
float: right;
}

Oui je sais mes largeurs au total ne font pas 100% mais dans le cas de seulement 2 colonnes une float left et l'autre float right ceci fait office de marge entre les deux tout en resserrant un texte justifié au maximum pour faire des jolis contents.

[lomart]

Re : Article en plusieurs colonnes

Bonsoir,

Une solution plus facile pour des rédacteurs et responsive

Créer un style col-2 dans le template du site avec le css suivant:

.col-2 {-moz-columns: 2 auto; -webkit-columns: 2 auto; columns: 2 auto}
@media (max-width: 640px) {
.col-2 {-moz-columns: 1 auto; -webkit-columns: 1 auto; columns: 1 auto}
}

Il suffit ensuite de mettre tout le contenu dans une <div class="col-2"> et le tour est joué
Sur les smartphones et les vieux navigateurs, le contenu est sur une colonne.

exemple

<h3>Le titre sur toute la largeur</h3>
<div class="col-2">
  <p>un paragraphe</p>
  <p>un autre paragraphe</p>
</div>

Amélioration:
- on peut prévoir des classes col-3, col-4
- adapter automatiquement le nombre de colonnes à la largeur de l'écran avec des mediaqueries. voir: http://codepen.io/Lomart/pen/Kgtsn