# quick question regarding scrolling text box



## smythro (Jul 13, 2006)

I currently have a site that I've built mostly in photoshop and frontpage. 
The problem I'm having is that on the main image I have only a 4" X 6" area that I can insert text in. I'm finding that not enough room. How can make a scrolling box in that predetermined size? I have dreamweaver MX (not real sure how to use it) I also have front page (which I am more familiar with). 

Thanks in advance

smythro


----------



## DJ-Zep (Mar 11, 2006)

If you mean a text area:

```
<textarea name="Name" rows="5" cols="20">Text Here</textarea>
```
Or maybe an iframe?

```
<iframe src="page url" height="height here" width="width here" name="name here"></iframe>
```
I'm not quite sure I understand what exactly you want done.


----------



## smythro (Jul 13, 2006)

*Thanks for the reply, here's an example*

Thanks for taking a minute. Here's a link to what I'm talking about:

http://www.trutekservices.com/acf/bonnevilleracing.html

The area I'm refering too is the area that has the content for the bonneville racing section. I need to add more content but do not have the room within the box. How can I add scroll bar to the right of the content so I could add more information? Or is the last thread you posted the answer? Thanks again


----------



## DJ-Zep (Mar 11, 2006)

You need to place an iframe over the text. Give me a minute, I'll code it all out for you.


----------



## smythro (Jul 13, 2006)

*Great!!*

Thats awesome thanks. I'll also learn how to do add one of these. Do you suggest hand coding it or is there an option in frontpage or dream weaver to do this?


----------



## DJ-Zep (Mar 11, 2006)

I attached everything. You'll have to redo your links. I'm not exactly sure how you cut your button images so you might have to redo the roller effects.

For content, just make a new page with this format:

```
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<style type="text/css">
body {
          background: transparent;
}

div {
          font-family: Verdana;
          font-size: 12px;
          color: #FFFFFF;
}
</style>
</head>

<body>
<div align="center">
Text goes here.
</div>
</body>
</html>
```
To link the buttons to the iframe (a must do!):

```
<a href="page.html" target="MainContent"><img src="" alt=""></a>
```
Anything else, just post a reply.


----------



## smythro (Jul 13, 2006)

*Dude! that's perfect!*

thanks so much man!!!

I just played with it quick and it looks perfect. 
I'll play with it more later and work on the links, etc. 
I'll repost with any more questions. Thanks again

smythro


----------



## DJ-Zep (Mar 11, 2006)

No problem. :wink:

I also noticed your picture quality. You might want to save pictures as .PNG's if you don't have photoshop.


----------



## smythro (Jul 13, 2006)

*still working on it..*

Hey Dj-Zep, 

Thanks for your help with the iframe. I had trouble creating roll-overs and links with the one you sent me. So I've tried creating the iframe through frontpage..but I can get the frame to look as good as it did in the one you created. Would you mind looking at the code to tell me what you think. The first problem is that I can't seem to make the iframe transparent. Next it does not seem size properly. Thanks for taking a look. 

smythro


----------



## smythro (Jul 13, 2006)

*sorry, don't know why the zip did not post*

I'll try it again


----------



## v-six (Sep 12, 2004)

Sorry I didn't catch this one before...

smythro,

Do you know anything about CSS? Do you have the time/patience to learn a bit? You should be using a div with overflow set to _auto_ for a scrolling box. It gives you much more control. Using iframes is like sending your kids to Michael Jacksons house... it's just something you just shouldn't do anymore.


----------



## smythro (Jul 13, 2006)

*I reallt don't, but...*

I am willing to take the time to learn it. Is it something I can do with FrontPage? I also have Dreamweaver. Do you have a link to any tutorials?
Thanks


----------



## v-six (Sep 12, 2004)

It's pretty easy to do with with Dreamweaver. I'm off to work now, but give me 24 hours and I'll make a quick tutorial for you.


----------



## smythro (Jul 13, 2006)

*that great*

Thanks alot, in the mean time I'll dig around in the dream weaver help files.


----------



## v-six (Sep 12, 2004)

