scrolling div challenge leading to mental meltdown

**drhowarddrfine** · Mar 4 '08, 05:23 PM

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** · Mar 4 '08, 05:34 PM

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="backgrou nd-color:#ddd;heig ht:100%;margin: 0;overflow:scro ll"> 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** · Mar 4 '08, 06:17 PM

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%;wid th:700px;margin :0 auto }
#banner { height:60px;bac kground-color:#090 }
#scrolling { height:100% }
#scrolling img { width:269px;hei ght:129px;float :left }
#scrolling p { height:400px;ov erflow:scroll }
#left-side { float:left }
#nav { position:relati ve;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="#">Portfo lio</a></li>
<li><a href="#">Testim onials</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

scrolling div challenge leading to mental meltdown

Comment

Comment

Comment