[Résolu] Présentation texte par analogie au texte préformaté du forum

Arbiel · Le 08/03/2022, à 22:39

Bonjour à tous

Je veux créer un fichier html que j'aimerais présenter d'une manière analogue aux interventions sur le forum. Il s'agirait d'une suite de blocs dans chacun desquels le texte serait composé de deux parties : un entête fixe et du texte disposant d'un ascenseur, comme le texte préformaté inclus entre les balises 'code'. J'aimerais savoir comment obtenir un tel résultat.

J'ai consulté le code html du forum dans lequel j'ai relevé que le texte en question est introduit par une succession de balises html div, pre et code, comme suit : '<div class="codebox"><pre class="vscroll"><code>'. Dans mon cas, il n'y a pas lieu d'utiliser la balise 'pre' car les lignes de mon texte sont introduites par des balises 'p'.

J'imagine que la présentation avec ascenseur découle de l'utilisation de la classe 'codebox de div et 'vscroll' de pre, dont la définition doit se trouver dans l'une des feuilles de style du forum, et éventuellement d'autres paramètres que je n'ai pas identifiés.

J'aimerais savoir

- comment je peux obtenir un tel résultat et plus particulièrement
- si c'est bien la classe 'codebox' qui définit la présentation des textes préformatés
- si je peux utiliser à mes fins personnelles la définition de ces classes 'codebox' et 'vscroll'
- si d'autres paramètres, et lesquels' sont utilisés dans la présentation de ces textes

Arbiel

Dernière modification par Arbiel (Le 09/03/2022, à 16:42)

StarAurryon · Le 08/03/2022, à 23:23

Salut Arbiel,

"un entête fixe et du texte disposant d'un ascenseur, comme le texte préformaté inclus entre les balises 'code'"

Je te conseille d'aller regarder ici pour la doc https://developer.mozilla.org/fr/docs/Web/CSS/overflow .

Pour faire simple tu définis une taille de ton élément fixe ou maximale en css et tu mets l'attribut

overflow-y: auto;

. La barre de défilement apparaîtra si tu as plus de contenu que la taille du conteneur.

Voili voilou

StarAurryon · Le 08/03/2022, à 23:26

Voici un exemple

<html>
  <style>
    body {
      background-color: rgb(229, 231, 235);
    }
    h1 {
      font-weight: 800;
    }
    
    .post {
      background-color: rgb(176, 192, 192);
      margin: 5px 5px 5px 5px;
    }
    
    .post-section {
      height: 100px;
      overflow-y: auto;
    }
  </style>
  <body>
    <article class="post">
      <header>
        <h1>Mon super titre</h1>
      </header>
      <section class="post-section">
        <p>J'aurai besoin d'aide ...</p>
      </section>
      <footer> Posté le 25 Janver 2005 par </footer>
    </article>
    <article class="post">
      <header>
        <h1>Wouah quel super thread</h1>
      </header>
      <section class="post-section">
        <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce felis sem, blandit quis posuere vitae, lobortis sed urna. Nulla vel enim diam. Morbi fringilla purus et nulla fringilla, sed pellentesque lorem imperdiet. Sed nisi nisl, varius vitae tincidunt non, laoreet eu urna. Nulla facilisi. Mauris ac hendrerit quam, sed porttitor dui. Curabitur sed faucibus leo, non mollis neque. Vestibulum ut nisi at libero elementum euismod. Suspendisse sit amet sollicitudin tellus.

Etiam sed mauris lacus. Sed ultricies cursus mauris sit amet interdum. Sed sed odio lorem. Vivamus auctor nisi vel arcu suscipit, quis rhoncus orci cursus. Aliquam finibus sit amet ipsum eu euismod. Aenean suscipit mollis venenatis. Quisque mattis risus et massa consectetur tristique a non dui. In at consectetur dui. Mauris faucibus ligula porttitor convallis suscipit. Nullam placerat laoreet turpis eget fermentum. Nunc a rutrum urna, eget finibus libero. Maecenas ornare mollis finibus. Mauris a tortor id mauris tristique aliquam. Ut et massa porta, suscipit lacus id, facilisis ipsum. Nunc rhoncus, felis sit amet laoreet suscipit, tortor mauris ultrices sem, nec dapibus mauris odio vel quam.

