Separer les paragraphes dans un contenu

Separer les paragraphes dans un contenu

par vouty -,
Nombre de réponses : 17

Bonjour,

Je bute sur un point stupide illustre dans le fichier attaché (cas dans le contenu d'une lecon).

En fait je n'arrive pas a controler la separation de deux paragraphes comportant des images (flottant gauche). Suivant la taille de la fenetre j'ai ou pas un chevauchement.

Je voudrais assurer, quelque soit la largeur de la fenetre :

point 1 : Texte commencant au debut de l'image

Point 2 : un espace minimum entre la fin physique du 1er paragraphe (ceci peut-etre l'image ou le texte) et le debut du suivant

La solution doit -etre simple mais je ne la trouve pas.

Merci

 

 

 

Annexe Content separer paragraphes_images 2_1280x720.jpg
Moyenne des évaluations  -
En réponse à vouty -

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Je vois une solution assez simple en passant par du CSS.
Il faut déclarer une classe pour l'ensemble image + texte.
Ici, je l'appellerai "machin".
Tant que j'y suis, j'en déclare une deuxième pour l'image, "imagemachin". Elle n'est pas vraiment nécessaire, mais elle évite d'avoir à déclarer le "float" et le "padding" à chaque fois. (Depuis que je commence à comprendre le CSS, c'est-à-dire depuis très peu de temps, j'en use et j'en abuse !)

Côté feuille de style, ça donne ça :

.machin  {
    display: inline-block;
    padding-bottom: 30px;
}

.imagemachin  {
    float: left;
    padding-right: 10px;
}

Côté code html, ça donne ça :

<div class="machin"><img class="imagemachin" src="lien_vers_image1.png" />
<p style="text-align: justify;">Le texte Lorem ipsum plus petit que l'image.</p>
</div>
<div class="machin"><img class="imagemachin" src="lien_vers_image2.png" />
<p style="text-align: justify;">Le texte Lorem ipsum plus grand que l'image.</p>
</div>

Annexe machin.png
Moyenne des évaluations Utile (1)
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Je disais que depuis peu j'usais et abusais du CSS, alors j'en profite pour poser une question à laquelle je ne trouve pas de réponse.

Toutes ces règles, dont certains sont personnelles et dont d'autres sont des modifications des feuilles CSS du thème, je les place dans la zone prévue pour ça dans les réglages dudit thème.

Ce que je ne sais pas, c'est si le navigateur "lit" prioritairement les règles modifiées, en ignorant les règles standards (auquel cas il ne perd pas de temps et tout va bien), ou s'il "lit" d'abord les règles standards avant de les corriger selon mes modifications (auquel cas il "perdrait du temps" et ça m'embêterait).

J'ai conscience d'être confus, mais je n'arrive pas à exprimer ma question plus clairement !

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Didier "Ce que je ne sais pas, c'est si...

a) le navigateur "lit" prioritairement les règles modifiées, en ignorant les règles standards (auquel cas il ne perd pas de temps et tout va bien),

