adding scrollbar without frames and so on ???

joroco · 11-30-2005, 10:35 AM

hi there, i re-designed my site and i have added sidebars and a bottom, i want it to stay the same size on every page, but afew pages the content is bigger so can you add a scrollbar or do i have to resize the side bars ??

im really not good at this stuff ....

and also some tips on making a more intresting flash start page movie thingy. ..

http://www.joroco.net

_Aerospace_Eng_ · 11-30-2005, 11:04 AM

Try this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>joroconetnewlayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css" media="screen"><!--
body { color: black; background-color: white; text-align: center; margin:0;padding:0;}
p {}
td {}
a:link { color: #4c4c4c ; font-size: 11px; font-family: verdana, arial; text-decoration: none; }
a:visited { color: #000 ; font-size: 11px; font-family: verdana, arial; text-decoration: none; }
a:hover { color: #c2c0ab ; font-size: 11px; font-family: verdana, arial; text-decoration: none; }
a:active { color: #444 ; font-size: 11px; font-family: verdana, arial; text-decoration: none; }
.bigtextcenter { color: #000; font-size: 12px; font-family: verdana, arial; font-weight: bold; text-decoration: none; text-align: center; }
.bigtextright { color: #000; font-size: 12px; font-family: verdana, arial; font-weight: bold; text-decoration: none; text-align: right; }
.bigtextleft { color: #000; font-size: 12px; font-family: verdana, arial; font-weight: bold; text-decoration: none; text-align: left; }
.contentcenter { color: #444; font-size: 10px; font-family: verdana, arial; text-decoration: none; text-align: center; }
.contentright { color: #444; font-size: 10px; font-family: verdana, arial; text-decoration: none; text-align: right; }
.contentleft { color: #444; font-size: 10px; font-family: verdana, arial; text-decoration: none; text-align: left; }
--></style>
	</head>
<body>
<!-- ImageReady Slices (joroconetnewlayout.gif) --><!-- End ImageReady Slices -->
			<div style="position:relative;width:752px;margin:auto;">
				<div style="width:751px;height:153px;">

					<table id="Table_01" width="751" height="153" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td colspan="13"><img src="images/joroconetnewlayout_01.gif" width="750" height="131" alt=""></td>
							<td><img src="images/spacer.gif" width="1" height="131" alt=""></td>
						</tr>
						<tr>
							<td rowspan="3"><img src="images/joroconetnewlayout_02.gif" width="18" height="22" alt=""></td>
							<td rowspan="2"><a href="index_eng.html"><img src="images/joroconetnewlayout_03.gif" width="31" height="10" alt="" border="0"></a></td>
							<td rowspan="3"><img src="images/joroconetnewlayout_04.gif" width="37" height="22" alt=""></td>

							<td rowspan="2"><a href="services.html"><img src="images/joroconetnewlayout_05.gif" width="50" height="10" alt="" border="0"></a></td>
							<td rowspan="3"><img src="images/joroconetnewlayout_06.gif" width="38" height="22" alt=""></td>
							<td rowspan="2"><a href="portfolio.html"><img src="images/joroconetnewlayout_07.gif" width="57" height="10" alt="" border="0"></a></td>
							<td rowspan="3"><img src="images/joroconetnewlayout_08.gif" width="37" height="22" alt=""></td>
							<td rowspan="2"><a href="info.html"><img src="images/joroconetnewlayout_09.gif" width="72" height="10" alt="" border="0"></a></td>
							<td rowspan="3"><img src="images/joroconetnewlayout_10.gif" width="37" height="22" alt=""></td>
							<td rowspan="2"><a href="contact.html"><img src="images/joroconetnewlayout_11.gif" width="50" height="10" alt="" border="0"></a></td>
							<td rowspan="3"><img src="images/joroconetnewlayout_12.gif" width="37" height="22" alt=""></td>
							<td><a href="links.html"><img src="images/joroconetnewlayout_13.gif" width="30" height="9" alt="" border="0"></a></td>

							<td rowspan="3"><img src="images/joroconetnewlayout_14.gif" width="256" height="22" alt=""></td>
							<td><img src="images/spacer.gif" width="1" height="9" alt=""></td>
						</tr>
						<tr>
							<td rowspan="2"><img src="images/joroconetnewlayout_15.gif" width="30" height="13" alt=""></td>
							<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
						</tr>
						<tr>
							<td><img src="images/joroconetnewlayout_16.gif" width="31" height="12" alt=""></td>

							<td><img src="images/joroconetnewlayout_17.gif" width="50" height="12" alt=""></td>
							<td><img src="images/joroconetnewlayout_18.gif" width="57" height="12" alt=""></td>
							<td><img src="images/joroconetnewlayout_19.gif" width="72" height="12" alt=""></td>
							<td><img src="images/joroconetnewlayout_20.gif" width="50" height="12" alt=""></td>
							<td><img src="images/spacer.gif" width="1" height="12" alt=""></td>
						</tr>
					</table>
				</div>
				<div style="width:751px;height:23px;"></div>

				<div class="contentcenter" style="width:751px;">
					<p class="bigtextcenter">
					Here at Joroco Designs we can offer you the following ...					</p>
					<p class="bigtextcenter">Website Layouts &amp; Graphics</p>
					<p class="bigtextcenter">Graphic Design for&nbsp;: Logos - Posters, Leaflets, Broschures - Menus &amp; More ...</p>

					<p class="bigtextcenter"><br>
						<br>
						Website Design &amp;&nbsp;Graphics</p>
					<p>Do you have a website that needs refreshing new graphics&nbsp;?&nbsp;</p>
					<p>Let us design your :&nbsp;Menubars, Advertising Banners, Banners, Headers, Footers or anything else that you feel is not perfect on your website !</p>
					<p>Maybe you just need to redesign your whole website with a new and improved layout and/or Design</p>

					<p class="bigtextcenter"><br>
						<br>
						Posters, Leaflets &amp;&nbsp;Broschures</p>
					<p>Original spectacular graphics can enhance your posters, advertising leaflets &amp; broschures.</p>
					<p>Give us just a small idea and let us create for you great advertising that will attract the eye!</p>
					<p class="bigtextcenter"><br>

						<br>
						Menus</p>
					<p>From basic menus to outstanding menus that compliment your restuarant in everyway.</p>
					<p>We can design a menu to compliment or match your restuarants profile/image.</p>
					<p><br>
					</p>
					<p class="bigtextcenter">Last of all we can offer you not only the computer graphics work </p>

					<p class="bigtextcenter">but also the finished product, print and even signs !</p>
				</div>
			</div>
	</body>
</html>

Basically don't use any absolute positioning, and don't define heights to the divs that have content in them.

joroco · 11-30-2005, 11:15 AM

thanks, but what is changed in there ?
so i can understand what it is that has happend...

so you understand what i ment with adding a scrollbar within my "side borders" ?

thanks /john

_Aerospace_Eng_ · 11-30-2005, 11:25 AM

If I understood you correctly you had pages that didn't need scrollbars because their wasn't enough content to fill them. Compare what I gave you to your old code and read the last line that I typed. Don't use absolute positioning or assign heights to your content divs.

joroco · 11-30-2005, 12:14 PM

no no no, sorry for being unclear

i want the sidebars and bottom bars to be in the same place on everypage ...but on my services page i would have to extend the side bars, and well it would look weird if everypage was the same size except for services (which would be like double the size)

_Aerospace_Eng_ · 11-30-2005, 06:43 PM

You are going to need to make a background image that contains a 1px slice of your layout. This image should contain your sidebars and the white area for your content. Then once you do this set it as the background image for your body in your CSS. Once again you CANNOT use absolute positioning if you expect this to work.