14 Replies Latest reply on Jul 11, 2006 6:53 PM by Newsgroup_User

    code for scroll bar not working

    KatOlds
      I researched previous topics on scroll bars and implemented the following code in my nested table:

      <tr>
      <td colspan="4" rowspan="8" align="left" valign="top"><!-- InstanceBeginEditable name="textTable" -->
      <table border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
      <td height="307">
      <div style="overflow:scroll; height:250px; width:100px;"> <br>text goes here </div>
      </td>
      </tr>
      </table>
      <!-- InstanceEndEditable --></td>
      <td height="103"></td>
      </tr>

      My text does not not wrap, no scroll bar appears, the height and width doesn't match what was specified. In essence, it didn't work. I tried specifying a style class=scroll at the header and called it at the table, the row, the td to no avail. Help, please? Thanks in advance.

      Kathryn
        • 1. Re: code for scroll bar not working
          Level 7
          See if this helps:
          http://www.avenuedesigners.com/blog/articles.php?ref=20

          --
          Shane H
          shane@NOSPAMavenuedesigners.com
          http://www.avenuedesigners.com

          =============================================
          Proud GAWDS Member
          http://www.gawds.org/showmember.php?memberid=1495

          Delivering accessible websites to all ...
          =============================================


          "KatOlds" <webforumsuser@macromedia.com> wrote in message
          news:e8uvv5$b8v$1@forums.macromedia.com...
          >I researched previous topics on scroll bars and implemented the following
          >code
          > in my nested table:
          >
          > <tr>
          > <td colspan="4" rowspan="8" align="left" valign="top"><!--
          > InstanceBeginEditable name="textTable" -->
          > <table border="0" cellpadding="0" cellspacing="0">
          > <!--DWLayoutTable-->
          > <tr>
          > <td height="307">
          > <div style="overflow:scroll; height:250px; width:100px;">
          > <br>text goes here </div>
          > </td>
          > </tr>
          > </table>
          > <!-- InstanceEndEditable --></td>
          > <td height="103"></td>
          > </tr>
          >
          > My text does not not wrap, no scroll bar appears, the height and width
          > doesn't
          > match what was specified. In essence, it didn't work. I tried specifying a
          > style class=scroll at the header and called it at the table, the row, the
          > td to
          > no avail. Help, please? Thanks in advance.
          >
          > Kathryn
          >
          >


          • 2. Re: code for scroll bar not working
            Level 7
            It does create a scrollbar if you put a heap of text into it.. I just tested
            your code and it worked for me :)


            --
            Nadia - Adobe� Community Expert : Dreamweaver
            -------------------------------------------------
            http://www.DreamweaverResources.com - CSS Templates|Tutorials
            http://www.csstemplates.com.au
            -------------------------------------------------
            http://www.adobe.com/devnet/dreamweaver/css.html
            CSS Tutorials for Dreamweaver
            -------------------------------------------------


            "KatOlds" <webforumsuser@macromedia.com> wrote in message
            news:e8uvv5$b8v$1@forums.macromedia.com...
            >I researched previous topics on scroll bars and implemented the following
            >code
            > in my nested table:
            >
            > <tr>
            > <td colspan="4" rowspan="8" align="left" valign="top"><!--
            > InstanceBeginEditable name="textTable" -->
            > <table border="0" cellpadding="0" cellspacing="0">
            > <!--DWLayoutTable-->
            > <tr>
            > <td height="307">
            > <div style="overflow:scroll; height:250px; width:100px;">
            > <br>text goes here </div>
            > </td>
            > </tr>
            > </table>
            > <!-- InstanceEndEditable --></td>
            > <td height="103"></td>
            > </tr>
            >
            > My text does not not wrap, no scroll bar appears, the height and width
            > doesn't
            > match what was specified. In essence, it didn't work. I tried specifying a
            > style class=scroll at the header and called it at the table, the row, the
            > td to
            > no avail. Help, please? Thanks in advance.
            >
            > Kathryn
            >
            >


            • 3. Re: code for scroll bar not working
              Level 7
              Good point, Nadia.

              Hopefully she reads the article as it explains the content length needs to
              exceed the height of the DIV scroll class in order to any scrollbars to
              appear.

              HTH, take care.

              --
              Shane H
              shane@NOSPAMavenuedesigners.com
              http://www.avenuedesigners.com

              =============================================
              Proud GAWDS Member
              http://www.gawds.org/showmember.php?memberid=1495

              Delivering accessible websites to all ...
              =============================================


              "Nadia : **AdobeCommunityExpert**" <nadia@REMOVETHISperrelink.com.au> wrote
              in message news:e8v183$1c2$1@forums.macromedia.com...
              > It does create a scrollbar if you put a heap of text into it.. I just
              > tested your code and it worked for me :)
              >
              >
              > --
              > Nadia - Adobe� Community Expert : Dreamweaver
              > -------------------------------------------------
              > http://www.DreamweaverResources.com - CSS Templates|Tutorials
              > http://www.csstemplates.com.au
              > -------------------------------------------------
              > http://www.adobe.com/devnet/dreamweaver/css.html
              > CSS Tutorials for Dreamweaver
              > -------------------------------------------------
              >
              >
              > "KatOlds" <webforumsuser@macromedia.com> wrote in message
              > news:e8uvv5$b8v$1@forums.macromedia.com...
              >>I researched previous topics on scroll bars and implemented the following
              >>code
              >> in my nested table:
              >>
              >> <tr>
              >> <td colspan="4" rowspan="8" align="left" valign="top"><!--
              >> InstanceBeginEditable name="textTable" -->
              >> <table border="0" cellpadding="0" cellspacing="0">
              >> <!--DWLayoutTable-->
              >> <tr>
              >> <td height="307">
              >> <div style="overflow:scroll; height:250px;
              >> width:100px;">
              >> <br>text goes here </div>
              >> </td>
              >> </tr>
              >> </table>
              >> <!-- InstanceEndEditable --></td>
              >> <td height="103"></td>
              >> </tr>
              >>
              >> My text does not not wrap, no scroll bar appears, the height and width
              >> doesn't
              >> match what was specified. In essence, it didn't work. I tried specifying
              >> a
              >> style class=scroll at the header and called it at the table, the row, the
              >> td to
              >> no avail. Help, please? Thanks in advance.
              >>
              >> Kathryn
              >>
              >>
              >
              >


              • 4. Re: code for scroll bar not working
                KatOlds Level 1
                Nadia & Shane,

                Thanks. I did realize that you need excess text to make the scroll and I had put in a heap of text in the table and loaded it to my browser and it just flowed right down past the table. I tried this before my original posting. However, just to make sure I typed overflow:scroll and not overflow:auto. I tried applying the div tag to my template and it also did not work. Is there something else that I might be missing working with templates and nested tables? Thanks.
                Kat
                • 5. Re: code for scroll bar not working
                  Level 7
                  I put this together very quickly so it's a bit rough and ready :) Lots of
                  stylig needs to be done, but should give you an idea that things should work
                  as you expect. An outer table set at 100% width. Nest a 2 column table
                  inside that one. Left cell has the scrolling div, right cell has the
                  content area where I applied an editable region.

                  It all seems to work ok. Copy and paste the following code into a new
                  window and see if it works for you.

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns=" http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  <!-- TemplateBeginEditable name="doctitle" -->
                  <title>Untitled Document</title>
                  <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!--
                  TemplateEndEditable -->
                  </head>
                  <body>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0"
                  "style="border: 1px solid black;">
                  <tr>
                  <td><table width="600px" cellpadding="0" cellspacing="0">
                  <tr>
                  <td><div style="overflow:auto; height:250px; width:100px;
                  padding-left: 50px;">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.
                  Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada
                  libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras
                  faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in
                  condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat
                  iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum
                  orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices
                  commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget
                  erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula,
                  ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
                  <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque
                  tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus,
                  varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac
                  urna. </p>
                  </div></td>
                  <td width="100%" valign="top"><!-- TemplateBeginEditable
                  name="contentarea" -->
                  <p>Something goes here</p>
                  <p>I've place a black 1px border on the outer most table, which
                  is set at 100%. The div and content area are set inside a nested table. </p>
                  <p>you'll need to use css to add padding and margins etc., </p>
                  <p>and you want this to be the editable region of a template?
                  </p>
                  <p>I created this cell as the editable region </p>
                  <!-- TemplateEndEditable --></td>
                  </tr>
                  </table>
                  </td>
                  </tr>
                  </table>
                  </body>
                  </html>


                  --
                  Nadia
                  Adobe� Community Expert : Dreamweaver
                  -------------------------------------------------
                  http://www.DreamweaverResources.com - CSS Templates|Tutorials
                  http://www.csstemplates.com.au
                  -------------------------------------------------
                  http://www.perrelink.com.au - Web Dev
                  -------------------------------------------------
                  http://www.adobe.com/devnet/dreamweaver/css.html
                  CSS Tutorials for Dreamweaver
                  -------------------------------------------------


                  • 6. Re: code for scroll bar not working
                    KatOlds Level 1
                    Thanks, Nadia. I plugged it into a blank file and it worked in my browser. I will study my code and see where I went wrong. Thanks so much for your help!

                    Kathryn
                    • 7. Re: code for scroll bar not working
                      KatOlds Level 1
                      Nadia,
                      The scroll bar will be in the editable region. That is why I tried the div tag in the template and when that didn't work, I put it into the page itself. Will scroll bars work in an editable region? I put a single cell table in the editable region and have tried to make the info scroll. It refuses.

                      Kathryn
                      • 8. Re: code for scroll bar not working
                        Level 7

                        "KatOlds" <webforumsuser@macromedia.com> wrote in message
                        news:e8v73p$7ee$1@forums.macromedia.com...
                        > Nadia,
                        > The scroll bar will be in the editable region. That is why I tried the div
                        > tag
                        > in the template and when that didn't work, I put it into the page itself.
                        > Will
                        > scroll bars work in an editable region? I put a single cell table in the
                        > editable region and have tried to make the info scroll. It refuses.


                        Ah, editable region = you will change the what is defined in that area. So
                        the text in the scrollbar will change, but you want to have a scrollbar as
                        part of every page is that correct?

                        Nadia


                        • 9. Re: code for scroll bar not working
                          Level 7
                          Ok, have a go with this. I added a scroll div to the right hand cell. The
                          editable region is inside the scrolling div.....


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html xmlns=" http://www.w3.org/1999/xhtml">
                          <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                          <!-- TemplateBeginEditable name="doctitle" -->
                          <title>Untitled Document</title>
                          <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!--
                          TemplateEndEditable -->
                          </head>
                          <body>
                          <table width="100%" border="0" cellpadding="0" cellspacing="0"
                          "style="border: 1px solid black;">
                          <tr>
                          <td valign="top"><table width="780" cellpadding="0" cellspacing="0">
                          <tr>
                          <td width="70%" valign="top" "style: padding: 6px;"><p>Lorem ipsum dolor sit
                          amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
                          tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
                          purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
                          venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus
                          dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id
                          arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia
                          accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien.
                          Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies
                          ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere
                          odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue.
                          Nullam nunc.</p>
                          <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor,
                          sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius
                          nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna.
                          </p></td>
                          <td width="30%" valign="top"><div style="overflow:auto; height:250px;
                          width:100px; padding-left: 50px;"> <!-- TemplateBeginEditable
                          name="contentarea" -->
                          <p>Something goes here</p>
                          <p>The editable region is now this scrolling div. </p>
                          <p>The scroller will remain for every child page created from this template,
                          but you will be able to change the text inside, so you have different
                          content for every child page, if that's what you want </p>
                          <!-- TemplateEndEditable --></div></td>
                          </tr>
                          </table></td>
                          </tr>
                          </table>
                          </body>
                          </html>


                          --
                          Nadia
                          Adobe� Community Expert : Dreamweaver
                          -------------------------------------------------
                          http://www.DreamweaverResources.com - CSS Templates|Tutorials
                          http://www.csstemplates.com.au
                          -------------------------------------------------
                          http://www.perrelink.com.au - Web Dev
                          -------------------------------------------------
                          http://www.adobe.com/devnet/dreamweaver/css.html
                          CSS Tutorials for Dreamweaver
                          -------------------------------------------------


                          • 10. Re: code for scroll bar not working
                            KatOlds Level 1
                            yes, the template for each page will be as follows:

                            top row = header
                            second row = image and top nav bar
                            Third row = left hand column will have side nav and the text that changes with each page
                            last row = bottom nav

                            The table that holds the text will vary in content between each page. Some will have streaming audio, video or photos, others will have info. That is why it will be editable. I don't want long, long pages as this client can be quite wordy. That is why I need the scroll bar.

                            Kath

                            P.S. Why does typing in this forum seem like it bogs down? Is it just my computer? I can type a long long time and nothing shows up for quite a while.. Thanks again for your help, Nadia. I appreciate your willingness to wrok this out with me.
                            • 11. Re: code for scroll bar not working
                              KatOlds Level 1
                              Yes, Nadia - that worked when I plugged it in. I am revamping the template in code instead of design mode and will try it the way you have it. I will let you know how it goes. Ah yes, another long night. Ain't it fun? Thanks again!
                              • 12. Re: code for scroll bar not working
                                Level 7
                                > P.S. Why does typing in this forum seem like it bogs down? Is it just my
                                > computer? I can type a long long time and nothing shows up for quite a
                                > while..

                                Must be for web forum interface. Most of the answers you see on the forum,
                                come from people who use a news reader to read and post to the forum.....
                                I'd suggest you change over if you think you will be visiting us for a
                                while - much easier to read and follow---- actually sometimes when we on
                                the nntp side of the forum post answers, people at the web interface forum
                                don't even get to see the responses -- which gets a bit frustrating.

                                Pointing your newsreader to: news:macromedia.dreamweaver
                                should get you on the right side of the track :)

                                > Thanks again for your help, Nadia. I appreciate your willingness to wrok
                                > this
                                > out with me

                                No problems, glad it helps in some way.
                                PS: You may want to have a look at this example I have up as well:
                                http://dreamweaverresources.com/tutorials/scroller.html


                                Nadia






                                • 13. Re: code for scroll bar not working
                                  Level 7
                                  Nadia,
                                  I scratched the previous template and completely coded the new one without
                                  using Layout View (which, I just read is a big no-no because it messes up
                                  with your code). And guess what? It worked. I still have to tweak a little
                                  here and there but my scroll bar is there! I believe that it wasn't working
                                  before because I had done a lot in Layout Mode. I will never touch that
                                  little button again!

                                  Now, for a personal question (hope I don't get booted). I am a brand new
                                  single mom and home-schooling 3 of them, the other two have moved out.
                                  Everything I learned about DW and FW has been through tutorials and
                                  self-taught. Would it be wise to go to a tech school and go through their
                                  program for Web-Design? Or can I make it on my own through these forums and
                                  continue learning. I've been (slowly) working through a book PHP & MySQL Web
                                  Devpt by Luke Welling. My background has been some schooling in VB, HTML,
                                  and SQLServer plus reading all of CJ Dates Relational Databases books.

                                  Ideas? I do have a couple of contracts for some sites to build. One will
                                  have a database.

                                  Thanks again for all of your help!

                                  Kat






                                  "KatOlds" <webforumsuser@macromedia.com> wrote in message
                                  news:e8va0b$a90$1@forums.macromedia.com...
                                  > Yes, Nadia - that worked when I plugged it in. I am revamping the template
                                  > in
                                  > code instead of design mode and will try it the way you have it. I will
                                  > let you
                                  > know how it goes. Ah yes, another long night. Ain't it fun? Thanks again!
                                  >


                                  • 14. Re: code for scroll bar not working
                                    Level 7
                                    > Nadia,
                                    > will never touch that little button again!

                                    Good on you ! :)

                                    > Everything I learned about DW and FW has been through tutorials and
                                    > self-taught. Would it be wise to go to a tech school and go through their
                                    > program for Web-Design?

                                    I think you will find that most of the regulars that post here didn't attend
                                    any type of web dev college, (myself included). I learned everything I know
                                    by following forum for quite a few years, reading online tutorials, reading
                                    books and lots of practice!

                                    > I've been (slowly) working through a book PHP & MySQL Web Devpt by Luke
                                    > Welling. My background has been some schooling in VB, HTML, and SQLServer
                                    > plus reading all of CJ Dates Relational Databases books.

                                    this is good, lots of people want dynamic sites so this will come in useful
                                    for you.

                                    > Ideas? I do have a couple of contracts for some sites to build. One will
                                    > have a database.

                                    You may be interested in a forum specifically for owners of a web dev
                                    business quite a few of the regulars here post there as well.... You'd be
                                    more than welcome. news://forums.webdevbiz.net/public


                                    > Thanks again for all of your help!

                                    No problems at all, we all had to start somewhere and I wouldn't be where I
                                    am at now, if not for the people who helped me out early on. Hope to see
                                    you over at Pattys' forum sometime soon.


                                    --
                                    Nadia
                                    Adobe� Community Expert : Dreamweaver
                                    --------------------------------------------
                                    http://www.csstemplates.com.au - CSS Templates | Free Templates
                                    --------------------------------------------
                                    http://www.perrelink.com.au - Web Dev
                                    http://www.DreamweaverResources.com - Dropdown Menu Templates|Tutorials
                                    http://www.adobe.com/devnet/dreamweaver/css.html
                                    -------------------------------------------------