CODEWITHSUNDEEP
javascripthtmlcss
nard marod
nard marod

Reputation: 33

HTML CSS Scrolling text one by one

How i can scroll text one by one without out from the box and make it work in chrome and firefox.

<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
    <marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();"
 OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">
 
    <ul id="list" >
   
<li id="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
<li id="2">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>

</ul>
    </marquee>
    </div>

Upvotes: 0

Views: 1780

Answers (1)

Nikhil Kinkar
Nikhil Kinkar

Reputation: 781

If I got you question correctly, you are trying to move one <li> at a time, so you have given the wrapper specific height of 80px, just add margin-bottom:80px to each <li> element, that will do it.

<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
  <marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();" OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">

    <ul id="list">

      <li id="1" style="margin-bottom:80px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
      <li id="2" style="margin-bottom:80px;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>

    </ul>
  </marquee>
</div>

Upvotes: 1

Related Questions