scrolling div challenge leading to mental meltdown

orbitrobert

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

 
<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

drhowarddrfine

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.

drhowarddrfine

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.

drhowarddrfine

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]

scrolling div challenge leading to mental meltdown

Post your reply

Similar topics