467,074 Members | 961 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

scrolling div challenge leading to mental meltdown

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 />
  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!

Mar 4 '08 #1
  • viewed: 1273
3 Replies
Expert 4TB
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:

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
Expert 4TB
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>

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
Expert 4TB
This isn't exactly what you had but it's close and it's just to make a point.
<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 }

<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>

<div id="scrolling">
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.

Mar 4 '08 #4

Post your reply

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

Similar topics

63 posts views Thread by pythonchallenge | last post: by
9 posts views Thread by Stuart | last post: by
6 posts views Thread by redeck | last post: by
15 posts views Thread by khaccountant@yahoo.com | last post: by
32 posts views Thread by Jon Paal | last post: by
13 posts views Thread by Tomasz Jastrzebski | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.