Ok, so I worked 13 hours today and didn't get around to a tutorial. :sigh: Give me 'til the weekend and I'll have more time. Till then, get familiar with CSS and how to implement it in Dreamweaver.

Give this a quick look:
http://www.adobetutorialz.com/articles/742/1/Introduction-to-CSS-Positioning-in-Dreamweaver-MX-2004

Also, if you're interested I found this to be a good book to learn Dreamweaver on. There's an edition for version 8 as well...
http://www.adobetutorialz.com/articles/742/1/Introduction-to-CSS-Positioning-in-Dreamweaver-MX-2004


----------



## v-six (Sep 12, 2004)

Sorry about the typo, here's the link to the book

http://www.amazon.com/gp/product/05...024475/ref=sr_1_2/102-4714765-2568112?ie=UTF8


----------



## smythro (Jul 13, 2006)

*thanks man,*

I'm working through the tutorials. There seems to be a few key points that I'm missing that tie everything togeather. I see how to create the CSS but that it seems to be a template. I'll keep working at it. 
Thanks Though


----------



## v-six (Sep 12, 2004)

Ok, here's the 101 on using css in dreamweaver to create scrollbars. First try it in a blank html, then when you've got it, try on your site.

First, make sure your css styles panel is open (window > css styles)

Then, in the css styles panel, click the icon with a blue plus (New css style)

name it _#practice_ for now. Select the _Advanced_ option.

For now, you want to define in _this document only_.

You'll get a new menu with sub-menu's in the left column, and options in the right.

Click on the positioning tab at the left.

This is where we format the size/position of the div that you're creating.

under _type_ select _relative_. This will be the most intuitive option for someone that isn't used to css.

Set the width and height to your desired specs. Set overflow to _auto_. This is what gives you scrollbars. Keep in mind that in most browsers the scrollbar is included in the width of the div.

click ok

Click your cursor in the dreamweaver body where you want to insert the new div. 

Go to insert>layout objects>div tag

Under 'ID' you should see the div you just created. Select it.

For 'Insert' you want _at insertion point_ (for now).

Click ok.

You're ok to insert whatever you want into the div. Be sure that the height of your content exceeds the height of the div so you can test the scroll bar.

Preview the html, see how it looks.

Let me know how if this works out for you. Once you've got an idea of how it works, we can get you on your feet to figure out how to use this in your page. Sorry I've been slow... work is killing me :sigh:


----------



## smythro (Jul 13, 2006)

*thanks*

Hey thanks for tutorial. I've got it pretty well figured out..at least enough to work on the site. The only thing I'm not sure of is this: 
teh div tag works great as long as the main page image is up against the left top of the page. Because the tag uses the number of pixels from the top and left side to place the div. This does not work out when I default the image to the center of the web page. Do you know what I mean?


----------



## v-six (Sep 12, 2004)

smythro said:


> Hey thanks for tutorial. I've got it pretty well figured out..at least enough to work on the site. The only thing I'm not sure of is this:
> teh div tag works great as long as the main page image is up against the left top of the page. Because the tag uses the number of pixels from the top and left side to place the div. This does not work out when I default the image to the center of the web page. Do you know what I mean?


I'm sure that I know what you mean if I can understand what you're saying. Is it possible to either go into more detail, or include a bit of illustration? Anyone else a better reader than I am?


----------



## grizzly_uk (Jul 28, 2006)

Not to go against another tech's advice, but in my opinion iframes should be avoided where possible and only used when there is no other solution.

Another suggestion after looking at your site (it looks good by the way), you should consider aligning your text to one side or the other rather than having it centred. It is pretty hard and off-putting for a visitor to read and you should always work under the assumption that all of your users are complete idiots...that way you can design for their most basic needs 

*EDIT* I just noticed that your site is comprised almost exclusively of images. Perhaps search engine listings aren't important to you at this time but you should be aware that search engine spiders will be unable to read the text from images and whilst I experienced no problems loading the image ( I'm on a very fast connection) there are still a few dial-up users out there that may experience waiting times in excess of the 10 second rule.


----------



## v-six (Sep 12, 2004)

grizzly_uk said:


