Balises pour defiler du texte dans html

Résolu
Bonjour
je voudrai s'il vous plait connaitre les BALISES qui permettent de faire defiler du texte du haut vers le bas ou de la droite vers la gauche dans html.
Je connais les balises <MARQUEE></MARQUEE> mais d'autres pour faire defiler mon texte du bas vers le haut.

CORDIALEMENT

37 réponses

Résumé de la discussion

Le défilement du texte en HTML et les balises associées, notamment MARQUEE, est examiné pour décrire comment faire défiler le contenu du haut vers le bas ou horizontalement. La solution la plus citée consiste à utiliser MARQUEE avec direction='up' pour un défilement vertical, en ajustant vitesse et police selon le rendu souhaité. D'autres réponses suggèrent CSS avec overflow:auto ou des scripts JavaScript pour simuler le défilement, et évoquent des remplacements modernes à MARQUEE adaptés aux navigateurs et aux mises en page. En cas de besoins modernes, les solutions basées sur CSS et les animations @keyframes privilégient une compatibilité cross-browser sans MARQUEE, adaptée aux défilements horizontal et vertical et aux mises en page réactives.

Bobot (l’IA à votre service)
  1. Contributeur
    Salut,

    Utilise la fonction direction="up", tu peux aussi paramètrer la vitesse, la taille, la police, enfin, tout quoi ;)

    @+
    1. Contributeur
      Allez hop, même un petit exemple :
      <marquee direction="up" scrollamount="2" height="50" bgcolor="#DDDDDD" width="150">
      <font face="Verdana" size="2">Salut copaaaaaaaaaaaain !!!</font>
      <font face="Trebuchet MS" size="3" color="#FF00FF">Comment tu va bien ?</font>
      </marquee>

      @+
    2. @Erdnaxbonjour,svp des que jai mis ce programme entre un TD la cellule cest deformee
      je ne sais pas comment faire
    3. @Erdnaxcommen tu fai jessaye ton truk mais sa marche pa i fo le mettre ou ?? jeessaye sur mon blog nn sur msn nn tu peu mieu explike teu plait ?
  2. Contributeur
    SALUT
    voila un exemple de scroll simple avec les commentaires , il y en as des tas d autres !!

    celui ci est une base mais tu peut le modifier

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1250">
        <meta name="generator" content="PSPad editor, www.pspad.com">
        <title>
        </title>
      </head>
      <body>
        <center>
          <h1>Marquee Replacement - Horizontal Scroll</h1>
          <table cellpadding=0 cellspacing=0 border=1>
            <tr>
              <td>
    <script language="javascript">
    //CONTENU DU SCROLL.
    var content='TU peut mettre;du <b>HTML</b> <a HREF="http://radservebeer.free.fr"><font color="red"><i>ici</i></font></a>. Note: tout contenu qui depasse la taille du  boxwidth passe sur une autre ligne.';
    var boxheight=45;          //BACKGROUND BOX HEIGHT EN PIXELS.
    var boxwidth=390;          //BACKGROUND BOX WIDTH EN PIXELS.
    var boxcolor="#FFF6e9";    //BACKGROUND BOX COULEUR.
    var speed=60;              //VITESSE DU SCROLL EN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
    var pixelstep=2;           //PIXELS "STEPS" PAR REPETITION.
    var goright=false;         //DE GAUCHE A DROITE=TRUE , DROITE A GAUCHE=FALSE
    var pauseOnmouseover=true; // "true" POUR STOPER LE SCROLL AU  MOUSEOVER, "false" POUR NE PAS STOPER.
    //** NE RIEN CHANGER EN DESSOUS **
    var outer,inner,ref,elementwidth;
    var w3c=(document.getElementById)?true:false;
    var ns4=(document.layers)?true:false;
    var ie4=(document.all && !w3c)?true:false;
    var ie5=(document.all && w3c)?true:false;
    var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
    var txt='';
    var goscroll=true;
    if(ns4){
    txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
    txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width="'+boxwidth+'" height="'+boxheight+'"></ilayer>';
    txt+='</td></tr></table>';
    txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width="'+boxwidth+'" height="'+boxheight+'" '+((pauseOnmouseover)? 'onmouseover="goscroll=false" onmouseout="goscroll=true"':'')+'>';
    txt+='<layer name="inner"  visibility="hidden" left="2" top="2">';
    txt+=content;
    txt+='</layer></layer>';
    }else{
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; visibility:visible; background-color:'+boxcolor+';" '+((pauseOnmouseover)? 'onmouseover="goscroll=false" onmouseout="goscroll=true"':'')+'></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden;">';
    txt+='<div id="inner"  style="position:absolute; visibility:hidden; left:2px; top:2px; overflow:hidden; cursor:default;" '+((pauseOnmouseover)? 'onmouseover="goscroll=false" onmouseout="goscroll=true"':'')+'>';
    txt+=content;
    txt+='</div></div>';
    }
    document.write(txt);
    txt=0;
    function getPageLeft(el){
    var x;
    if(ns4)return el.pageX;
    if(ie4||w3c){
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }}
    function getPageTop(el){
    var y;
    if(ns4)return el.pageY;
    if(ie4||w3c){
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }}
    function getElWidth(el){
    if(ns4)return (el.document.width)? el.document.width : el.clip.right-el.clip.left;
    else if(ie4||ie5)return (el.style.width)? el.style.width:el.clientWidth;
    else if(w3c)return (el.style.width)?parseInt(el.style.width):parseInt(el.offsetWidth);
    else return -1;
    }
    window.onresize=function(){
    if(ns4)setTimeout('history.go(0)', 400);
    else{
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }}
    function scrollbox(){
    if(goscroll){
    if(ns4){
    inner.left+=(goright)? pixelstep: -pixelstep;
    inner.clip.right=(boxwidth-inner.left-2>boxwidth)? boxwidth-2 : boxwidth-inner.left-2;
    inner.clip.left=-inner.left+2;
    if(goright){
    if(inner.left>boxwidth)inner.left=-elementwidth;
    }else{
    if(inner.left<-elementwidth)inner.left=boxwidth+2;
    }}else{
    inner.style.left=parseInt(inner.style.left)+((goright)? pixelstep: -pixelstep)+'px';
    if(goright){
    if(parseInt(inner.style.left)>boxwidth)inner.style.left=-elementwidth+'px';
    }else{
    if(parseInt(inner.style.left)<-elementwidth)inner.style.left=boxwidth+2+'px';
    }}}}
    window.onload=function(){
    ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
    outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
    inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
    elementwidth=getElWidth(inner);
    if(ns4){
    outer.clip.width=boxwidth;
    outer.clip.height=boxheight;
    outer.moveTo(getPageLeft(ref),getPageTop(ref));
    inner.left=(goright)? -elementwidth : boxwidth-2;
    inner.clip.width=0
    inner.clip.height=boxheight-4;
    outer.visibility="show";
    inner.visibility="show";
    }else{
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    inner.style.width=elementwidth+'px';
    inner.style.left=((goright)? -elementwidth : boxwidth-2)+'px';
    inner.style.visibility="visible";
    }
    setInterval('scrollbox()',speed);
    }
    </script></td>
            </tr>
          </table>
        </center>
        <br>
      </body>
    </html>
    1. peut etre avec css, et overflow:auto;
      Quel comportment veux tu ?
      1. Bonjour je voudrais faire deffile ce texte Cliquer sur les les images pour avoir le lien merc!
        de droite vers la gauche dans ma page index.html à l'infini.
        par avance merci
        Daniel
        ps je suis avec cs4
      2. @daniel81pour le lien avec image
        c'est simple fait ceci <A HREF="le nom de ta page.html"><IMG SRC="nom de l'image.jpg/gif" heigt="100" width="90"> </A>
    2. Contributeur
      Essaye de définir des styles css pour ton texte alors. Tu peux y placer une argument du style :

      margin-top:12pt;

      Cela devrait espaces un peu tout ça.

      @+
      1. Contributeur
        Salut,

        Travailles avec les pourventages, et non des valeurs fixes. C'est valable pour les frames, et aussi tableaux si tu en as etc etc.

        @+
        1. Re salut
          depuis le début de la création du site j'ai utilisé des pourcentages et pourtant G ce probléme.

          Sinon je vais tout revoir.
          Merci
          1. Salut j'ai le même probleme que Jim ! avec certains amis pourtant mon ecrn est de 17 pouces et mon pc aussi un ami de 19 pcs et il me dit qu'il à une deformation de certaines pages !
            voici mon url par avance merci
            Daniel
            https://f5uoe.pagesperso-orange.fr/ l
          2. <font color= green>
            <marquee behavior>"Bienvenue dans le Siteweb Ryad-Auto"</marquee behavior>
            </font>
        2. salut tous le monde
          j voudrait savoir comment bloqué du texte html dans un site ??

          merci d'avance de votre réponse !
          1. Bonjour et merci Timon1102 pour votre réponse.

            je voudrai une syntaxe pour faire defiler mon texte du bas vers le haut à l'interieur d'un TD
            1. REMERCI MAITRE Erdnax.
              désormais je m'adresserai à vous pour mes problémes.

              A TRES BIENTÔT
              1. Contributeur
                Merci, ça fait toujours plaisir !
            2. Bonjour Maître
              c'est Jim.
              Je fait defiler maintenant mon texte grace à vos informations.
              Cette fois ci je voudrai augmenter l'interligne de mon texte.
              J'ai un bloc de texte et les lignes sont un peu serrer à mon goût et je voudrai les espacer.
              ??? Comment augmenter l'interligne d'un bloc de texte?

              CORDIALEMENT
              1. Contributeur
                Alors là désolé, mais on ne peut rien y faire.

                En effet, cela dépend du parametrage et du navigateur du visiteur. Et il n'y a que ce dernier qui puisse y faire quelque chose, accepter ou pas.

                La seule chose que tu peux faire, c'est avertir le visiteur qu'il n'y a rien de dangereux sur ton site et qu'il peut autoriser tout ça.

                @+
                1. Re salut
                  le site n'est pas encore en ligne je suis entrain de le confectionner.
                  je travaille parfois au bureau parfois à la maison. Au bureau mon écran est plus grand que celui que j'ai à la maison.
                  Et je suis obligé à chaque fois de modifier les paramétrages de mon moniteur.
                  1. Re Salut Maître

                    Pour que les vidéos ou les films de mon site s'ouvrent trés rapidement sous quel format doit je l'enregistrer?
                    - avi
                    -wpl
                    -asx
                    -m3u
                    Je voudrai que le téléchargement soit rapide
                    Cordialement
                    1. utilise du flv (pour le convertisseur utilise free flv converter) :)
                  2. sur mon site je voudrais bien bloquer mes texte pour pas que l'on me les prennes !!

                    Jespère que cela ta aider a mieu comprendre !?
                    1. Contributeur
                      Re-salut,

                      Essaye de rajouter <br> à l'endroit ou tu veux espaces un peu tes paragraphes. Rajoutes-en si cela n'est pas encore suffisant ;)
                      1. Toc Toc
                        Avec les <br>
                        c'est autre chose.
                        J'ai justifié le texte et c'est un trés long texte, alors ce sera difficile de mettre des <br> à la fin de chaque phrase pour espacer...
                        Je pensais qu'il existe des balises qui augmentent l'espace entre les lignes d'un texte.
                        Comme dans WORD avec Interlignage (Simple, Double etc...)
                        MERCI ENCORE
                        1. Tu peux utiliser la commande <spacer> a la fin de chaque paragraphe
                          Exemple : "<br><SPACER><br><SPACER><br>" te donne un espace de deux lignes.
                          ciao
                      2. MERCI BEAUCOUP MAÎTRE
                        de jour en jour mes connaissances augmente grâce à vous.
                        Cordialement
                        1. Contributeur
                          Est-ce qu'on peut avoir l'adresse de ton site pour se rendre compte de ce qu'il se passe ?
                          1. Salut cher ami merci de votre reponse voici l'adresse de mon site
                            https://f5uoe.pagesperso-orange.fr/ l
                            puis je voudrais faire defiler un texte a la place de celui qui est devant les images !
                            Cliquer sur les images pour les liens merci !
                            mais je n'arrives pas à faire çà de droite vers la gauche
                            pouvez vous me donner un petit coup de main avec les codes
                            merci !
                            Daniel81
                          2. je avoir l'adresse de ton hébergeur STP mreci d'avance
                          3. daniel stp puis-je avoir l'adresse de ton hebergeur merci !!
                        • 1
                        • 2