Click to See Complete Forum and Search --> : How do I make text scroll behind irregular shaped border?


Arthur_2007
03-04-2007, 01:36 AM
I have a page that is supposed to look like the entrance to a cave. I want to have the text scroll inside the cave entrance, and when it meets the edges of the cave, I want the text to scroll behind it. I'm not interested in having a square border around the text, I want it irregular to match the mouth of the cave. How can I do this? Please see the attached image.

bathurst_guy
03-04-2007, 01:40 AM
Probably better to do in Flash with a mask. You could place a gif on top with the middle part transparent.

Arthur_2007
03-04-2007, 09:48 AM
Thanks for your reply, actaully Iwas hoping to do it without flash for search engine reasons. I'm unclear how I can have the text dissappear behind the irregular edges, if I'm using a three row table, top and bottom row being the cave top and cave bottom, middle row being the scrollable text area. The rows don't overlap each other. I need a way to assign a foreground and a background, the foreground being the cave graphic, the background being the scroll text.

WebJoel
03-04-2007, 04:57 PM
I have an idea! :D Gimme a few minutes...
back:

I started this, -see some issues arrising but you may get some inspiration or insight from this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.19em; margin:10px 6px}
img {margin-right: 25px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:16px; padding-top:20px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div style="position:relative; width:500px; height:500px; border:3px double silver;">
<img src="pic1.jpg" style="float:left; clear:left; width:500px; height:50px; border: 1px solid green; margin:0;" />
<img src="pic2.jpg" style="float:left; clear:left; width:160px; height:25px; border:1px solid green;" />
<img src="pic3.jpg" style="float:left; clear:left; width:140px; height:35px; border:1px solid green;" />
<img src="pic4.jpg" style="float:left; clear:left; width:110px; height:35px; border:1px solid green;" />
<img src="pic5.jpg" style="float:left; clear:left; width:85px; height:25px; border:1px solid green;" />
<img src="pic6.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic7.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic8.jpg" style="float:left; clear:left; width:50px; height:25px; border:1px solid green;" />
<img src="pic9.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic10.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic11.jpg" style="float:left; clear:left; width:60px; height:35px; border:1px solid green;" />
<img src="pic12.jpg" style="float:left; clear:left; width:75px; height:20px; border:1px solid green;" />
<img src="pic13.jpg" style="float:left; clear:left; width:135px; height:35px; border:1px solid green;" />
<img src="pic14.jpg" style="float:left; clear:left; width:195px; height:30px; border:1px solid green;" />
<img src="pic14.jpg" style="float:left; clear:left; width:245px; height:20px; border:1px solid green;" />


<h1>The Cave</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div>

</body>
</html>

Arthur_2007
03-04-2007, 05:01 PM
Hey Thanks for any help webjoel..this one had me stumped.

WebJoel
03-04-2007, 05:59 PM
I edited the code above: -do not need "position:absolute; left:0;" since we're floating the images anyway. -Saves some code.

Arthur_2007
03-04-2007, 06:10 PM
Ahhh! Very good! Thank you! Not the exact solution I had in mind, but this is better as the static image on the left will need to change across three pages.

Thanks webJoel!

Art

WebJoel
03-04-2007, 06:56 PM
Note that the images have not only "float:left;" but also "clear:left;". This is needed to clear the image-float or else there will be a virtual line-return (a 'gap') between every image.

You might be able to do something like this for the same effect on the right-hand edge too. I started doing that but kept getting it wrong somehow, -but I am sure that this can be done.

I also was thinking that the 'window frame' of left and right-floated image (forming roughly a circular 'window') could be "position:absolute;" and positioned directly over a "relative position;" DIV which contains text. It's scrollbar would be visible to the right of the float-over Absolute DIV.
Give the relative positioned "text" DIV a generous left & right padding to keep the text more-or-less 'away from the edges', and it would peek-thru the 'cave window'...

-hmm... I may have to experiment more with this! (I get someone else's idea and the creativity explodes! That is why web building is such a good thing for me).

Arthur_2007
03-04-2007, 07:00 PM
Thanks again..if you get another creative burst, don't hesitate to experiment more!

WebJoel
03-04-2007, 07:34 PM
-Having a mental block here.... cannot seem to recall how to make text 'scroll' when it exceeds the de~facto height of the container.... but here is what I mean (this took me about 45-mins to write so-far and I'm starting to get frustrated... time for a break & fresh look tomorrow and/or by others....)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.19em; margin:10px 6px}
img {margin-right: 25px; background-color:brown;}
img.right {margin:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin:16px 0 0 35px; padding-top:20px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>


<div style="position:relative; width:600px; margin:10px auto;">
<div style="position:absolute; left:-15px; top:25px; width:600px; height:500px; margin:-20px auto; z-index:1000; border:3px double silver;">
<img src="pic1.jpg" style="float:left; clear:left; width:598px; height:50px; border: 1px solid green; margin:0; " />

<img src="pic2.jpg" style="float:left; clear:left; width:160px; height:25px; border:1px solid green;" />
<img src="pic2.jpg" class="right" style="float:right; width:160px; height:25px; border:1px solid green;;" />

<img src="pic3.jpg" style="float:left; clear:left; width:130px; height:35px; border:1px solid green;" />
<img src="pic3.jpg" style="float:right; clear:right; width:140px; height:35px; margin:0; border:1px solid green;" />

<img src="pic4.jpg" style="float:left; clear:left; width:80px; height:35px; border:1px solid green;" />
<img src="pic4.jpg" style="float:right; clear:right; width:90px; height:35px; margin:0; border:1px solid green;" />

<img src="pic5.jpg" style="float:left; clear:left; width:70px; height:25px; border:1px solid green;" />
<img src="pic5.jpg" style="float:right; clear:right; width:65px; height:25px; margin:0; border:1px solid green;" />


<img src="pic6.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic6.jpg" style="float:right; clear:right; width:55px; height:35px; margin:0; border:1px solid green;" />

<img src="pic7.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic7.jpg" style="float:right; clear:right; width:40px; height:35px; margin:0; border:1px solid green;" />

<img src="pic8.jpg" style="float:left; clear:left; width:50px; height:25px; border:1px solid green;" />
<img src="pic8.jpg" style="float:right; clear:right; width:50px; height:25px; margin:0; border:1px solid green;" />

<img src="pic9.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic9.jpg" style="float:right; clear:right; width:55px; height:35px; margin:0; border:1px solid green;" />

<img src="pic10.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic10.jpg" style="float:right; clear:right; width:40px; height:35px; margin:0;border:1px solid green;" />

<img src="pic11.jpg" style="float:left; clear:left; width:60px; height:35px; border:1px solid green;" />
<img src="pic11.jpg" style="float:right; clear:right; width:60px; height:35px; margin:0; border:1px solid green;" />

<img src="pic12.jpg" style="float:left; clear:left; width:75px; height:20px; border:1px solid green;" />
<img src="pic12.jpg" style="float:right; clear:right; width:75px; height:20px; margin:0; border:1px solid green;" />

<img src="pic13.jpg" style="float:left; clear:left; width:135px; height:35px; border:1px solid green;" />
<img src="pic13.jpg" style="float:right; clear:right; width:135px; height:35px; margin:0; border:1px solid green;" />

<img src="pic14.jpg" style="float:left; clear:left; width:195px; height:30px; border:1px solid green;" />
<img src="pic14.jpg" style="float:right; clear:right; width:195px; height:30px; margin:0; border:1px solid green;" />

<img src="pic14.jpg" style="float:left; clear:left; width:245px; height:20px; border:1px solid green;" />
<img src="pic14.jpg" style="float:right; clear:right; width:245px; height:20px; margin:0; border:1px solid green;" />
</div>

<div style="position:relative; width:470px; height:200px; padding:120px 75px 1000px 60px; overflow-y:auto; border:3px double silver;">

<h1>The Cave</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

</div>
</div>


</body>
</html> 7:45PM is the last edit... I had some things not showing right on screen res under 1024... fixed that. Try this now.

Arthur_2007
03-04-2007, 07:49 PM
That is exactly what I'm looking for..yes, I see what you mean regarding the height problem. I'm slowly learning CSS but this is somewhat advanced for me..

WebJoel
03-05-2007, 05:10 PM
Got it fixed. By declaring an insanely short "height" for the text container and letting the padding 'stretch' the DIV, -and by adding an 'empty DIV' at the bottom to allow for text to scroll-up out of site, this now works. Validates (no errors or warnings), and looks 99% identical to IE and Firefox.
Now, -the difficult part... slicing up rock-face images to populate those floated images. (and re-sizing, if this isn't the size you want).

-Enjoy!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.19em; margin:10px 6px}
img {margin-right: 25px; background-color:brown;}
img.right {margin:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin:16px 0 0 35px; padding-top:20px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>


<div style="position:relative; width:600px; margin:10px auto;">
<div style="position:absolute; left:-15px; top:20px; width:600px; height:500px; margin:-20px auto; z-index:1000; border:3px double silver;">
<img src="pic1.jpg" style="float:left; clear:left; width:598px; height:50px; border: 1px solid green; margin:0; " />

<img src="pic2.jpg" style="float:left; clear:left; width:160px; height:25px; border:1px solid green;" />
<img src="pic2.jpg" class="right" style="float:right; width:160px; height:25px; border:1px solid green;;" />

<img src="pic3.jpg" style="float:left; clear:left; width:130px; height:35px; border:1px solid green;" />
<img src="pic3.jpg" style="float:right; clear:right; width:140px; height:35px; margin:0; border:1px solid green;" />

<img src="pic4.jpg" style="float:left; clear:left; width:80px; height:35px; border:1px solid green;" />
<img src="pic4.jpg" style="float:right; clear:right; width:90px; height:35px; margin:0; border:1px solid green;" />

<img src="pic5.jpg" style="float:left; clear:left; width:70px; height:25px; border:1px solid green;" />
<img src="pic5.jpg" style="float:right; clear:right; width:65px; height:25px; margin:0; border:1px solid green;" />


<img src="pic6.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic6.jpg" style="float:right; clear:right; width:55px; height:35px; margin:0; border:1px solid green;" />

<img src="pic7.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic7.jpg" style="float:right; clear:right; width:40px; height:35px; margin:0; border:1px solid green;" />

<img src="pic8.jpg" style="float:left; clear:left; width:50px; height:25px; border:1px solid green;" />
<img src="pic8.jpg" style="float:right; clear:right; width:50px; height:25px; margin:0; border:1px solid green;" />

<img src="pic9.jpg" style="float:left; clear:left; width:55px; height:35px; border:1px solid green;" />
<img src="pic9.jpg" style="float:right; clear:right; width:55px; height:35px; margin:0; border:1px solid green;" />

<img src="pic10.jpg" style="float:left; clear:left; width:40px; height:35px; border:1px solid green;" />
<img src="pic10.jpg" style="float:right; clear:right; width:40px; height:35px; margin:0;border:1px solid green;" />

<img src="pic11.jpg" style="float:left; clear:left; width:60px; height:35px; border:1px solid green;" />
<img src="pic11.jpg" style="float:right; clear:right; width:60px; height:35px; margin:0; border:1px solid green;" />

<img src="pic12.jpg" style="float:left; clear:left; width:75px; height:20px; border:1px solid green;" />
<img src="pic12.jpg" style="float:right; clear:right; width:75px; height:20px; margin:0; border:1px solid green;" />

<img src="pic13.jpg" style="float:left; clear:left; width:135px; height:35px; border:1px solid green;" />
<img src="pic13.jpg" style="float:right; clear:right; width:135px; height:35px; margin:0; border:1px solid green;" />

<img src="pic14.jpg" style="float:left; clear:left; width:195px; height:30px; border:1px solid green;" />
<img src="pic14.jpg" style="float:right; clear:right; width:195px; height:30px; margin:0; border:1px solid green;" />

<img src="pic14.jpg" style="float:left; clear:left; width:245px; height:20px; border:1px solid green;" />
<img src="pic14.jpg" style="float:right; clear:right; width:245px; height:20px; margin:0; border:1px solid green;" />
</div>

<div style="position:relative; width:470px; height:83px; padding:120px 75px 300px 60px; overflow:auto; border:3px double silver;">

<h1>The Cave</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<div style="height:150px; width:10px;"><!-- empty spacer --></div>
</div>
</div>

</body>
</html>

Arthur_2007
03-05-2007, 08:01 PM
WebJoel, fantastic! I'm going to play around with the images...I'll send you a link when I have everything plugged in. Muchos gracias!

WebJoel
03-06-2007, 09:06 AM
WebJoel, fantastic! I'm going to play around with the images...I'll send you a link when I have everything plugged in. Muchos gracias!
Hey what can I say, -I am proof that you do not have to be a farmer to be outstanding in your field. :D

Arthur_2007
03-06-2007, 10:14 AM
(insert canned laughter)

ooohhh boy..

:)