Etiam id pulvinar nunc, sed tristique dui. Integer lectus sapien, lacinia in rutrum id, tincidunt ac tortor. Aliquam erat volutpat. Aenean justo dui, suscipit lacinia lorem et, vulputate euismod neque. Sed efficitur iaculis consectetur. Etiam malesuada justo in blandit sollicitudin. Nullam consectetur, ipsum at semper dignissim, nunc nisi facilisis enim, quis facilisis turpis ipsum in purus. Nam faucibus magna non suscipit tincidunt. Quisque varius tincidunt ipsum, eget bibendum magna. Duis venenatis vestibulum accumsan. Pellentesque tristique placerat tellus at laoreet. Nulla neque dolor, hendrerit eu massa sed, rutrum lobortis purus. Donec malesuada sapien diam, sit amet tincidunt lacus vehicula at. Vestibulum feugiat tristique orci, ut finibus tellus cursus id. In dictum ex at arcu iaculis cursus. Curabitur consectetur, risus et viverra ultricies, ante nunc sollicitudin ante, in iaculis orci velit at magna.

Proin enim neque, sodales sed ligula ac, rhoncus congue quam. Vivamus feugiat neque sit amet dolor condimentum, eget porttitor nisl efficitur. Morbi venenatis lacinia tellus, et iaculis metus varius pellentesque. Integer ullamcorper risus urna, in suscipit eros auctor id. Mauris dapibus elementum justo et imperdiet. Phasellus efficitur, orci eget iaculis eleifend, enim diam auctor neque, at maximus libero purus et lorem. Integer at rutrum tellus. Curabitur massa lacus, fermentum ac nisi sit amet, consectetur laoreet risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tincidunt condimentum justo non ornare. Fusce ut turpis metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut leo dolor, pellentesque ullamcorper scelerisque vitae, luctus vitae ligula. Curabitur sodales lectus id tincidunt tincidunt. Curabitur eget ipsum dictum, commodo dolor ac, faucibus felis.

Duis vehicula nibh condimentum ex hendrerit, nec interdum lectus laoreet. Donec neque dui, mollis id dolor id, efficitur consequat turpis. Proin consequat nisi ipsum, id aliquam nunc euismod ut. In vel ultrices lacus. Morbi nisl arcu, mollis accumsan rutrum quis, ultrices sit amet ligula. Mauris tempus faucibus vehicula. Donec aliquam ex a ex convallis semper. Nulla sit amet leo quis tortor tristique auctor ac et urna. Praesent ornare, orci nec commodo luctus, dui velit scelerisque leo, ac euismod nunc lorem eget leo. Nam ut augue et mi lacinia tempor quis sit amet metus. Aliquam arcu dui, tempus ut laoreet sed, egestas eu urna. </p>
      </section>
      <footer> Posté le 25 Janver 2005 par </footer>
    </article>
  </body>
</html>

Watael · Le 08/03/2022, à 23:31

le <style> ne devrait-il pas être dans le <head> ?

StarAurryon · Le 09/03/2022, à 00:31

Si tu as raison. Tellement l'habitude de faire du React + Tailwind CSS qui te mange cette partie.

Arbiel · Le 09/03/2022, à 16:42

Bonjour StarAurryon

Je te remercie. Ton exemple correspond bien à ce que je cherche à faire. Il me faut maintenant me reporter à la page dont tu m'as donné la référence puis mettre cette solution en œuvre dans mon fichier.

Merci encore

Arbiel

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 08/03/2022, à 22:39

[Résolu] Présentation texte par analogie au texte préformaté du forum

#2 Le 08/03/2022, à 23:23

Re : [Résolu] Présentation texte par analogie au texte préformaté du forum

#3 Le 08/03/2022, à 23:26

Re : [Résolu] Présentation texte par analogie au texte préformaté du forum

#4 Le 08/03/2022, à 23:31

Re : [Résolu] Présentation texte par analogie au texte préformaté du forum

#5 Le 09/03/2022, à 00:31

Re : [Résolu] Présentation texte par analogie au texte préformaté du forum

#6 Le 09/03/2022, à 16:42

Re : [Résolu] Présentation texte par analogie au texte préformaté du forum

Pied de page des forums