how to insert a SCROLLING DIV into a table!

**orbitrobert** · 03-04-2008, 10:08 AM

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

**dtm32236** · 03-04-2008, 01:37 PM

to make an area scroll, set the width and height, then add

style="overflow:scroll;"

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

**ray326** · 03-04-2008, 02:00 PM

But the REAL fix is to get rid of the table. That's not tabular data.

**coothead** · 03-04-2008, 02:56 PM

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

**ray326** · 03-04-2008, 03:39 PM

I just know some old coot would come by and pick up that gauntlet I threw down.

**coothead** · 03-04-2008, 04:05 PM

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

**orbitrobert** · 03-05-2008, 10:10 AM

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

**dtm32236** · 03-05-2008, 11:31 AM

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.

**dragonfly7358** · 03-05-2008, 11:44 AM

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.

**ray326** · 03-05-2008, 08:32 PM

Check the books in my sig.

**orbitrobert** · 03-06-2008, 09:25 AM

thankyou dtm, dragonfly and ray for offering your insight and recommending resources. looking forward to expanding my mind. :0)

**Kimberlh** · 03-18-2008, 03:01 PM

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

**dragonfly7358** · 03-18-2008, 03:22 PM

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.

**Kimberlh** · 03-26-2008, 01:59 AM

Hello, I got <div style="width:xxxpx; height:xxxpx; overflow:scroll;">...</div> working to run my rss feed inside my page.

Thanks!
Kimberly

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

Thread Tools

Display

how to insert a SCROLLING DIV into a table!

Scrolling DIV in table - hello again!..

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions