Fixed Scroll Boxes In Dreamweaver [Archive]

Click to See Complete Forum and Search --> : Fixed Scroll Boxes In Dreamweaver

rockstar14

07-11-2008, 08:41 AM

I want to put a scroll box in dreamweaver but I want it in a certain spot of my layout, and i am unsure of how to do that. If you could help me, that would be really helpful :)

S

eCat

07-11-2008, 10:26 PM

Do you know how to use CSS? That's the best way to do it.

If not, you could use tables - they're considered outdated markup, but are still commonly used.

eCat

rockstar14

07-12-2008, 04:42 PM

No, I am not sure how to use CSS. Dreamweaver has a place where you can add CSS but it does it for you; so I was using that. I looked there but nothing was there for scroll boxes.

wallacekp

07-14-2008, 06:06 PM

I use scroll bars created in Fireworks and saved as Animated GIF. Then placed into document as an Image wherever you like. The link shows what I mean (at present a vertical scroll but I sometime using horizontal as the mood takes me).

wallacekp

07-14-2008, 06:09 PM

Sorry - even better if I give you the link!!!

http://www.wokingareau3a.co.uk/index.html

Centauri

07-14-2008, 08:16 PM

So what do you mean by "scroll box"?

rockstar14

07-14-2008, 10:00 PM

Wallacekp, that is not exactly what I mean...I want something that is on these pages: http://en.wikipedia.org/wiki/Template:Scroll_box/doc
But i have a background image that i want to place in it. Actually, I have a designated area for text on my website layout and the place where the text is, is a different colour than the rest of the site.

Centauri

07-14-2008, 10:36 PM

That wiki entry seems to be old and refering to some javascript which appears to do nothing more than put an auto overflow div on the page with a list inside it - why on earth you would ever need javascript for this I don't know.

All you need to do is set the height and set overflow to "auto" on the element (div) containing the text (or create a new div if needed) - the background image can then be apoplied to this div.

Can you show us the code of the page so far?

rockstar14

07-15-2008, 10:42 AM

I wasn't using the wiki page for the coding...I was using it to show you what I wanted as an example of a scroll box. Sure, here is the code:

<html>
<head>
<title>sandwich_our_community_3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="text box.css" rel="stylesheet" type="text/css">
<link href="content_1.css" rel="stylesheet" type="text/css">
<link href="../murals/content_1.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="851" height="619" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="13">
<img src="images/banner.jpg" width="850" height="104" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/sandwich_our_community_3_02.jpg" width="850" height="35" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/sandwich_our_community_3_03.jpg" width="322" height="1" alt=""></td>
<td rowspan="22"><img src="images/sandwich_our_community_3_04.jpg" width="164" height="412" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/sandwich_our_community_3_05.jpg" width="364" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="20">
<img src="images/sandwich_our_community_3_06.jpg" width="9" height="409" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/navigation_bar.jpg" width="112" height="19" alt=""></td>
<td rowspan="20">
<img src="images/sandwich_our_community_3_08.jpg" width="27" height="409" alt=""></td>
<td rowspan="20" align="center" valign="top">
<div id="content_1">
<p> </p>
</div>
<br>
<p> </p>
</div>
</td>
<td rowspan="20">
<img src="images/sandwich_our_community_3_10.jpg" width="13" height="409" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="19">
<img src="images/sandwich_our_community_3_11.jpg" width="16" height="408" alt=""></td>
<td rowspan="20">
<img src="images/content_3.jpg" width="162" height="410" alt=""></td>
<td rowspan="19">
<img src="images/sandwich_our_community_3_13.jpg" width="13" height="408" alt=""></td>
<td rowspan="18">
<img src="images/content_4.jpg" width="161" height="407" alt=""></td>
<td rowspan="19">
<img src="images/sandwich_our_community_3_15.jpg" width="12" height="408" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/home.jpg" width="112" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-18.jpg" width="112" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/history.jpg" width="112" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-20.jpg" width="112" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/business_directory.jpg" width="112" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-22.jpg" width="112" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/navigation_bar-23.jpg" width="1" height="30" alt=""></td>
<td colspan="2">
<img src="images/events.jpg" width="111" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/navigation_bar-25.jpg" width="111" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/heritage_sites.jpg" width="112" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-27.jpg" width="112" height="15" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/murals.jpg" width="111" height="14" alt=""></td>
<td rowspan="2">
<img src="images/navigation_bar-29.jpg" width="1" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/navigation_bar-30.jpg" width="111" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/our_community.jpg" width="112" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-32.jpg" width="112" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/contacts.jpg" width="112" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/navigation_bar-34.jpg" width="112" height="44" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/sandwich_our_community_3_34.jpg" width="112" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="84" alt=""></td>
</tr>
<tr>
<td>
<img src="images/sandwich_our_community_3_35.jpg" width="161" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/sandwich_our_community_3_36.jpg" width="322" height="2" alt=""></td>
<td>
<img src="images/sandwich_our_community_3_37.jpg" width="16" height="2" alt=""></td>
<td colspan="3">
<img src="images/sandwich_our_community_3_38.jpg" width="186" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="13">
<img src="images/sandwich_our_community_3_39.jpg" width="850" height="67" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="67" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="164" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="162" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td></td>
</tr>
</table>

</body>
</html>

Centauri

07-15-2008, 11:08 AM

Ughh! - ImageReady slicing ..... possibly the worst way to design a website... That has produced semantically absolutely meaningless code consisting of unnecessary tables and images (all those stupid spacer gifs), which none of us can set up and test locally as we do not have the images used. There is no content text, so we cannot even see where you want this scroll box. You really need to learn semantic html coding and css styling via Dreamweaver's code view window, and leave the design view window to giving you an idea of where you are working - the best way to use Dreamweaver if you want control of how the site goes together (rather than letting Dreamweaver control and severly limit you).

If you can upload the unsliced, layered Imageready / Photoshop file, then we can advise the best way to code the site and make things much easier to insert things like scroll boxes.

rockstar14

07-15-2008, 09:21 PM

I'm not really sure how to do my website then...I made the layout in Photoshop and the only way I could find to upload it to the internet was to slice it and then put it in dreamweaver. How can I put it in dreamweaver without slicing the layout?

Centauri

07-15-2008, 09:33 PM

That is why I would like to see the original photoshop file - to do a tutorial on how it should be done. You don't "put it in Dreamweaver", you code semantically in Dreamweaver and extract various portions of the Photoshop mockup to apply to elements in Dreamweaver - not as quick, but more intuitive and much easier to control totally what is happening.

rockstar14

07-24-2008, 12:15 PM

Sorry it took me so long to reply. Here is what I have so far, with HTML. I started over, but I have these 'text box' places on the layout (in original photoshop file) and I'm not sure how to put those in, where they are in the original photoshop file. I also wanted them to have scrolling enabled so I can fit more text, but that comes later, right? Thank you so much for your help :)

HTML:

<html>
<head>
<title> Olde Sandwich Towne Business I A </title>
</head>
<body>
<BODY bgcolor="#977651" TEXT="#000000">
<center> <IMG SRC="http://i347.photobucket.com/albums/p463/shurst14/Olde%20Sandwich%20Towne%20BIA/SandwichWebsiteBackground-Home.jpg"> <center>
</body>
</html>

Original Photoshop File: http://i347.photobucket.com/albums/p463/shurst14/Olde%20Sandwich%20Towne%20BIA/SandwichWebsite-Homecopy2.jpg

I was wondering if I had to use Dreamweaver, or could I just write the HTML myself? It doesn't matter either way though.