1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

HTML How to create a scrolling textbox?

Discussion in 'Web Development' started by Clutch Cargo, Jun 2, 2008.

  1. Clutch Cargo

    Clutch Cargo New Member

    Ok, been studying for awhile and using the Music store template as my sample template to work off from. If you look at my attached screenshot I have cleared out one of the 'text boxes' on the left side (excuse me as I am still learning proper website lingo).

    I wish to make this box a text box that scrolls when if reaches longer than its define length. But even if I edit the height dimensions (note CSS Properties to the left of the box), as I continue to type text the box continues to lengthen? Though the screenshot does not show I had the Height and Max-Height the same thinking that would lock-in the dimension.

    Can I stop this and have a scroll bar? What am I doing incorrect?

    Any help would be appreciated.
     

    Attached Files:

    Clutch Cargo, Jun 2, 2008
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    something like this?
    HTML:
     
<div style="width: 190px;height: 250px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
<p>text here! text here! text here! text here!</p>
</div>
     
    ishkey, Jun 2, 2008
    #2
  3. Clutch Cargo

    Clutch Cargo New Member

    Hey ishkey,

    Thx for such a quick reply. I tried just dropping in your code to replae the 'style that was already there. No effect.... text box still grows. I noticed this part of your code is underlined in red:

    -moz-scrollbars-vertical;overflow-y:auto

    When I move my mouse over on it I get the following error message:

    "This property value is marked invalid because it is not supported by the current schema" :eek:

    What dat mean?!?
     
    Clutch Cargo, Jun 2, 2008
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    did you drop the code in the html page in between the body tags, in the area of where you want the box?
    This property value is marked invalid because it is not supported by the current schema = microsoft speak for the program did not like it.
     
    ishkey, Jun 2, 2008
    #4
  5. Clutch Cargo

    Clutch Cargo New Member

    As far as I can see I have it in between the <body> tags. Heres the code:

    <body>

    <div id="outer">
    <div id="wrapper">
    <div id="header">
    <h1><font size="6">milehigh</font><font size="6"> productions</font></h1>
    <p><i>Just some 'tinkering' in my little workshop for Microsoft Flight Simulator
    2004 &amp; FSX</i></p>
    </div>
    <div id="nav" style="left: 0px; top: 0px">
    <div id="head" style="visibility: hidden; position: absolute; left: -2px; top: 2px"></div>
    <div id="head-pip" style="visibility: hidden"></div>
    <ul>
    <li id="m1"><a href="http://www.freewebsitetemplates.com">About
    SimWest </a></li>
    <li id="m2"><a href="http://www.freewebsitetemplates.com">
    Airports &amp; Add-ons</a></li>
    <li id="m3"><a href="http://www.freewebsitetemplates.com">
    Freebies</a></li>
    <li id="m4"><a href="http://www.freewebsitetemplates.com">
    Screenshot Gallery</a></li>
    <li id="m5"><a href="http://www.freewebsitetemplates.com">
    Flightsim Videos</a></li>
    <li id="m6"><a href="http://www.freewebsitetemplates.com">Contact
    Clutch</a></li>
    </ul>
    <div id="search">
    <h2><font size="4">Visitors who have joined the 'MileHigh' club:</font></h2>
    <form action="http://www.freewebsitetemplates.com/">
    <input type="text" class="text" name="q" value="" id="q" /> <input type="submit" name="submit" value="Go &gt; &gt;" id="submit" class="submit" />
    </form>
    &nbsp; Read<a href="http://www.freewebsitetemplates.com">Our Guestbook</a> |
    Sign<a href="http://www.freewebsitetemplates.com">our Guestbook</a>
    </div>
    </div>
    <div id="body">
    <div id="body-inner">
    <div id="body-left" style="width: 190px;height: 250px; overflow:-moz-scrollbars-vertical;overflow-y:auto;">
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p>text here! text here! text here! text here!</p>
    <p> Enter the 9Dragons! (What else, ha!) So time to knock of
    the cobwebs of that old MD-11 or DC-10-30. Maybe a 747-200
    is more your style. Well whatever 'heavy' is your flavor
    time to get your practicing in as you will be taking on the
    infamous IGS 13 'Checkerboard Approach' not only in front of
    Hong Kong ATC and fellow sim pilots but with 100's of
    anticipated 'plane spotters' from around the world watching
    to see if you can 'shoot the IGS'. And to add a little more
    drama to your flight you will be on real-world Hong Kong
    television as they will be recording this for a local news
    story celebrating the event. So get practicing!

    More information can be found at www.avsim.com and at
    www.cathaypacificvirtual.com for all the particulars and
    flight assignments. So even if you don't fly the big birds
    should be a heck of a lot of fun watching them attempt the
    landing so get signed up at AVSIM an join in as a plane
    spotter - a first for a VATSIM Official Fly-In..<br />
    Enter the 9Dragons! (What else, ha!) So time to knock of the
    cobwebs of that old MD-11 or DC-10-30. Maybe a 747-200 is
    more your style. Well whatever 'heavy' is your flavor time
    to get your practicing in as you will be taking on the
    infamous IGS 13 'Checkerboard Approach' not only in front of
    Hong Kong ATC and fellow sim pilots but with 100's of
    anticipated 'plane spotters' from around the world watching
    to see if you can 'shoot the IGS'. And to add a little more
    drama to your flight you will be on real-world Hong Kong
    television as they will be recording this for a local news
    story celebrating the event. So get practicing!<br />
    More information can be found at www.avsim.com and at
    www.cathaypacificvirtual.com for all the particulars and
    flight assignments. So even if you don't fly the big birds
    should be a heck of a lot of fun watching them attempt the
    landing so get signed up at AVSIM an join in as a plane
    spotter - a first for a VATSIM Official Fly-In..
    </p><br />
    </div>


    </div>
    <div id="body-right">
    <h2><font size="5">Features....</font></h2>
    <div class="box" style="width: 257px; height: 152px; margin-left: 0">
    <a href="../MileHigh%20Productions/images/03_airman%20-%20Philippine%20Flight%20Sim.jpg">
    <img src="../MileHigh%20Productions/images/9DBannerAES6%20-%20red%20background.jpg" width="327" height="86" alt="Pic 1" class="left" /></a>
    <p>9Dragons</p>
    <div class="btns">
    <a href="http://www.freewebsitetemplates.com"><span>Listen</span></a>
    <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
    </div>
    <div class="clear">
    </div>
    </div>
    <div class="box">
    <img src="../FDSFX%20Project/FDSFXPNL.gif" width="163" height="132" alt="Pic 2" class="left" />
    <p>FlightDesk SFX Pro.&nbsp; An oldie but a goodie.</p>
    <p>Want realistic flightdeck announcements of the
    flightcrew?&nbsp; Then check this out.&nbsp; Watch the
    video on how it works.&nbsp; </p>
    <p>And the best part...&nbsp; it's FREE!</p>
    <div class="btns">
    <a href="http://www.freewebsitetemplates.com"><span>sten</span></a>
    <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
    </div>
    <div class="clear">
    </div>
    </div>
    <div class="box">
    <img src="../../Documents%20and%20Settings/Clutch/My%20Documents/My%20Pictures/9D%20screenshots%20from%20simmers/Fly-By-Wire%203.jpg" width="230" height="128" alt="Pic 3" class="left" />
    <p>Our New Screenshot Gallery is Open!&nbsp; Check out
    the 'Plane Spotters' gallery.</p>
    <div class="btns">
    <a href="http://www.freewebsitetemplates.com"><span>Listen</span></a>
    <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
    </div>
    <div class="clear">
    </div>
    </div>

    </div>
    </div>
    <div id="copyright">
    <div id="copyright-left">
    Copyright &copy; 2006,www.mediamajic.com,all right reserved
    </div>
    </div>
    <div class="clear">&nbsp;</div>
    </div>
    </div>
    </div>

    </body>
    </html>


    And here is what is looks like. I have been using the split screen mode in Expression so I can see and place things in their proper location.

    I added extra text filler to see if it would overflow or turn into a scroll but it just kept growing. Appreciate the one-on-one here ;)
     

    Attached Files:

    Clutch Cargo, Jun 2, 2008
    #5
  6. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    here is what it looks like in my software. question - is this what you were looking for?
     

    Attached Files:

    ishkey, Jun 2, 2008
    #6
  7. Clutch Cargo

    Clutch Cargo New Member

    ha! Exactomundo! So am I to gather in design view it will not show the scroller but the text will just roll on and on? I do see it correctly though in "browser" view for both IE and Firefox! :p
     
    Clutch Cargo, Jun 2, 2008
    #7
  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Want a better code? I took the orig index page from the template so you can see it. This will give you automatic scrolling upwards. The new code starts after ,<div id="topic-pic">

    HTML:
     
<body>
 
<div id="outer">
<div id="wrapper">
<div id="header">
<h1>Musicmania</h1>
<p>Online Music Store</p>
</div>
<div id="nav">
<div id="head"></div>
<div id="head-pip"></div>
<ul>
<li id="m1"><a href="http://www.freewebsitetemplates.com">Latest News</a></li>
<li id="m2"><a href="http://www.freewebsitetemplates.com">Music</a></li>
<li id="m3"><a href="http://www.freewebsitetemplates.com">About</a></li>
<li id="m4"><a href="http://www.freewebsitetemplates.com">Visuals</a></li>
<li id="m5"><a href="http://www.freewebsitetemplates.com">Online Stores</a></li>
<li id="m6"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
</ul>
<div id="search">
<h2>Search Music Online</h2>
<form action="http://www.freewebsitetemplates.com/">
<input type="text" class="text" name="q" value="" id="q" /> <input type="submit" name="submit" value="Go &gt; &gt;" id="submit" class="submit" />
</form>
<a href="http://www.freewebsitetemplates.com">Advanced Search</a> | <a href="http://www.freewebsitetemplates.com">Search Tips</a>
</div>
</div>
<div id="body">
<div id="body-inner">
<div id="body-left">
<div id="topic-pic">
<div align="left"> <marquee bgcolor="#FFF9DA" scrollamount="2" 
direction="up" loop="true" width="100%"> <center> 
<font color="BLACK" size="+1"><p>Enter the 9Dragons! (What else, ha!) So time to knock of 
the cobwebs of that old MD-11 or DC-10-30. Maybe a 747-200 
is more your style. Well whatever 'heavy' is your flavor 
time to get your practicing in as you will be taking on the 
infamous IGS 13 'Checkerboard Approach' not only in front of 
Hong Kong ATC and fellow sim pilots but with 100's of 
anticipated 'plane spotters' from around the world watching 
to see if you can 'shoot the IGS'. And to add a little more 
drama to your flight you will be on real-world Hong Kong 
television as they will be recording this for a local news 
story celebrating the event. So get practicing!</p><p><br/>
 