> Not to go against another tech's advice, but in my opinion iframes should be avoided where possible and only used when there is no other solution


Zep already had to scrub the toilets for suggesting iframes :grin:


----------



## grizzly_uk (Jul 28, 2006)

Haha yes so I see, iframes have their uses but they are more trouble than they are worth.


----------



## smythro (Jul 13, 2006)

*take a look at www.americancyclefab.com*

hey guys, thanks for all the advice. I'm continuing to work on the site, however I put it into live action this morning so you all could see it better. It's at www.americancyclefab.com

You'll see how the site is at the top left side of the page. If I use teh align center for the site, then the div location get messed up. This is because teh div is based on specific pixels from the top and left side of the screen. Whereas the the center location can change dynamically depending on the size of the window. 

Any thoughts on how to fix this? 

smythro


----------



## v-six (Sep 12, 2004)

One solution is to make another div as the container of the entire page. You can center the container, and then set the scrolling div to be relative to the edge of the container. I'll wait to see if anyone else has a more efficient solution before I drop instructions on you on for how to do this.

Here's a site I've done in a similar fashion: http://www.nytos.org/


----------



## DJ-Zep (Mar 11, 2006)

v-six said:


> Zep already had to scrub the toilets for suggesting iframes :grin:


He said he wanted one, I technically never suggested it :grin: 



v-six said:


> One solution is to make another div as the container of the entire page. You can center the container, and then set the scrolling div to be relative to the edge of the container. I'll wait to see if anyone else has a more efficient solution before I drop instructions on you on for how to do this.


Good idea. I, too, recommend this.


----------



## grizzly_uk (Jul 28, 2006)

Also note that you can use % instead of pixel values, this will give you more flexibility as it will always appear centres regardless of the screen resolution of the visitor.


----------



## E-Liam (Jan 1, 2004)

Hi,

I had a quick play, and this works fine in IE, but it needs tweaking for FF. Can some one have a quick check.. I'll sit down later when I have more time.. and don't even think about seeing if it validates.. :sigh: :grin: 

BTW, it needs a 21 century Doc type, which might help, but I've run out of time for now. :sayyes: 


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>index</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">

body {
background-color: #000000;
margin:0px 0px 0px 0px;
padding:0px;text-align:center;
}

#container {
background-color:#0000000;
margin-left: auto;
margin-right: auto;
width:750px;
height:auto;
z-index:-1;
text-align:center;
}

#scrollbox {
position:absolute; 
margin-left:292px;
top:244px;
width:459px; 
height:225px; 
padding: 15px;
overflow:auto;
text-align:center;
}

p {
color:#cccccc;
font-size: 1.05em;
}

p.title {
font-weight:bold;
font-size: 1.4em;
}

</style>
<!-- ImageReady Preload Script (index.psd) -->

<SCRIPT TYPE="text/javascript">

<!--

function newImage(arg) {
        if (document.images) {
                rslt = new Image();
                rslt.src = arg;
                return rslt;
        }
}

function changeImages() {
        if (document.images && (preloadFlag == true)) {
                for (var i=0; i<changeImages.arguments.length; i+=2) {
                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
                }
        }
}

var preloadFlag = false;
function preloadImages() {
        if (document.images) {
                title_bar_over = newImage("images/title_bar-over.jpg");
                conbut2_over = newImage("images/conbut2-over.jpg");
                twibut_over = newImage("images/twibut-over.jpg");
                imgbut_over = newImage("images/imgbut-over.jpg");
                resbut_over = newImage("images/resbut-over.jpg");
                resbut_over020 = newImage("images/resbut-over-20.jpg");
                motbut_over = newImage("images/motbut-over.jpg");
                bonbut_over = newImage("images/bonbut-over.jpg");
                dynbut_over = newImage("images/dynbut-over.jpg");
                conbut_over = newImage("images/conbut-over.jpg");
                preloadFlag = true;
        }
}

// -->
</SCRIPT>
<!-- End Preload Script -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY ONLOAD="preloadImages();">
<div id="container">
<!-- ImageReady Slices (index.psd) -->
<div id="scrollbox">
  
   <p class="title">Welcome! </p><p>