b) ou s'il "lit" d'abord les règles standards avant de les corriger selon mes modifications (auquel cas il "perdrait du temps" et ça m'embêterait)."

Je suis quasiment certain que c'est le cas b). Pour la "perte de temps", il n'y a pas de quoi s'inquiéter.

Joseph

Moyenne des évaluations  -
En réponse à vouty -

Re: Separer les paragraphes dans un contenu

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Comme ça ?

lib01Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pede ipsum, interdum ac, tempus vitae, mollis at, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi justo. Cras sit amet nisl. Suspendisse potenti. Nam egestas nisi vel libero. Nulla facilisi. Duis fermentum orci tincidunt quam. Vivamus et leo. Donec hendrerit, erat ut gravida pharetra, quam augue pharetra risus, in laoreet enim elit non ante.

lib02Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pede ipsum, interdum ac, tempus vitae, mollis at, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi justo. Cras sit amet nisl. Suspendisse potenti. Nam egestas nisi vel libero. Nulla facilisi. Duis fermentum orci tincidunt quam. Vivamus et leo. Donec hendrerit, erat ut gravida pharetra, quam augue pharetra risus, in laoreet enim elit non ante. Nunc ut diam. Curabitur sapien nunc, scelerisque a, sagittis ac, tempor ac, nisl. Etiam posuere, felis non consequat sollicitudin, libero quam scelerisque nisl, a tempor massa ante non quam. Nullam tincidunt. Praesent condimentum. Cras iaculis. Mauris ornare, ligula vitae scelerisque aliquet, turpis risus varius risus, eu ultrices purus quam ac pede. Nullam pulvinar libero vitae erat.

Moyenne des évaluations Utile (1)
En réponse à Joseph Rézeau

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Tiens, Joseph et moi n'avons pas le même "Lorem ipsum"...
Cela dit, les deux ont en commun d'être incompréhensibles !

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Je ne sais plus d'où vient mon Lorem ipsum...

Ceci dit, les règles CSS nécessaires pour obtenir le résultat demandé par "vouty" sont visibles dans mon message (en regardant la source dans son navigateur). Je n'utilise pas de feuile de style particulière.

Puisque le 1er paragraphe contient une image avec la propriété float:left, je donne à mon 2e paragraphe un style avec la propriété "clear:both". C'est tout !

Joseph (qui a découvert les règles CSS ... au siècle dernier) grand sourire

Moyenne des évaluations  -
En réponse à Joseph Rézeau

Re: Separer les paragraphes dans un contenu

par vouty -,

Bonjour !
Il semblerait que ca fonctionne aussi avec les papillons
et J'ai mis quelques commentaires et questions en fin de page sourire

pap1 Duis blandit pulvinar urna, a gravida risus elementum at. Nam eu diam scelerisque, suscipit massa non, facilisis libero. Curabitur mauris erat, imperdiet vitae dui et, molestie pretium diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum nisi libero, imperdiet pharetra dui condimentum ut. Vestibulum pharetra, eros ut porttitor porta, augue nisi condimentum ipsum, et dapibus quam mauris nec neque. Maecenas odio lectus, sodales id quam at, viverra venenatis leo. Morbi vel metus sit amet nunc fermentum tincidunt. Ut velit orci, mattis ac sagittis eu, posuere tincidunt lacus. Vivamus id risus a odio ullamcorper consectetur. Donec sollicitudin ut neque at rutrum. Fusce vulputate nunc non neque ultricies tempor.

pap2 Nullam condimentum mollis diam in sollicitudin. Maecenas gravida lectus sed lacinia tempus. Nunc lacus lacus, pretium nec eleifend a, vestibulum ut purus. Aenean quis adipiscing mauris. Proin suscipit laoreet diam, vel gravida augue euismod vitae. Vestibulum at auctor sapien. Praesent laoreet lacinia nisl dignissim pulvinar. Suspendisse eros dui, eleifend ut rhoncus id, eleifend a massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lectus at elit luctus pharetra faucibus ut sem. Integer vitae magna nisi. In vitae nulla in risus ultricies adipiscing ac ac nisl. Nullam nunc tellus, consequat non massa sit amet, pulvinar pretium erat. Nunc in ante auctor, fringilla lectus quis, egestas magna. Vestibulum fermentum non leo at posuere. Nulla convallis vehicula hendrerit.

pap2 En fait, apres avoir utilisé la methode des tableaux Excel pour une mise en page simplifée, je suis revenu vers ce code html. Cela parait une methode assez souple et visuelle (J'ai utilisé l'editeur HTML Notepad++).
Une question : Comment les experimentes que vous etes travaillent habituellement pour ce type de presentation ? Utilisez-vous un editeur HTML dans lequel vous ecrivez votre page et ensuite vous collez le code dans l'editeur HTML de Moodle ? Directement dans l'editeur Moodle ? Une autre methode ?

Merci et bonne journee

 
Moyenne des évaluations  -
En réponse à vouty -

Re: Separer les paragraphes dans un contenu

par Jérôme DEMIAUX,
Avatar Traducteurs

Bonsoir,

La réponse à cette question va différer en fonction de vos réels besoins, de votre rôle sur la plateforme et de vos compétences en HTML, CSS et/ou javascript.

Cependant, je développerais uniquement celle qui me semble la plus simple et la plus universelle puisqu'elle ne demande aucune compétence, ni rôle particulier et ne s’appuie que sur les possibilités natives de l'éditeur inclut dans Moodle. Elle sera donc reproductible dans tous les contextes et par l'utilisateur lambda.

L'effet recherché peut s'obtenir par la simple insertion d'un tableau à une seule colonne et au nombre de lignes voulues. Dans chaque ligne, une image (flottant gauche) est déposée accompagnée de son texte, ce qui donne :

sourireLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pede ipsum, interdum ac, tempus vitae, mollis at, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi justo. Cras sit amet nisl. Suspendisse potenti. Nam egestas nisi vel libero. Nulla facilisi. Duis fermentum orci tincidunt quam. Vivamus et leo. Donec hendrerit, erat ut gravida pharetra, quam augue pharetra risus, in laoreet enim elit non ante.

sourireLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pede ipsum, interdum ac, tempus vitae, mollis at, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi justo. Cras sit amet nisl. Suspendisse potenti. Nam egestas nisi vel libero. Nulla facilisi.
Duis fermentum orci tincidunt quam. Vivamus et leo. Donec hendrerit, erat ut gravida pharetra, quam augue pharetra risus, in laoreet enim elit non ante. Nunc ut diam. Curabitur sapien nunc, scelerisque a, sagittis ac, tempor ac, nisl. Etiam posuere, felis non consequat sollicitudin, libero quam scelerisque nisl, a tempor massa ante non quam. Nullam tincidunt. Praesent condimentum. Cras iaculis. Mauris ornare, ligula vitae scelerisque aliquet, turpis risus varius risus, eu ultrices purus quam ac pede. Nullam pulvinar libero vitae erat.

Moyenne des évaluations Utile (1)
En réponse à Jérôme DEMIAUX

Re: Separer les paragraphes dans un contenu

par Jean-Marc Doucet,
Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs

Une secte !! yeux grands ouverts

Moyenne des évaluations  -
En réponse à Jean-Marc Doucet

Re: Separer les paragraphes dans un contenu

par Séverin Terrier,
Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Carrément !

Surtout un samedi soir, à cette heure là ; Moodle n'occupait pas mes esprits (j'étais à un repas entre amis)...

