https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 5 / 5

Donnez une note !
5 sur 5 - 1 votes
Merci d'avoir noté cet article.

Il peut y avoir un moment où vous aimeriez avoir trois modules côte à côte dans une position de module unique comme dans l'image ci-dessous.

modules-cote-a-cote

Créer un Module distinct pour chacun des éléments. Assigner une classe de Module pour chacun des modules sous l'onglet Paramètres Avancé. Ils peuvent tous avoir le même nom de classe assignée, si vous le désirez.

trois-modules

Lors de l'attribution d'une classe à un module, vous pouvez taper le nom de la classe dans la zone de texte. Si vous ne laissez pas un espace avant le nom de la classe, la classe sera ajoutée à d'autres termes. Si vous placez un espace devant le nom de la classe dans la zone de texte, le nom de la classe sera laissé tel quel.

Par exemple, si vous tapez le nom de classe "trois-modules" dans la zone de texte sans espace, et vous avez assigné votre module à la position-2, le nom de classe est ajouté à la fin de custom de la manière ci-dessous :

<div class="customtrois-modules">
        ---Votre module va ici---
<div>

Notez que cela apparaîtra différemment selon les positions de module.

Si vous laissez un espace avant le nom de votre classe dans la zone de texte, vous obtiendrez du HTML comme ci-dessous :

<div class="custom trois-modules">
        ---Votre module va ici---
<div>

Vous pouvez maintenant cibler le nom de classe dans votre feuille de style personnalisée.

.trois-modules {width: 32%; float: left; }

Dans la section @media de votre feuille de style, vous pouvez modifier la largeur à 100 % pour les plus petites tailles d'écran afin qu'ils s'empilent plutôt que de se mettre côte à côte.

Vous pourriez vous demander "Pourquoi ne pas utiliser un tableau et les mettre tous dans un seul module?"

Le problème avec les tableaux, c'est qu'ils ne s'adaptent pas bien avec la conception responsive. Il n'y aurait pas moyen d'avoir les modules qui s'empilent les uns sur les autres pour les petits écrans.

Vous pourriez vous demander "Pourquoi ne pas simplement utiliser des <div> et mettre ces éléments en un seul module ?"

Vous pourriez, mais avec des modules distincts vous pourriez facilement en publier/dépublier certains ou annuler la publication à une date donnée. Il sera aussi simple de réorganiser l'ordre des modules. Vous pouvez également empiler deux ou plusieurs lignes en dessous de la première ligne si vous voulez un créer un ensemble de modules.

Commentaires   

0 #4 Serge Billon 30-11-2016 19:02
donc :
pour avoir 5 modules il faudra réduire ( exemple 23% pour laisser de la marge)
ensuite le mieux est d'avoir un custom.css , j'indique dans un autre article comment faire sa feuille de style personnalisée dans protostar.web54.fr/.../....
pour @media : il s'agit de media queries, une propriété css qui permet de gérer les propriétés selon les tailles d'écran , et là il faut apprendre ;)
ex : alsacreations.com/.../930-css3-media-queries.html
Citer | Signaler à l’administrateur
0 #3 Serge Billon 30-11-2016 19:02
donc :
pour avoir 5 modules il faudra réduire ( exemple 23% pour laisser de la marge)
ensuite le mieux est d'avoir un custom.css , j'indique dans un autre article comment faire sa feuille de style personnalisée dans protostar.web54.fr/.../....
pour @media : il s'agit de media queries, une propriété css qui permet de gérer les propriétés selon les tailles d'écran , et là il faut apprendre ;)
ex : alsacreations.com/.../930-css3-media-queries.html
Citer | Signaler à l’administrateur
0 #2 facz 30-11-2016 13:31
Bonjour,

où trouver la feuille de style? je cherche à ovoir 5 modules côte à côte dans le footer, et non, empilés.
J'ai bien regardé votre tuto @media, mais il n'est indiqué que cela se trouve dans layout.css

Je ne sais pas comment l'atteindre...

Merci d'avance.

P.S : je vous précise que je ne peux vous donner l'adresse de mon site, puisqu'il s'agit d'un site intranet.

Jeremy
Citer | Signaler à l’administrateur
0 #1 facz 30-11-2016 13:31
Bonjour,

où trouver la feuille de style? je cherche à ovoir 5 modules côte à côte dans le footer, et non, empilés.
J'ai bien regardé votre tuto @media, mais il n'est indiqué que cela se trouve dans layout.css

Je ne sais pas comment l'atteindre...

Merci d'avance.

P.S : je vous précise que je ne peux vous donner l'adresse de mon site, puisqu'il s'agit d'un site intranet.

Jeremy
Citer | Signaler à l’administrateur

Ajouter un Commentaire