More information can be found at www.avsim.com and at 
www.cathaypacificvirtual.com for all the particulars and 
flight assignments. So even if you don't fly the big birds 
should be a heck of a lot of fun watching them attempt the 
landing so get signed up at AVSIM an join in as a plane 
spotter - a first for a VATSIM Official Fly-In..</p><p><br />
Enter the 9Dragons! (What else, ha!) So time to knock of the 
cobwebs of that old MD-11 or DC-10-30. Maybe a 747-200 is 
more your style. Well whatever 'heavy' is your flavor time 
to get your practicing in as you will be taking on the 
infamous IGS 13 'Checkerboard Approach' not only in front of 
Hong Kong ATC and fellow sim pilots but with 100's of 
anticipated 'plane spotters' from around the world watching 
to see if you can 'shoot the IGS'. And to add a little more 
drama to your flight you will be on real-world Hong Kong 
television as they will be recording this for a local news 
story celebrating the event. So get practicing!</p><p><br />
More information can be found at www.avsim.com and at 
www.cathaypacificvirtual.com for all the particulars and 
flight assignments. So even if you don't fly the big birds 
should be a heck of a lot of fun watching them attempt the 
landing so get signed up at AVSIM an join in as a plane 
spotter - a first for a VATSIM Official Fly-In..
</p>
</font> </center> </marquee></div>
<!-- <img src="images/pic_1.jpg" width="259" height="199" alt="Pic 1" /> -->
</div>
<h2>Dietary nutrients</h2>
     
    ishkey, Jun 2, 2008
    #8
  9. Clutch Cargo

    Clutch Cargo New Member

    Hey, thx so much. I will play with that code tomorrow.
     
    Clutch Cargo, Jun 2, 2008
    #9
  10. Sakari

    Sakari New Member

    thanks

    Hi


    I am a beginner in HTML and i also needed that type of new stuff for putting impression on my teachers. Thanks to all. This is a great information and i will use it for my academic projects.

    thanks
     
    Sakari, Aug 21, 2008
    #10