www.webdeveloper.com
Results 1 to 14 of 14

Thread: how to insert a SCROLLING DIV into a table!

  1. #1
    Join Date
    Mar 2008
    Posts
    6

    how to insert a SCROLLING DIV into a table!

    hi there,

    i'm having a difficult time inserting a scrolling div into a table. i'm a graphic designer and want to use the scrolling div on the portfolio page of my site.
    i find that everything i've tried breaks up the table?! can anyone help! i'm starting to lose my marbles.

    the scrolling div needs to go into the large white area (to the right of the nav bar).

    here's the code.



    HTML Code:
    <html>
    <head>
    <title>Orbit-creative WEB Layout 04</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    -->
    </style>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Orbit-creative WEB Layout 04.psd) -->
    <table width="700" height="538" border="0" align="center" cellpadding="0" cellspacing="0" id="layouttable">
    <tr>
    <td colspan="5">
    <img alt="" width="700" height="60" style="background-color: #009900"></td>
    </tr>
    <tr>
    <td colspan="3">
    <img alt="" width="269" height="129" style="background-color: #009900"></td>
    <td width="373" height="424" rowspan="2" id="tdwhite"><br />
    
    
    <p>&nbsp;</p></td><td rowspan="2">
    <img alt="" width="58" height="424" style="background-color: #009900"></td>
    </tr>
    <tr>
    <td>
    <img alt="" width="55" height="295" style="background-color: #009900"></td>
    <td width="158" height="295" id="tdnavbar"><p align="center"><a href="#">ABOUT US</a></p>
    <p align="center"><a href="#">PORTFOLIO</a></p>
    <p align="center"><a href="#">TESTIMONIALS</a></p>
    <p align="center"><a href="#">USEFUL LINKS</a></p>
    <p align="center"><a href="#">CONTACT</a></p></td>
    <td>
    <img alt="" width="56" height="295" style="background-color: #009900"></td>
    </tr>
    <tr>
    <td colspan="5">
    <img alt="" width="700" height="54" style="background-color: #009900"></td>
    </tr>
    </table>
    <br>
    <div id="divcopyright">
    <div align="center">&copy;2008 orbit creative</div>
    </div>
    <!-- End ImageReady Slices -->
    </body>
    </html>



    i'm a photoshop veteran but a dreamweaver newbie. any help is greatly appreciated!

    thanks,
    Rob
    Last edited by WebJoel; 03-04-2008 at 03:18 PM. Reason: [html] tags for easier reading

  2. #2
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    to make an area scroll, set the width and height, then add

    style="overflow:scroll;"

    <div style="width:xxxpx; height:xxxpx; overflow:scroll;">...</div>

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    But the REAL fix is to get rid of the table. That's not tabular data.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there orbitrobert,

    and a warm welcome to these forums.

    As ray326 has pointed out tables are for tabular data.
    Of course, this does not provide a solution to your problem.
    So to get you started, have a look at this reworked example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Orbit-creative WEB Layout 04</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        background-color:#fff;
     }
    #container {
        width:700px;
        background-color:#090;
        margin:auto;
     }
    #header {
        height:60px;
     }
    #header_image {
        width:700px;
        height:60px;
        display:block;
        border:0;
     } 
    #left {
        width:269px;
        height:424px;
        float:left;
     } 
    #left_image_1 {
        width:269px;
        height:129px;
        display:block;
        border:0;
     }
    #left_image_2 {
        width:55px;
        height:295px;
        display:block;
        border:0;
        float:left;
     }
    #nav {
        width:158px;
        height:225px;
        padding:70px 0 0 0;
        margin:0;
        background-color:#fff;
        float:left;
        list-style-type:none;
     }
    #nav li {
        width:130px;
        margin:0 auto 16px auto;
     }
    #nav li a{
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:12px;
        color:#000;
     }
    #left_image_3 {
        width:56px;
        height:295px;
        display:block;
        border:0;
        float:left;
     }
    #center {
        width:333px;
        height:404px;
        padding:10px 20px;;
        background-color:#fff;
        float:left;
        overflow:auto;
     } 
    #center p {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:12px;
        text-align:justify;
     } 
    #right {
        width:58px;
        height:424px;
        float:left;
     }
    #right_image {
        width:58px;
        height:424px;
        display:block;
        border:0;
     }  
    #footer {
        height:54px;
        clear:both;
     }
    #footer_image {
        width:700px;
        height:54px;
        display:block;
        border:0;
     } 
    #divcopyright {
        padding:20px 0;
        background-color:#fff;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    
    <img id="header_image" src="" alt="">
    
    </div><!--end header-->
    
    <div id="left">
    
    <img id="left_image_1" src="" alt="">
    
    <img id="left_image_2" src="" alt="">
    
    <ul id="nav">
     <li><a href="#">ABOUT US</a></li>
     <li><a href="#">PORTFOLIO</a></li>
     <li><a href="#">TESTIMONIALS</a></li>
     <li><a href="#">USEFUL LINKS</a></li>
     <li><a href="#">CONTACT</a></li>
    </ul>
    
    <img id="left_image_3" src="" alt="">
    
    </div><!--end left-->
    
    <div id="center">
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. *** sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p>
    
    </div><!--end center-->
    
    <div id="right">
    
    <img id="right_image" src="" alt="">
    
    </div><!--end right-->
    
    <div id="footer">
    
    <img id="footer_image" src="" alt="">
    
    </div><!--end footer-->
    
    <div id="divcopyright">
    &copy;2008 orbit creative
    </div><!--end divcopyright-->
    
    </div><!--end container-->
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I just know some old coot would come by and pick up that gauntlet I threw down.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there ray326
    I just know some old coot would come by and pick up that gauntlet I threw down.
    Well, I believe in my case anyway, that...
    'The devil finds work for idle hands'
    ...so just to be on the safe side.....

    coothead

  7. #7
    Join Date
    Mar 2008
    Posts
    6

    Scrolling DIV in table - hello again!..

    hello everyone and a sincere thankyou to dtm, ray and esp. coothead for the code you wrote and the warm welcome!

    so - i'm hearing that tables are not so cool anymore. ok fine. i'll have to recalibrate my instruments and start fresh...

    here's my current challenge. i'm definitely more 'design' oriented than 'code' (but don't hold that against me) - so I've been making my webpage layout in photoshop then slicing in image-ready and then exporting the images and html to a folder which i then use to make my site in Dreamweaver. the problem with this i can now see, is that the html that gets exported is a table.

    (i've attached a PDF so you can see my current page layout)

    so...

    1. i wonder now how i should work? do i continue to 'slice' in image ready - and make notes of the pixel sizes of each individual slice - so that i can create appropriate sized 'containers' in DW. or perhaps there's some setting in PS/Image-Ready I don't know about - that does this for me? any tips and or feed back are greatly appreciated.

    and..

    2. I've found all the links that explain why i shouldn't be using tables in my layout very interesting (and a bit hard to read / knowing i've got to hit the books again!) - but can anyone recommend some excellent resources (book / or online) that explains how to code (or even better 'design') tableless layouts in dreamweaver CS3?

    thank-you in advance!
    Rob
    Attached Files Attached Files

  8. #8
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    can anyone recommend some excellent resources (book / or online) that explains how to code (or even better 'design') tableless layouts in dreamweaver CS3?
    You just gotta learn HTML and CSS.

    w3schools is a great place to start. Look at the top left - Learn HTML and Learn CSS.

    That should help a lot.

    As far as image slicing goes in photoshop - try to keep it to a minimum. CSS will allow you to set background colors and borders, etc and very often you can find a way around using an image.

    And don't use Photoshop's HTML for your page. Do it all hand-coded. I'll assume that you're referring to navigation HTML. Read those tutorials and you'll see how simple it is to do without Photoshop's code.

    As far as navigation goes, most people use unordered lists for this.

  9. #9
    Join Date
    Mar 2008
    Posts
    7
    Being a designer myself. I found switching from image ready and DW to CSS and HTML a bit daunting.

    It will take some time to master, but when you do it becomes much faster to build these sites.

    I would recommend getting the following:
    xamp - easy php / mysql windows server for testing, so you don't have to load files on the web till you work out bugs.

    edit plus - great text editor.

    The most important tip I can give you is learn XHTML 1.+ and use a valid doctype. This fixes (for most browsers) many of the frustrations you will have getting DIVs to work instead of tables. At first doing it with DIVs seems to take forever and will, to be honest, suck! But once you get it down you be creating mock ups like a pro and much faster than before.

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Check the books in my sig.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  11. #11
    Join Date
    Mar 2008
    Posts
    6
    thankyou dtm, dragonfly and ray for offering your insight and recommending resources. looking forward to expanding my mind. :0)

  12. #12
    Join Date
    Mar 2008
    Posts
    87
    Quote Originally Posted by dtm32236
    to make an area scroll, set the width and height, then add

    style="overflow:scroll;"

    <div style="width:xxxpx; height:xxxpx; overflow:scroll;">...</div>
    Hello, I am trying to get a table cell that is overflowing to scroll but I am can't find any answer on how to do that with getting into this CSS which I get very lost when it come to CSS. I have been moving all my new web sites to article content manager I like so I do not have to do that much coding or I can pay someone to change little things for me.

    I am an expert with Corel Draw but web page design I am limited to frontpage and I do know html codes. I have an old web site I design back when this was htmlgoodies and it only had html tutors offered and I can remember the first javascript tutor this site offered. I am just trimming the old site some and want to add an rss feed via feedburner that runs on main page inside a table cell. I do not like the cell size changing as the feed updates so .......

    Anyway, I am trying to make a scrolling table cell, any ideas how to do this with CSS?

    Thank you for your time
    Kimberly

  13. #13
    Join Date
    Mar 2008
    Posts
    7
    You would have to add a DIV or IFRAME inside the table to do this. TD does not support or allow scrolling. IFRAMES are not a good solution, neither is using tables for layout. But if you want to just get the job done. Pop an IFRAME in it.

  14. #14
    Join Date
    Mar 2008
    Posts
    87
    Hello, I got <div style="width:xxxpx; height:xxxpx; overflow:scroll;">...</div> working to run my rss feed inside my page.

    Thanks!
    Kimberly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles