Mettre votre texte dans un ascenseur, dans un article

Pour éviter d'avoir des articles trop longs, il peut être utile de mettre certaines informations dans des ascenseurs. Le texte à mettre dans l'ascenseur doit être entouré d'un code HTML ; lire cet article pour savoir comment faire

1. Mettre du texte dans un ascenseur (Scrollbar)

Pour ne pas que votre article soit trop long, il peut être utile de placer une partie du texte dans un ascenseur, comme ci-dessus.


1.1 Code HTML

Le plus simple est de commencer par taper son texte "normalement", en édition basique, de choisir sa police, sa taille, sa couleur....

Une fois que votre texte est prêt, passer en mode HTML(Bouton HTML à gauche dans le menu de l'édition avancée sur Overblog).

Avant votre texte, ajouter :
<div style="height: 250px; width: 650px; overflow: auto;">

et après votre texte :
</div>


1.2 Paramétrages

Height représente la hauteur de votre ascenseur.
Width représente la largeur de l'ascenseur

  Attention : votre ascenseur n'apparaîtra que si le texte à l'intérieur "dépasse" de la taille définie.


1.3 Modifications ultérieures du texte.

Si vous avez besoin de corriger votre texte après l'avoir mis dans un ascenseur, il vous faut faire un Clic-droit pour retourner en mode édition et faire les modifications souihaitées. C'est un peu long et il est donc conseillé de corriger et mettre en forme le texte AVANT l'insertion dans l'ascenseur.

 

---

 

2. Exemple complet de code pour un texte dans un ascenseur

L'ascenseur en haut de cet article a le code suivant :

<span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 10pt;"><strong>
<div style="text-align: center;">
<div style="width: 300px; height: 50px; overflow: auto;">
<div style="text-align: left;"><span style="color: #ff6600;">Pour &eacute;viter d'avoir des articles trop longs, il peut &ecirc;tre utile de mettre certaines informations dans des ascenseurs. Le texte &agrave; mettre dans l'ascenseur doit &ecirc;tre entour&eacute; d'un code HTML ; lire cet article pour savoir comment faire</span></div>
 

---

Si vous avez besoin d'explications supplémentaires, déposez moi votre question en commentaire !
 

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des jeux * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[Belghiti]

Bonjour ou bonsoir
Je suis parvenu à mettre un scroll texte sur les pages de mon site web encore en construction.
Je vous remercie infiniment pour votre générosité.

[medical billing and coding]

Merci pour ce post! Ce tutoriel a été courte et au point, ce qui est la façon dont je préfère! Je perds la concentration quand il est trop long et commence à glisser sur! J'espère que vous continuez à fournir ces tutoriels.

[MATHI]

Bonjour, tout d'abor je vous remercie pour les astuces que vous nous proposez.


J'ai juste une petite question concernant l'unité de mesure pour la largeur et la hauteur de " l’ascenseur ", si
vous pouviez m'expliquez ? Merci beaucoup


 

[Aurelie]

Par défaut, c'est toujours en pixels. Pour info, mes articles font 600 pixels de largeurs.

[trikeur33]

affectivement je vois pas l'ascenseur!!!! je regarde ça de plus près merci , et bon week-end


trikeur33

[trikeur33]

bonjour je viens de trouver ton site  qui peu m'aider a mettre un ascenceur sur mon blog ,je pense avoir presque réussit!! mais le texte est trop large et l'ascenseur ne fonctionne pas ,
merci si tu peux me donner un conseil


 Amitié  blog (www.trikeur33.com )

[Aurelie]

le texte ne peut pas être trop large puisque l'ascenseur permet justement de le "mettre en forme" à la largeur voulue. par contre, c'est la largeur de l'ascenseur qui ne doit pas excéder celle de
l'endroit où tu le mets. Ajuste avec la valeur du "width" pour la alrgeyur et le "height" de la hauteur.


Sinon, pour vérifier que cela fonctionne, essaie avec moins de texte, vois tu l'ascenseur ?

[krystele]

Bonjour
je passe te souhaiter
une bonne journée
krystele


____________$$_________________$$
_____________$________________$$
_____________$$$_____________$$$
_____________$$$$$___$$____$$$$
______________$_$$$__$$$_$$$_$$
______________$_$$$$$$_$$$$$_$$
_________$$$__$$$$$_$_$$$_$$$$$_$$$
__________$$$$$$$$_$$_$_$$$$$$$$$$$
___________$$_$$$$$$__$__$$$$$$$$
$$$$$$$$$$$$$$__$$__$$$_$_$$$_$$$$$$$$$$$$$$
__$$$$$$_$$$_$$__$$$$$$$$$$__$$_$$$__$$$$$
______$$$$$$$$$$__$$_____$$__$$$$$$$$$$
_________$$$$$$$$$$$_____$$$$_$$$$$$
_______$$$$$______$$$$$$$$______$$$$$
______$$$$$$$$$$$__$$$$$$___$$$$$$$$$$
__________$$$$$$$__$____$$_$$$$$$$
_________$$_$$$_$_$__$$$_$$$$_$$$$$
________$$__$$$$$$_$$$$$$_$$$$$$$_$$
_______$$$$$$$_$$$$$$$$$$$$$$$$$$$$$$$
_____$$$$$_____$$$$$$$$$$$$$$$_____$$$$$
____$$_________$$___$__$$___$$________$$
____________________$$_$
_____________________$$$
_____________________$$
______________________$
________§§§§§§§§§§____$$
______§§§§§§§§§§§§§____$$$
_____§§§§§§§§§§§§§§§____§§§§
_____§§§§§§§§§§§§§§§___§§§§§§
_§§§§_§§§§§§§§§§§§§§§___§§§§
§§§§§§_§§§§§§§§§§§§§§___§§§
_§§§§____§§§§§§§§§§§___§§§§
__§§_________§§§§§____§§§§
_§§________§§§§§§§§§§§§§§
_________§§§§§§§§§§§§§§§
_______§§§§§§§§§§§§§§§
______§§§§§§§§§§§§§§
_____§§§§__§§§§§§§§§
____§§§§___§§§§§§§§§
___§§§§____§§§§§§§§§
___§§§____§§§§§§§§§§
___§§§__§§§§§§§§§§§§§§
___§§§§§§§§§§§§§§§§§§§§§
__§§§§§§§§§§§§§§§§§§§§§§§§
__§§§§§§§§§§§§§§§§§§§§§§§§§
___§§§§§§§§§§§§§§§§§§§§§§§
_______§§§§§§___§§§§§
________§§§§§___§§§§
________§§§§§__§§§§
_______§§§§§§_§§§§§
______§§§§§§___§§§§
_____§§§§§§_____§§§§
_____§§§§§
_____§§§§
_____§§§
____§§§§
___§§§§§
____§§§§
_____§§§§