Paramétrer les colonnes

mexiquedecouverte · Membre · juin 2, 2018 at 6:32
Copier le lien

Ajouter le thème aux favoris
Bonjour,
Je souhaite créer 2 colonnes sur le thème Mixfolio et j’ai quelques difficultés.

Voir ce lien

Comme vous pourrez le voir, il y a un décalage entre les 2 premières photos (elles sont aux mêmes dimensions) et ça décale également les textes du dessous.

J’ai constaté que s’il y a le même nombre de ligne, le problème est résolu mais si je saute des lignes, le problème reste identique.

Et-il possible de « justifier » les textes des 2 colonnes ?

Comment faire pour harmoniser tout ça.

Par avance Merci.

L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).
mexiquedecouverte · Membre · juin 2, 2018 at 6:34
Copier le lien
Lien :
mexiquedecouverte · Membre · juin 2, 2018 at 6:37
Copier le lien
C’est en privé, en brouillon et n’arrive pas à afficher le lien.
mexiquedecouverte · Membre · juin 2, 2018 at 7:09
Copier le lien
mexiquedecouverte · Membre · juin 2, 2018 at 7:10
Copier le lien
Impossible d’afficher le lien.
Voir partie Villes Coloniales > Mexico City > Musées test.

Merci
brindille33 · Modérateur · juin 2, 2018 at 7:23
Copier le lien
Bonsoir,
Voici un lien où le même sujet a été traité :
https://fr.forums.wordpress.com/topic/texte-sur-2-colonnes-dans-une-page/?replies=2
Si vous rencontrez des difficultés à arriver aux résultats mentionnés sur l’explication, vous pouvez sans soucis continuer le topic. Bonne soirée à vous.
mexiquedecouverte · Membre · juin 2, 2018 at 9:48
Copier le lien
Bonsoir,
J’avais trouvé le lien et m’en suis aidée mais j’ai quand même galéré pas mal.

J’ai constaté que s’il y a le même nombre de ligne, le problème est résolu du coup j’a ajouté pour créer un espace et c’est presque parfait.

Mais j’ai pas compris comment réduire l’espace central entre les 2 colonnes.

Merci de votre aide Brindille33
mexiquedecouverte · Membre · juin 2, 2018 at 10:40
Copier le lien
Problème avec copier-coller. Manque J’ai ajouté pour créer un espace.
mexiquedecouverte · Membre · juin 2, 2018 at 10:41
Copier le lien
& n b s p ;
brindille33 · Modérateur · juin 3, 2018 at 10:20
Copier le lien
Bon dimanche,
Je ne trouve pas votre article. Si il est en brouillon, je ne puis pas le voir.
Le nom que vous citez, je ne le trouve pas. Quant à mettre le code ici, vous faites clic sur »code » au-dessus de ce cadre, vous ajoutez le code mode texte ou html et ensuite clic sur « /code » ci-dessus.
Ce qui donne ceci :
code html ou mode texte

Je pourrai ainsi voir ce qui ne va pas.
mexiquedecouverte · Membre · juin 3, 2018 at 9:36
Copier le lien
Bonjour Brindille,
J’ai mis la page en ligne, elle retrouve dans la Rubrique Villes Coloniale>Mexico City>Musées
Sur PC c’est assez aligné par contre sur smartphone c’est une horreur et sur tablette (iPad) comme sur PC.

Je voudrais trouver quelque chose qui tienne mieux la route.

Merci pour l’info concernant les codes.
brindille33 · Modérateur · juin 4, 2018 at 8:08
Copier le lien
Bonjour et bonne semaine,

Pour changer l’espacement entre les colonnes, vous pouvez jouer avec le « padding » (donc dans le code HTML, vous remplacez « 10px » par « 20px » par exemple).

Dans votre cas, vous faites le contraire bien entendu et vous diminuez les « px » en nombre.
J’ai repris ce qui est indiqué par notre ami @airodyssey dans le lien que je vous ai communiqué ci-dessus.
J’espère que le tout sera restera centré sinon, d’après mon avis, ce ne serait pas très beau comme visibilité.

Pour ce qui concerne, la visualisation sur tablette ou tel mobile, cela ne devrait en principe pas donner de modification.
Je demande toutefois l’aide du personnel de chez WordPress en mettant le tag modlook. Ceci pour les codes html que vous pourriez insérer. Un peu de patience. Merci. :-)
cecilearkay · Membre · juin 4, 2018 at 1:16
Copier le lien
Bonjour,

