RÉGLÉ – Placer 4 modules dans un article

[fredjouan]

Bonjour,
Quatre modules personnalisés (230 pixels de large) doivent être répartis dans un container de 1000 pixels, dans l'article de la page d'accueil.
C'est un site avec bootstrap.
Un premier essai en les intégrant dans un tableau montre que le responsive design ne fonctionne pas. En les plaçant à la suite d'un de l'autre comme ça :

<p>{loadposition mod1}{loadposition mod2}{loadposition mod3}{loadposition mod4}</p>

le template les affiche l'un au-dessus de l'autre.
Quelle syntaxe pour appeler les modules et respecter le responsive design ?
Fred

[PieceOfCake]

Re : Placer 4 modules dans un article

Bonjour,

peut être simplement placer chaque {loadposition} dans une <div> ou un <span> et régler les positionnements relatifs en % et avec des float ?

quelque chose comme :

<div id="container" style="width:1000px">
  <span id="bloc1" style="width:230px;float:left;margin-right:10px;">{loadposition mod1}</span>
  <span id="bloc2" style="width:230px;float:left;margin-right:20px">{loadposition mod2}</span>
  <span id="bloc3" style="width:230px;float:left;margin-right:20px;">{loadposition mod2}</span>
  <span id="bloc4" style="width:230px;float:left;margin-right:20px;">{loadposition mod3}</span>
</div>

et remplacer les width:230px par des width:23% en prime ?

[webcrea]

Re : Placer 4 modules dans un article

+1 à pieceofcake

@fredjouan : je ne sais pas quel template tu utilises mais il y a des chances pour qu'il est déjà une grille à te proposer avec des position du style user1, user2, user3, user4, un module par position et tu auras tes modules responsives

[fredjouan]

Re : Placer 4 modules dans un article

@fredjouan : je ne sais pas quel template tu utilises mais il y a des chances pour qu'il est déjà une grille à te proposer avec des position du style user1, user2, user3, user4, un module par position et tu auras tes modules responsives

Très juste, ça marche nickel, un grand merci à tous les deux.
Fred

[fredjouan]

Re : Placer 4 modules dans un article

Bonjour,
L'affichage dans un site de vérification donne l'aspect suivant :

[PieceOfCake]

Re : Placer 4 modules dans un article

bonjour

pièce jointe inaccessible, il faut passer en mode avancé (avant de) pour pouvoir partager un document

[fredjouan]

Re : Placer 4 modules dans un article

Voici le lien :
C'est bizarre, l'affichage est correct pour moi.

[webcrea]

Re : Placer 4 modules dans un article

A ce niveau un lien vers le site serait souhaitable...

[PieceOfCake]

Re : Placer 4 modules dans un article

Pareil inaccessible : Pièce jointe invalide

[webcrea]

Re : Placer 4 modules dans un article

Pareil inaccessible : Pièce jointe invalide

je l'ai la pièce jointe...

[PieceOfCake]

Re : Placer 4 modules dans un article

Pas moi ni l'une ni l'autre toutes les deux avec le même message

[webcrea]

Re : Placer 4 modules dans un article

@piece : les 2 sont ok chez moi

@fred : n'aurais tu pas mis 23% pour la largeur de tes div parce que dans ce cas ce n'est pas nécessaire, le bootstrap s'en chargeant

[fredjouan]

Re : Placer 4 modules dans un article

Bon, c'est dommage, la pièce jointe qui ne veut pas s'afficher. Lorsque j'essaye de l'afficher par l'adresse URL, j'ai un message d'erreur : URL non valide (ce doit être l'adresse https).
En installant le fichier sur un autre site : Access denied (ça, c'est le renforcement de la sécurité avec aesecure) :

http://www.lachampagne.com/images/bootstrap-fred-net.jpg

Pourtant, le CHMOD est à 644...

Bref, c'est un peu kafkaïen pour poster une image et le plus simple, est encore de taper l'URL du site dans un vérificateur responsive design (mais là encore, certains vérificateurs ne supportent pas les URL https) :

https://www.fred-net.fr/

[fredjouan]

Re : Placer 4 modules dans un article

Par exemple sur ce site, l'URL https://www.fred-net.fr/ n'est pas supportée, alors que http://www.fred-net.fr/ fonctionne !

[fredjouan]

Re : Placer 4 modules dans un article

Bingo,@webcrea !
En retirant les attributs width, le bootstrap fonctionne parfaitement.
Encore merci à tous les deux,
Fred