We invite you to share our friendly, knowledgeable
and professional approach to motorcycling.</p>
<p>
Motorcycling and engine building is our passion -
we love what we do.</p>
<p>
Do you wish that your motorcycle just wasn't so tired
and unreliable? Is your late model motorcycle just
not fast enough for you?</p>
<p>
We pride ourselves on the time we take with our customers
getting to know them and what they want out of their motorcycle.
So, if you are looking for a reliable knowledgeable source
for motorcycling (old and new) – you have just found it! Us!
We provide top quality service and stand behind our work.</p>
<p>
Enjoy your visit to our website – please stop back again!</p>
  
</div>
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
                <TD COLSPAN=7>
                        <A HREF="index.htm" TARGET="_self"
                                ONMOUSEOVER="changeImages('title_bar', 'images/title_bar-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('title_bar', 'images/title_bar.jpg'); return true;">
                                <IMG NAME="title_bar" SRC="images/title_bar.jpg" WIDTH=750 HEIGHT=36 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=36 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=7>
                        <IMG SRC="images/header1.jpg" WIDTH=750 HEIGHT=97 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=97 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=3>
                        <IMG SRC="images/index_03.jpg" WIDTH=377 HEIGHT=43 ALT=""></TD>
                <TD>
                        <A HREF="contact.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('conbut2', 'images/conbut2-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('conbut2', 'images/conbut2.jpg'); return true;">
                                <IMG NAME="conbut2" SRC="images/conbut2.jpg" WIDTH=95 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="twincam.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('twibut', 'images/twibut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('twibut', 'images/twibut.jpg'); return true;">
                                <IMG NAME="twibut" SRC="images/twibut.jpg" WIDTH=92 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="imagegallery.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('imgbut', 'images/imgbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('imgbut', 'images/imgbut.jpg'); return true;">
                                <IMG NAME="imgbut" SRC="images/imgbut.jpg" WIDTH=94 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="resources.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('resbut', 'images/resbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('resbut', 'images/resbut.jpg'); return true;">
                                <IMG NAME="resbut" SRC="images/resbut.jpg" WIDTH=92 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=43 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=2>
                        <IMG SRC="images/index_08.jpg" WIDTH=300 HEIGHT=68 ALT=""></TD>
                <TD COLSPAN=5>
                        <IMG SRC="images/index_title.jpg" WIDTH=450 HEIGHT=68 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=68 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/index_10.jpg" WIDTH=234 HEIGHT=70 ALT=""></TD>
                <TD>
                        <IMG SRC="images/filler1.jpg" WIDTH=66 HEIGHT=70 ALT=""></TD>
                <TD COLSPAN=5 ROWSPAN=6>
                        <IMG SRC="images/main_content.jpg" WIDTH=450 HEIGHT=226 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=70 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="restorations.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('resbut019', 'images/resbut-over-20.jpg'); return true;"
                                ONMOUSEOUT="changeImages('resbut019', 'images/resbut-19.jpg'); return true;">
                                <IMG NAME="resbut019" SRC="images/resbut-19.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD ROWSPAN=5>
                        <IMG SRC="images/filler2.jpg" WIDTH=66 HEIGHT=156 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="motorbuilding.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('motbut', 'images/motbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('motbut', 'images/motbut.jpg'); return true;">
                                <IMG NAME="motbut" SRC="images/motbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="bonneville.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('bonbut', 'images/bonbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('bonbut', 'images/bonbut.jpg'); return true;">
                                <IMG NAME="bonbut" SRC="images/bonbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="dyno.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('dynbut', 'images/dynbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('dynbut', 'images/dynbut.jpg'); return true;">
                                <IMG NAME="dynbut" SRC="images/dynbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD ROWSPAN=2>
                        <A HREF="contact.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('conbut', 'images/conbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('conbut', 'images/conbut.jpg'); return true;">
                                <IMG NAME="conbut" SRC="images/conbut.jpg" WIDTH=234 HEIGHT=33 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=6 ROWSPAN=3>
                        <IMG SRC="images/motors_img.jpg" WIDTH=516 HEIGHT=110 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=13 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/blank_button.jpg" WIDTH=234 HEIGHT=33 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/filler4.jpg" WIDTH=234 HEIGHT=64 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=64 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=7>
                        <IMG SRC="images/index_22.jpg" WIDTH=750 HEIGHT=20 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=234 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=66 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=77 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=95 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=94 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
                <TD></TD>
        </TR>
</TABLE>
<!-- End ImageReady Slices -->
</div>
</BODY>
</HTML>
```
Cheers

Liam


----------



## E-Liam (Jan 1, 2004)

Hi Smythro,

this works in IE, Firefox and Opera. You'll need to import the changes to all the pages on the site though, but it's all the same code regardless. You'll see that the css now sets the style for the divs in the style sheet rather than in the HTML, so any changes you make can be done just once.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>index</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">

body {
background-color: #000000;
margin:0px 0px 0px 0px;
padding:0px;
text-align:center;

}
#container {
background-color:#0000000;
margin-left: auto;
margin-right: auto;
width:750px;
height:auto;
z-index:-1;
text-align:center;
}

#scrollbox {
position:absolute; 
margin-left:320px;
top:244px;
width:459px; 
height:225px; 
overflow:auto;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
width: 429px;
}

html>body #scrollbox {
width: 429px;
}

p {
color:#cccccc;
font-size: 1.05em;
}

p.title {
font-weight:bold;
font-size: 1.4em;
}

</style>
<!-- ImageReady Preload Script (index.psd) -->

<SCRIPT TYPE="text/javascript">

<!--

function newImage(arg) {
        if (document.images) {
                rslt = new Image();
                rslt.src = arg;
                return rslt;
        }
}

function changeImages() {
        if (document.images && (preloadFlag == true)) {
                for (var i=0; i<changeImages.arguments.length; i+=2) {
                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
                }
        }
}

var preloadFlag = false;
function preloadImages() {
        if (document.images) {
                title_bar_over = newImage("images/title_bar-over.jpg");
                conbut2_over = newImage("images/conbut2-over.jpg");
                twibut_over = newImage("images/twibut-over.jpg");
                imgbut_over = newImage("images/imgbut-over.jpg");
                resbut_over = newImage("images/resbut-over.jpg");
                resbut_over020 = newImage("images/resbut-over-20.jpg");
                motbut_over = newImage("images/motbut-over.jpg");
                bonbut_over = newImage("images/bonbut-over.jpg");
                dynbut_over = newImage("images/dynbut-over.jpg");
                conbut_over = newImage("images/conbut-over.jpg");
                preloadFlag = true;
        }
}

// -->
</SCRIPT>
<!-- End Preload Script -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY ONLOAD="preloadImages();">
<div id="container">
<!-- ImageReady Slices (index.psd) -->
<div id="scrollbox">
  
   <p class="title">Welcome! </p><p>
We invite you to share our friendly, knowledgeable
and professional approach to motorcycling.</p>
<p>
Motorcycling and engine building is our passion -
we love what we do.</p>
<p>
Do you wish that your motorcycle just wasn't so tired
and unreliable? Is your late model motorcycle just
not fast enough for you?</p>
<p>
We pride ourselves on the time we take with our customers
getting to know them and what they want out of their motorcycle.
So, if you are looking for a reliable knowledgeable source
for motorcycling (old and new) – you have just found it! Us!
We provide top quality service and stand behind our work.</p>
<p>
Enjoy your visit to our website – please stop back again!</p>
  
</div>
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
                <TD COLSPAN=7>
                        <A HREF="index.htm" TARGET="_self"
                                ONMOUSEOVER="changeImages('title_bar', 'images/title_bar-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('title_bar', 'images/title_bar.jpg'); return true;">
                                <IMG NAME="title_bar" SRC="images/title_bar.jpg" WIDTH=750 HEIGHT=36 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=36 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=7>
                        <IMG SRC="images/header1.jpg" WIDTH=750 HEIGHT=97 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=97 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=3>
                        <IMG SRC="images/index_03.jpg" WIDTH=377 HEIGHT=43 ALT=""></TD>
                <TD>
                        <A HREF="contact.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('conbut2', 'images/conbut2-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('conbut2', 'images/conbut2.jpg'); return true;">
                                <IMG NAME="conbut2" SRC="images/conbut2.jpg" WIDTH=95 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="twincam.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('twibut', 'images/twibut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('twibut', 'images/twibut.jpg'); return true;">
                                <IMG NAME="twibut" SRC="images/twibut.jpg" WIDTH=92 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="imagegallery.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('imgbut', 'images/imgbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('imgbut', 'images/imgbut.jpg'); return true;">
                                <IMG NAME="imgbut" SRC="images/imgbut.jpg" WIDTH=94 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <A HREF="resources.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('resbut', 'images/resbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('resbut', 'images/resbut.jpg'); return true;">
                                <IMG NAME="resbut" SRC="images/resbut.jpg" WIDTH=92 HEIGHT=43 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=43 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=2>
                        <IMG SRC="images/index_08.jpg" WIDTH=300 HEIGHT=68 ALT=""></TD>
                <TD COLSPAN=5>
                        <IMG SRC="images/index_title.jpg" WIDTH=450 HEIGHT=68 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=68 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/index_10.jpg" WIDTH=234 HEIGHT=70 ALT=""></TD>
                <TD>
                        <IMG SRC="images/filler1.jpg" WIDTH=66 HEIGHT=70 ALT=""></TD>
                <TD COLSPAN=5 ROWSPAN=6>
                        <IMG SRC="images/main_content.jpg" WIDTH=450 HEIGHT=226 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=70 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="restorations.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('resbut019', 'images/resbut-over-20.jpg'); return true;"
                                ONMOUSEOUT="changeImages('resbut019', 'images/resbut-19.jpg'); return true;">
                                <IMG NAME="resbut019" SRC="images/resbut-19.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD ROWSPAN=5>
                        <IMG SRC="images/filler2.jpg" WIDTH=66 HEIGHT=156 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="motorbuilding.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('motbut', 'images/motbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('motbut', 'images/motbut.jpg'); return true;">
                                <IMG NAME="motbut" SRC="images/motbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="bonneville.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('bonbut', 'images/bonbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('bonbut', 'images/bonbut.jpg'); return true;">
                                <IMG NAME="bonbut" SRC="images/bonbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <A HREF="dyno.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('dynbut', 'images/dynbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('dynbut', 'images/dynbut.jpg'); return true;">
                                <IMG NAME="dynbut" SRC="images/dynbut.jpg" WIDTH=234 HEIGHT=34 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=34 ALT=""></TD>
        </TR>
        <TR>
                <TD ROWSPAN=2>
                        <A HREF="contact.html" TARGET="_self"
                                ONMOUSEOVER="changeImages('conbut', 'images/conbut-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('conbut', 'images/conbut.jpg'); return true;">
                                <IMG NAME="conbut" SRC="images/conbut.jpg" WIDTH=234 HEIGHT=33 BORDER=0 ALT=""></A></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=6 ROWSPAN=3>
                        <IMG SRC="images/motors_img.jpg" WIDTH=516 HEIGHT=110 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=13 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/blank_button.jpg" WIDTH=234 HEIGHT=33 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/filler4.jpg" WIDTH=234 HEIGHT=64 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=64 ALT=""></TD>
        </TR>
        <TR>
                <TD COLSPAN=7>
                        <IMG SRC="images/index_22.jpg" WIDTH=750 HEIGHT=20 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=234 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=66 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=77 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=95 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=94 HEIGHT=1 ALT=""></TD>
                <TD>
                        <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
                <TD></TD>
        </TR>
</TABLE>
<!-- End ImageReady Slices -->
</div>
</BODY>
</HTML>
```
Cheers

Liam


----------



## 'H' (Apr 1, 2009)

Under 'ID' you should see the div you just created. Select it.

Hi! I got this far and am stuck! I haven't created a div? This is in the design window? Please can someone help with this step, I am trying to create a text box with scroll bar but in the design window - I don't know how to code.

H


----------