C’est un peu compliqué – à moins que vos éléments de chaque côté fasse la même taille (même nombre de lignes, images de la même taille, espacements similaires, etc.) ce ne sera pas possible.

Le mieux au lieu d’utiliser des colonnes serait d’utiliser un tableau avec deux colonnes et une cellule pour chaque éléments. Dans votre cas, ça sera 2 colonnes et 4 cellules dans dans chaque colonne. Voici du code HTML basique qui fait un tableau en 2 x 4 :
```
<table>
<tbody>
<tr>
<td>Element 1</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 2</td>
<td>Element 6</td>
</tr>
<tr>
<td>Element 3</td>
<td>Element 7</td>
</tr>
<tr>
<td>Element 4</td>
<td>Element 8</td>
</tr>
</tbody>
</table>
```
Capture d’écran du résultat : http://cld.wthms.co/SgF7V2

Je vous recommande de créer une nouvelle page pour faire vos changements afin de recommencer sur une page neuve plutôt que votre page actuelle où vous risquez de vous emmêler les pinceaux avec le code. :)
mexiquedecouverte · Membre · juin 4, 2018 at 3:31
Copier le lien
Bonjour et merci à vous 2 pour vos précieux conseils.

Je vais essayé le tableau afin de voir si l’alignement est mieux respecté.

Je vous tiens au courant, bonne journée.
mexiquedecouverte · Membre · juin 5, 2018 at 12:11
Copier le lien
Bonsoir,
J’ai utilisé le code proposé par Cécile est c’est bien plus simple mais il y avait quand même un décalage en les éléments.

J’ai inséré & n b s p ; pour par exemple mettre les photos au même niveau.

Je pense que le problème vient du fait qu’il n’y ait pas le même nombre de lignes, sachant que les images sont au même format.

Concernant la visibilité sur mobile, c’est idem qu’avec les colonnes, il y a beaucoup de décalage mais pour cette question, j’attend une réponse comme mentionnée par Brindille.

Merci encore pour votre aide.
brindille33 · Modérateur · juin 5, 2018 at 8:06
Copier le lien
Bonjour,
Je viens d’aller voir votre site dans le menu : « Musées »
Je trouve que la présentation est belle. Ce n’est que mon avis, je ne connais pas le vôtre.
Qu’est ce qui pourrait encore vous « chiffonner » ? :-)
Merci pour votre réponse.
mexiquedecouverte · Membre · juin 5, 2018 at 4:01
Copier le lien
Bonjour Brindille,

J’ai une tendance perfectionniste lol. En fait j’ai du bidouiller pour arriver à un bon équilibre entre les textes et les photos.

Je cherche comment éviter les bidouillages   car j’ai remarqué que dans les pages du tableau de bord et dans les pages du menu Mon Site, le code disparaît.

Mais suis également contente du résultat.

J’attend une réponse concernant le décalage entre la visualisation PC et smartphone car il y a toujours un décalage franchement pas jolie.

Très bonne journée.
brindille33 · Modérateur · juin 5, 2018 at 5:31
Copier le lien
Ok, pas de soucis. Je mets le tag modlook pour demander le retour de Cécile. Bonne soirée.
cecilearkay · Membre · juin 5, 2018 at 5:44
Copier le lien
Bonjour,

Effectivement, si vous commencez chaque cellule avec du texte qui n’est pas de même longueur, les images seront décallées. Pour parer à ce problème, il faudra commencer chaque cellule par l’image.

Pour la version mobile, la solution précédente devrait vous aider, mais vous pouvez aussi « forcer » la hauteur des rangées comme ceci :

<tr style="height: 200px;">

Voici à quoi cela ressemble en reprenant mon premier exemple :
```
<table>
<tbody>
<tr style="height: 200px;">
<td>Element 1</td>
<td>Element 5</td>
</tr>
<tr style="height: 200px;">
<td>Element 2</td>
<td>Element 6</td>
</tr>
<tr style="height: 200px;">
<td>Element 3</td>
<td>Element 7</td>
</tr>
</tbody>
</table>
```
mexiquedecouverte · Membre · juin 5, 2018 at 6:57
Copier le lien
Bonjour Cécile,

Je viens de tester en positionnant les photos avant le texte, je trouve que le rendu de la page est beaucoup mieux de cette façon, et en visualisation sur smartphone si les titres font la même longueur, la distorsion photo-texte disparait.

Merci beaucoup pour votre aide.

Je clôture le post.