Moyenne des évaluations  -
En réponse à Jérôme DEMIAUX

Re: Separer les paragraphes dans un contenu

par Joseph Rézeau,
Avatar Développeurs Avatar Développeurs de plugins Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

@Jérôme : ta méthode marche très bien (également). Moi j'aime bien les méthodes qui demandent des compétences.cool

Bon, maintenant on a 3 méthodes pour aboutir au même résultat. Qui dit mieux ? Le concours est ouvert. Même pas besoin de faire partie de la "secte" pour participer.grand sourire

Joseph

Moyenne des évaluations  -
En réponse à Joseph Rézeau

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Je participe au concours.

4e méthode, donc : celle qui combinerait la souplesse d'un CSS personnalisé (avec réglages précis, modifications globales facilitées...) et l'utilisation transparente pour celui que Jérôme appelle l'utilisateur lambda, qui n'aurait pas à ouvrir l'éditeur du code source.

Il s'agirait de lier l'application de ces règles à un ou plusieurs boutons supplémentaires dans l'éditeur TinyMCE. Boutons ou lignes de menu déroulant, peu importe. Les lambdas n'auraient qu'à se dire : "je veux que ça s'enroule à droite de l'image, je clique là-dessus. Maintenant je veux que ça aille en-dessous, je clique là-dessus."

Bon. J'ai parcouru plein de docs, aussi bien sur Moodle que sur le site de l'éditeur TinyMCE, et il faut bien le reconnaître : si j'ai compris que c'était faisable, je n'arrive pas pour autant à suivre les recettes proposées... ça bloque toujours quelque part.

Tant pis. On va dire que le concours ne consiste pas à donner de nouvelles solutions, mais juste à les décrire !

_________________

Pour la secte : l'Histoire nous apprend que les gens qui s'expriment dans du latin qu'ils ne comprennent pas eux-mêmes font des sectes qui ne réussissent pas trop mal !

Moyenne des évaluations Utile (1)
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par vouty -,

ThumbApres quelques secondes d'incomprehension (du texte en latin !), et quelques minutes d'analyse j'ai commencer a trouver la facon de repondre interessante .
La solution de Didier et Joseph avec le code CSS/html me parait souple et rapide si me familiarise avec le code . De plus c'est mon premier exemple d'application du CSS dans le theme . Ce sera probablement la solution que je vais adopter a terme des que je pourrais me degager du temps pour aller maitriser convenablement le langage.
Pour resoudre mon besoin immediat je pense que je vais utiliser la solution de Jerôme
Merci encore et bonne journée

Nota : Pour le "decodage" du texte en latin "Lorem Ipsum" , à ce j'ai compris les differences viendraient de blagueurs qui glisseraient de ''petits messages'' dans le texte (voir l'article ci-dessous)...

Lorem Ipsum cover

Article sur le Lorem Ipsum

(choisir la langue désirée dans la banniere du haut)
Moyenne des évaluations  -
En réponse à vouty -

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Je connaissais l'histoire du Lorem ipsum, mais je n'avais jamais soupçonné qu'il pouvait s'enrichir de variantes blagueuses...

Une analyse rapide me laisse penser que le mien est plus authentiquement (!) cicéronien que celui de Jérôme et Joseph. D'un autre côté, le leur est plus rigolo, puisqu'il y est question de pied malade, et même plus tard de pied purulent, de montagne qui accouche d'une souri, de lion et de panthère...

Des thèmes plus zoologiques que philosophiques, et qui éclairent la pensée de Cicéron d'un jour nouveau...

 

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

Ce préambule de Jérôme a résonné agréablement à mes oreilles:

