[RÉGLÉ] JCE et Tableaux

[msig010500]

Bonjour,

Je rencontre un petit soucis avec la gestion des tableaux dans JCE. Lorsque je change le paramètre permettant d'ajouter une marge interne à mon tableau, rien ne se passe. Résultat, les textes/Photo des cellules sont collés les uns aux autres. Certes, ce n'est pas bloquant mais ce n'est pas non plus très esthétique.

Pour exemple, l'adresse du site : http://laflechedaffrique.fr

Merci d'avance pour votre aide.

Michel.

[Rajoz]

Re : JCE et Tableaux

Bonjour msig010500,

Je ne vais pas revenir sur la "querelle des anciens et des modernes" sur l'utilisation ou pas des tables plutôt que des div ...

Effectivement, j'ai vu que dans la table en-dessous de "Journée d'inscription du 7 septembre 2013" il y a une cellule a gauche comportant du texte et une cellule à froite comportant une image et que les deux cellules sont jointives.
La balise table comporte bien un cellpadding de 5. Mais je pense qu'il n'est pas effectif parce que les td des cellules ont un padding de 0 (remise du padding de toutes les balises à 0, ligne 17 du fichier template.css).

Ma proposition est de créer une classe pour les tables en ajoutant à la fin du fichier template.css le code suivant :

table.maclasse td { padding: 6px 8px; }

Cette classe comporte 6px pour l'espace haut et bas et 8px pour l'espace gauche et droite, ces valeurs sont bien sûr à adapter en fonction des besoins. Le nom maclasse peut être aussi être adapté.
Lors de la création de la table dans JCE il suffit dans l'onglet Avancé de saisir maclasse dans le champ "Ajouter des styles" pour que toutes les cellules de la table aient l'espacement souhaité en hauteur et en largeur.

Le résultat au niveau du code HTML sera quelque chose comme

<table class="maclasse">

Amicalement,
Rajoz

[jisse03]

Re : JCE et Tableaux

Bonjour,

Je ne reviens pas non plus sur la querelle des antiquités face aux geeks

Mais là, l'utilisation des divs serait élégante, inclure dans une div
1. en float right l'image avec un float right, hauteur 100%
2. le texte qui habillera correctement l'image

serait à la fois plus esthétique que ce tableau qui repousse du texte plus bas en laissant un blanc de page qui est très loin de faire pro.

[msig010500]

Re : JCE et Tableaux

Bonjour messieurs Oldman et Geek

Merci pour vos réponses.

Je comprends très bien la première méthode (Rajoz) et je suis prêt à l'appliquer. Cependant, malgré mon grand age , j'aimerais comprendre la seconde (jisse03). Comment intégrer cela dans un article saisi avec JCE.

Nonobstant tout cela, au final ce genre d'article sera saisi par les "encore moins technique" que moi et il est donc probable que je choisisse la solution qui rendra la saisie le plus simple.

Dernière info, mon template.css provient d'un template créé avec Template Creator.

Amicalement,

Michel.

[jisse03]

Re : JCE et Tableaux

Bonjour,

Dans le CSS du template, on déclare (s'il ne doit y avoir qu'une seule fois ce traitement, on peut aussi appliquer directement le style à la div en question)

.ptable {
    min-height: 400px;
    overflow: visible;
}

.img-floatleft {
    float: left;
    margin-right: 5px;
    height: 100%;
    display: block;
}

.img-floatright {
    float: right;
    margin-right: 5px;
    height: 100%;
    display: block;
}

Maintenant, il suffit d'appliquer:

<div class="ptable">
    <div class="img-floatleft">
        <img src="..." />
    </div>
    <p>paragraphe 1</p>
     <p>paragraphe 2</p>
     <p>paragraphe 3</p>
</div>

Ce n'est qu'une des méthodes possibles.
L'avantage en est que contrairement aux tables, la lecture par les non voyants avec un terminal Braille reste logique.
Un autre avantage en est, si on a une collection d'articles avec ce type de montage, il suffit de modifier le CSS pour corriger tous les articles.

[Rajoz]

Re : JCE et Tableaux

Bonjour msig010500,

Comme souvent il y a plusieurs solutions au même problème. Je vais en proposer deux autres. La deuxième est similaire à celle proposée par jisse03 en utilisant JCE pour l'image.

1) Généraliser à tous les tableaux
L'avantage c'est que les utilisateurs n'ont pas à saisir la classe dans JCE, l'inconvénient c'est que ça s'applique systématiquement à tous les tableaux mais on peut créer une classe avec padding à 0 pour les tableaux qui n'ont pas besoin de l'espacement. Le code CSS devient :

[COLOR=#3E3E3E]table td { padding: 6px 8px; }[/COLOR]

2) Positionner l'image sans utiliser de tableau avec JCE
Dans JCE quand on insère l'image, il y a la possibilité de définir son alignement. Par exemple dans l'article "Journée d'inscription du 7 septembre 2013" il ya un texte et l'image à droite.
Pour faire cela :

• Saisir le texte puis positionner le curseur au début du texte au début de "La première journée..."
• Cliquer sur l'icône image de JCE.
• Dans JCE, sélectionner l'image avec :
  • Alignement : "Droite". Un exemple du résultat est montré dans la partie Prévisualisation en haut à gauche.
  • Marge : décocher "Valeurs égales" et saisir 20 dans le champ "Gauche".

Le résultat est une image à droite du texte avec une marge de 20px entre le texte et l'image.
Avantage : on peut positionner l'image à droite ou à gauche très facilement selon les besoins de mise en page.
Inconvénient : si l'image est plus haute que le texte, le positionnement continuera à s'appliquer pour le texte suivant ce qui n'est pas toujours l'effet voulu. Des utilisateurs débutants peuvent le gérer en ajoutant des retours à la ligne jusqu'à la fin de l'image. Des utilisateurs plus avertis pourront ajouter le code <div style="clear: both;"></div> avant le texte suivant ou si une classe est crée comme .clear { clear:both; } l'appliquer au texte suivant par exemple <p class="clear">, ou bien regrouper dans un div comme indiqué par jisse03.

Pour voir à quoi cela correspond techniquement dans le code voir les exemples suivants :

• http://www.w3schools.com/cssref/pr_class_clear.asp, dans l'exemple http://www.w3schools.com/cssref/tryi...ss_class-clear il faut mettre float:right; au lieu de float:left; pour avoir un résultat tel que voulu dans l'article du site (texte à gauche, image à droite).
  
• http://www.w3schools.com/css/css_float.asp

Amicalement,
Rajoz

[jisse03]

Re : JCE et Tableaux

@Rajoz

L'utilisation des tableaux avec ou sans padding reste déconseillée malgré tout dans ce cas de figure, puisque non conforme aux recommandation d'accessibilité. Pour respecter l'accessibilité, des tableaux ne devraient être utilisés que et uniquement pour présenter des tables de données.

Y compris en utilisation avec JCE, si le CSS est inclus dans le template, on peut utiliser directement les classes depuis JCE, sans aucun problème

[Rajoz]

Re : JCE et Tableaux

@jisse03,

Ma démarche a été d'essayer de donner à msig010500 différentes solutions pour lui permettre de faire son choix alors que je ne connais pas les utilisateurs "encore moins techniques" qui vont utiliser la solution retenue, ni les raisons qui ont prévalu initialement au choix des tableaux.

Tu as par ailleurs tout-à-fait raison d'insister sur le fait que les tableaux ne respectent pas les recommandations d'accessibilité.

Amicalement,
Rajoz

[msig010500]

Re : JCE et Tableaux

Bonjour,

Tout d'abord excusez moi pour le délai de la réponse, mais un soucis de santé m'a tenu éloigné du PC. C'est le risque quand on commence à devenir une antiquité

Toutes les réponses que vous m'avez faites m'aident beaucoup et en fait la solution retenue pour JCE et celle proposée par Rajoz qui utilise les fonctions de base de JCE et qui est le plus en adéquation avec l'utilisation que peuvent avoir de JCE des non-informaticiens.

Dans tous les cas, merci beaucoup à vous deux car ce genre de post me permet de grandir

Amicalement,

Michel.