By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

scrolling div challenge leading to mental meltdown

P: 1
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.


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Orbit-creative WEB Layout 04</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link href="styles.css" rel="stylesheet" type="text/css">
  6. <style type="text/css">
  7. <!--
  8. -->
  9. </style>
  10. </head>
  11. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  12. <!-- ImageReady Slices (Orbit-creative WEB Layout 04.psd) -->
  13. <table width="700" height="538" border="0" align="center" cellpadding="0" cellspacing="0" id="layouttable">
  14. <tr>
  15.         <td colspan="5">
  16.     <img alt="" width="700" height="60" style="background-color: #009900"></td>
  17.   </tr>
  18.     <tr>
  19.         <td colspan="3">
  20.       <img alt="" width="269" height="129" style="background-color: #009900"></td>
  21.       <td width="373" height="424" rowspan="2" id="tdwhite"><br />
  22.  
  23.  
  24.       <p>&nbsp;</p></td><td rowspan="2">
  25.       <img alt="" width="58" height="424" style="background-color: #009900"></td>
  26.   </tr>
  27.     <tr>
  28.         <td>
  29.       <img alt="" width="55" height="295" style="background-color: #009900"></td>
  30.       <td width="158" height="295" id="tdnavbar"><p align="center"><a href="#">ABOUT US</a></p>
  31.           <p align="center"><a href="#">PORTFOLIO</a></p>
  32.         <p align="center"><a href="#">TESTIMONIALS</a></p>
  33.         <p align="center"><a href="#">USEFUL LINKS</a></p>
  34.       <p align="center"><a href="#">CONTACT</a></p></td>
  35. <td>
  36.       <img alt="" width="56" height="295" style="background-color: #009900"></td>
  37.   </tr>
  38.     <tr>
  39.         <td colspan="5">
  40.       <img alt="" width="700" height="54" style="background-color: #009900"></td>
  41.   </tr>
  42. </table>
  43. <br>
  44. <div id="divcopyright">
  45.   <div align="center">&copy;2008 orbit creative</div>
  46. </div>
  47. <!-- End ImageReady Slices -->
  48. </body>
  49. </html>



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

thanks,
Rob
Mar 4 '08 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
As a graphics designer, you should learn to use CSS and not tables for layout. You will appreciate the flexibility compared to the rigidity of tables. I'll show you an example when I have time.

Your page needs a doctype to keep Internet Explorer out of the 1990s. Put this at the top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Depending on the version of DW you have, and I notice you used ImageRead, too, it may lean toward IE and tables for layout. Both are bad things but I'll have a look. Like I said above, I'll try and find time to show you a table-less version of the same thing.
Mar 4 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
Through the power of CSS ;) I easily changed this to something I think you are looking for. Notice the only thing I added was inside the <p> in this, plus removing the <br>:
[HTML]<td width="373" height="424" rowspan="2" id="tdwhite">
<p style="background-color:#ddd;height:100%;margin:0;overflow:scroll">& nbsp;a</p>
</td>[/HTML]

Check back in a bit and, hopefully, I will redo the page and show you how it's done using CSS and no tables.
Mar 4 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
This isn't exactly what you had but it's close and it's just to make a point.
[HTML]<!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=utf-8">
<style type="text/css">
* {margin:0}
body { height:100%;width:700px;margin:0 auto }
#banner { height:60px;background-color:#090 }
#scrolling { height:100% }
#scrolling img { width:269px;height:129px;float:left }
#scrolling p { height:400px;overflow:scroll }
#left-side { float:left }
#nav { position:relative;top:2em;list-style-type:none }
</style>
</head>
<body>

<div id="banner"></div>

<div id="left-side">
<img src="1.png" 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="#">Useful Links</a></li>
</ul>
</div>

<div id="scrolling">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu tellus.
Vestibulum suscipit felis sit amet nibh. Etiam malesuada ornare ante. Proin nec lacus.
Donec ipsum lectus, sodales ac, volutpat at, congue sit amet, diam. Quisque porttitor
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur hendrerit
nonummy erat. Donec scelerisque varius orci. Donec tortor ligula, congue nec, luctus
a, condimentum eu, tellus. Vivamus posuere. Quisque semper dictum orci. Aenean et
ipsum non tortor condimentum molestie. Sed sit amet nulla. Praesent quam eros,
dignissim a, pellentesque nec, laoreet sed, urna. Aliquam pulvinar iaculis elit. Donec
placerat neque non sem. Donec nisi. Nulla ut elit.
</p>
</div>

</body>
</html>[/HTML]
Mar 4 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.