"Cependant, je développerais uniquement celle qui me semble la plus simple et la plus universelle puisqu'elle ne demande aucune compétence, ni rôle particulier et ne s’appuie que sur les possibilités natives de l'éditeur inclut dans Moodle. Elle sera donc reproductible dans tous les contextes et par l'utilisateur lambda."

En résumé: Un tableau contenant images et textes en vis à vis est une solution simple et rapide.

Quel prof lambda connaît les... CSS ?

Pour les cas plus complexes j'utilise Libre Office et je fais un copier coller soit de la page, soit du code html dans les cas où je n'obtiends pas ce que je veux.

Dès qu'on veut du "bô travail" Une petite chaîne éditoriale n'est pas à exclure (genre OptimOffice si on aime la 2CV ou Opale si l'on aime les voitures de sport).

Daniel

Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: Separer les paragraphes dans un contenu

par Didier Jodin,

Daniel : "Quel prof lambda connaît les... CSS ?"

Aucun, bien sûr. Mais le prof lambda ne connaît pas non plus les balises html. Et les utilisateurs pas plus. C'est pourtant très utile : ce que fait TinyMCE balaye le terrain, mais c'est très fréquemment qu'on doit aller dans le code html pour avoir exactement ce qu'on veut.

C'est pourquoi je disais que je cherchais à associer tout cela (ou n'importe quelle autre mise en forme un peu élaborée) à un nouvel élément dans tinyMCE. Les docs que j'avais lues me paraissaient confuses, parce que je n'avais pas vu l'excellent tutoriel concocté ici par Mary Cooch, qui n'oublie pas la valeur pédagogique de l'exemple !

Ajouter ou enlever des boutons, je connaissais déjà. Ça permet de rétablir des choses étrangement absentes de la configuration par défaut. Pourquoi avoir séparé ces trois là de leur copain  ? La famille est quand même plus sympa quand elle est réunie .

En revanche, je comprenais mal le cadre présent à la fin de Administration --> Plugins --> Editeurs de texte -->  Editeur TinyMCE --> Réglages généraux.
Les explications de Mary permettent de configurer d'autres mises en forme, en les combinant. On regrette quand même que la syntaxe soit si lourde, avec plein de ", plein de {, plein de [, tout cela s'imbriquant à l'infini, si bien que quand on ferme une accolade ou une parenthèse, on ne sait plus ce qu'elle ferme au juste. Même pour quelque chose de simple (texte gras et encadré, par exemple) c'est infernal. Sinon j'aurais donné la formule correspondant à ce post, sur les paragraphes et les images, pour mieux rester dans le sujet !

Une remarque : parmi les choses dont Moodle nous prive par défaut, il y a le menu déroulant "format", nécessaire pourtant si on veut mettre en place... des formats ! Trouver le nom des boutons disponibles dans TinyMCE est facile, mais les menus déroulants sont très peu documentés, même sur le site de l'éditeur, probablement parce qu'ils sont rarement ôtés...
Bref, le nom magique à ajouter est "styleselect".

P.S. : je ne renonce pas à associer un style CSS à un élément du menu déroulant, ce qui éviterait d'ouvrir html à chaque fois, mais ça s'annonce compliqué !

 

 

 

 

Moyenne des évaluations Utile (2)
En réponse à Didier Jodin

Re: Separer les paragraphes dans un contenu

par vouty -,

Bonjour,

A ce que je constate chacun explore d'autres possibilites suivant ses besoins; le mien est de finir un premier travail presentable. Donc je dois limiter mon perimetre et faire simple. Ensuite, sans doute apres avoir mieux compris la portee de tous ces posts,  je verrai comment ameliorer avec des outils plus sophitisques.

Travailler aussi avec Libre office : je n'ai jamais essaye , cela pourrait-etre simple et efficace. OptimOffice et Opale, j'ai brievement regarde mais il me manque un lien vers un exemple plus general que celui que j'ai trouve (http://scenari-platform.org/projects/opale/doc/moodleexport)

Balises HTML : la je suis sensible au sujet car, bien que ne connaissant que tres peu Moodle, je connais mes besoins. Un de ces besoins est d'avoir  , dans une page HTML Moodle (contenu d'une lecon par exemple) la possibilite d'avoir des balises sous formes d'icones (au lieu de texte). En fait, je voudrais retrouver dans tous mes contenus une navigation ayant les memes codes visuels intuitifs. J'ai essaye de trouver mais sans succes et peut-etre trop ambitieux pour moi actuellement, pas assez de temps.

Merci encore de partager votre experience, sans vous je serais encore qu'a la premiere marche de ce grand escalier menant a la connaissance de Moodle.

Bonne journee

 

 

Moyenne des évaluations  -