# self-centering webpage - How do I do it in Dreamweaver?



## EnsignSuder

I have a hobby website that I built a few years back in Dreamweaver. I'd like to update it and put it in what seems to be a very common format of a column that self-centers in the window. I've looked all over the place to learn how to do it, including the Dreamweaver MX help files and I haven't had any luck. So, if someone would tell me what everyone but me seems to know, I'd certainly appreciate the help.


----------



## KoosHopeloos

@ EnsignSuder: Welcome to TSF! 

Unfortunately, Dreamweaver MX is not update with HTML/CSS. Take a look in this thread for your answer.


----------



## mobs6

try this:
<body>
<table width="100%" cellpadding="0" cellspacing="0" align="center"> --> put it
<tr>
<td>
..... ---> your old html code
</td>
</tr>
</table> --> end
</body>


----------



## EnsignSuder

Thanks. The style I'm looking for is a bordered column that automatically centers on the screen, rather than automatically filling to 100%. I want the page to have the same look regardless of surfer screen size.
From what you've said, am I correct in assuming that Dreamweaver MX can't access all of the useability of CSS? I've been planning on upgrading, since MX is the oldest version now supported and eligible for an upgrade discount, so I guess I aught to bite the bullet and get it.
What would you recommend as a good book or learning resource for know-nothing wannabees like me that want to learn more about CSS, but would rather not get into raw programming? Not sure if that's even do-able, but thought I'd ask.
In the meantime, thanks very much for the code suggestions. I'll past them into a page and see what they do.
Thanks,
Ensign Suder


----------



## mobs6

first of all it's not because your friend monitor are 17 inch, but it's because the resolution they'd use...maybe you're using 1024x768 and your friend use 1280x960 or maybe 1152x864...the minimum standard resolution for designing web..is 1024.
please create your web in 1024 res, first...then after u finished the first page try it to change your screen resolution to 1152 or 1280, carefull its depend for your VGA card and monitor. If your VGA card or monitor not support it, u should get the blank monitor..

if u would like to learn about css much more without raw programming..please open new file from your dreamweaver mx, after that choose page design (CSS) which the right coloumn u could choose of design template that u desire...

U'll learn much2 more from it...just try learn it slowly...css not very power full to use in web design...still must include table and etc, to get a good web design...i usually designing web..


----------



## EnsignSuder

Thanks for the reply. I've been reading up on CSS from several sources and I think I'm beginning to see how things are done. Not quite there yet, but each new piece of information helps. I just want to be sure I'm on th eright track.
To see what I'm trying to accomplish, you can go to this site: http://www.theforce.net/latestnews/story/R2D2_Mailboxes_Confirm_Rumors_104142.asp
and you'll see that the layout is a page floating over a gray background. As the surfer window is resized, the page stays centered. Now, go to my site and see the difference. It's at http://www.artoodetoo.com (yeah, its geeky, but I said it was a hobby site.) I want to give the site a better look and am in the process of updating. One of the things I'd like to try is a page similar in layout to my first example above.


----------



## b72077

My best method is to center a whole page in any res by using a single cell table for the whole thing. Like the following template for the body.

<body><table align=center border=0><tr><td> 
the whole page
</td></tr></table></body>


----------



## EnsignSuder

B72077 - 

Thanks for the info. I've been working with a table, and have had difficulty getting everything to stay put inside it. But I continue to work on the layout and will post how it finally turns out.

Thanks,
Ensign Suder


----------



## KoosHopeloos

@ EnsignSuder: to make your table a fixed width, the only thing you need to add is the width tag, for example <table align="center" width="600px">. I checked your coding of your webpage, and to be honest it is a bit messy. What program do you use to make you webpage?


----------



## EnsignSuder

Koohopeloos - 
I've used Dreamweaver from the begining. I'm using MX currently, and will probably migrate to CS3 in the near future. I've no doubt that the code is probably pretty meesy, as you say. The truth is that I haven't taken a lot of time to learn it. Dreamweaver makes it very easy to build a page purely from the visual aspect, without any attention at all to the code side of things. Since I wasn't forced to understand code, I didn't bother to learn it. The pages seem to load fairly quickly, so I figured they must be okay.
Since deciding to update the site, I've realized that knowing how to code properly is something I probably need to know. I've purcahsed a couple of books on the topic, and have already found a few things that I could do a lot better.
In the meantime, if you have any suggestions on where I should or could clean up the messiness of my code, or if you know of a good reference book for beginners like me, I'm more than happy to have your counsel.
Thanks,
Ensign Suder


----------



## lelia6570

I am having this same issue, and have literally spent the last 3 days trying out every suggestion and solution on different forums. However, you guys looked kind and gentle, and I'm about ready to give up, so I thought I'd give it this final try.

My code may be a little messy now, because I've followed too many ideas (just type in <center> and </center> in the body and thats it !!! No.)
But I believe I've cleaned up enough today to make it liveable.

My final try was doing the <div id="container"> -site text- </div> and then putting the parameters in the css, but for some odd reason I'm still left with a site nicely snuggled up against the left side (although, oddly enough, the final time I tried previewing it in a window, it was bumped out oh, 5-10 pixels. That's when I gave up).

I'm pretty positive that I'm just putting the #container info in the css in the wrong place, or something equally silly. But if someone wouldn't mind looking at my code and telling me where I'm wrong, I would appeciate it so much.

I'll give whatever more info is needed.. I'll post the CSS code and the html in a sec.


----------



## lelia6570

The CSS:

/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{

font-family: "felix Titling";
color: #663333;
line-height: normal;
background-color: #FFFFFF;
font-size: 10px;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: underline;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: Times
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: 
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
color: #663333;
margin: 0px;
padding: 0px;
font-family: rockwell;
font-size: 100%;
font-weight: normal;
background-color: #FFFFCC;
}

h4{
font: 
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font:
color: #334d55;
}

input{
font-family:
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
top: 152px;
left: 218px;
right: 2%;
width:777px;
background-color: #ffffff;
height: 22px;
}

#tl {
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
visibility: visible;
}

#tr {
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

div#container { 
margin: auto;
width: 900px;
}

#masthead{
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: none;


width:9/9.;
padding: 1px 0px 1px 0px;
background-color: #FFFFCC;


font: "Times New Roman", Times, serif
border-right-color: #333333;
border-bottom-color: #333333;
border-top-style: none;
font-size: 14px;
width: 900px;
max-height: 15px;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333333;
background-color: #FFFFCC;
}


/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: Times "Times New Roman", Times, serif
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 10px 0px 15px 0px;
margin: 0px;
width: 900px;
letter-spacing: 1px;
}

#pageName h2{
font: Times "Times New Roman", Times, serif
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
top: 105px;
right: 200px;
padding: 0px;
margin: 0px;
visibility: visible;
width: 587px;
height: 6px;
}

/************* globalNav styles ****************/

#globalNav{
width: 100%;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
top: 0px;
left:0px;
}

#gnr {
top: 0px;
right:0px;
}

#globalLink{
top: 152px;
height: 22px;
padding: 0px;
margin: 0px;
left: 150px;
z-index: 100;
width: 815px;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
top: 84px;
left: 0px;
/*width: 100%;*/
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
color: #FFFFFF;
font-size: small;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px px;
height: auto;
background-color: #FFFFCC;
border-left-color: #FFFFCC;
border-bottom-color: #333333;
border-right-color: #FFFFCC;
border-top-color: #FFFFCC;
width: 860px;
text-indent: 3px;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
border-bottom-width: 1px;
border-bottom-style: none;
text-align: left;
}
html>body .feature

.feature h3{
font: Rockwell;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
font-size: 12px;
background-color: #FFFFCC;
border-top-color: #333333;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
width: 890px;
}

.story h3{
color: #663333;
font-family: "Times New Roman", Times, serif;
font-size: 100%;
font-weight: normal;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
color: #660000;
display:block;
padding-bottom: 5px;
font-size: 1em;
font-weight: bold;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
color: #333333;
margin-top: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
background-color: #FFFFCC;
width: 890px;
text-indent: 25px;
font: Sylfaen;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 4px;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: none;
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #663333;
font-family: "Times New Roman", Times, serif;
font: Times New Roman;
font-size: 13px;
background-color: #FFFFCC;
}

#sectionLinks a:hover{
background-color: #D6CB9E;
font-weight: normal;
font: Times New Roman;
text-decoration: none;
background-repeat: no-repeat;
border: thick none #000000;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom-color: #0A246A;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block; 
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/


----------



## lelia6570

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />
<script type="text/javascript">
<!--
<!--
var time = 3000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){ 
callname= "gl"+thisitem;
divname="subglobal"+thisitem; 
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<style type="text/css">
<!--
.style1 {font-family: "felix Titling";
background-color: #FFFFCC;
background-image: none;
font-size: 36px;
font-variant: normal;
font-style: normal;
text-indent: 50px;}
body,td,th {font-family: Sylfaen;
font-size: 13px;
background-color: #FFFFCC;
width: 9px;}
body {
background-color: #660000;
border-right-color: #000000;
border-left-color: #000000;
border-right-style: solid;
border-right-width: thin;
border-left-style: solid;
border-left-width: thin;
width: 800px;
background-color: #660000;
}
h1,h2,h3,h4,h5,h6 {font-family: "Times New Roman", Times, serif;}
a:link {color: #663333;}
a:visited {color: #663333;}
a {font-family: "Times New Roman", Times, serif;}
h1 {color: #663333;}
h2 {color: #663333;}
h3 {color: #663333;}
h4 {color: #663333;}
h5 {color: #663333;}
#Layer1 {position:absolute;
width:752px;
height:39px;
z-index:101;}
#container {.style9 {font-size: 14px;
background-color: #FFFFCC;
font: Times New Roman;
font-family: Sylfaen;}
.style10 {font-size: 12px;
font-weight: lighter;}
.style19 {font-family: "felix Titling";
font-size: 18px;
text-indent: 100px;}
.style22 {font-size: 12px}
.style26 {font-family: Sylfaen; font-size: 16px;}
.style28 {font-size: 14px;
width: 870px;}
.style29 {font-size: 20px}
.style30 {font-size: 14px}
.style32 {font-size: 44px}
.style34 {font-size: 28px}
.style36 {font-size: 14px}
-->
</style>
</head>
<body bgcolor="#FFFFFF" onmousemove="closesubnav(event);">
<!-- end masthead -->
<!--pagecell1-->
</span>
<div id="container">
<span class="style29">
<div class="style1" id="pageName">
<p><span class="style32">V</span>isser <span class="style34">and</span> <span class="style32">A</span>ssociates, <span class="style34">PLLC</span></p>
<p class="story style19"> L<span class="style30">egal</span> <span class="style28">and</span> M<span class="style30">ediation</span> S<span class="style30">ervices</span></p>
</blockquote>
</div>
<img src="autumn_leaf.gif" width="900" height="68" />
<div id="pageNav">
<table width="900" border="4" align="center" cellpadding="4" cellspacing="4">
<!--DWLayoutTable-->
<tr>
<td height="44"><div align="center"><a href="index.html">Home</a></div></td>
<td><div align="center"><a href="About_Us.html">About Us </a></div></td>
<td><div align="center"><a href="Contact_Us.html">Contact Us </a></div></td>
<td><div align="center"><a href="Attorney_Biography.html">Attorney Information </a></div></td>
<td><!--DWLayoutEmptyCell--> </td>
<td><div align="center"><a href="Newsletter_Page.html">Newsletters</a></div></td>
<td><a href="Estate_planning.html">Estate Planning </a></td>
<td><a href="Mediation.html">Mediation</a></td>
<td><a href="Real_Estate.html">Real Estate </a></td>
<td><a href="Business_Services.html">Services for Businesses </a></td>
</tr>
</table>
</div>
<div class="feature">

TEXT TEXT TEXT TEXT 

</em></p>
<br />
</div>
<div class="story">
<div align="center"> 
<p><img src="bd21502_.gif" width="582" height="5" /></p>
</div>

</div>
<div class="story"></div>
<div id="siteInfo"><a href="Website_Feedback.html">Website Feedback </a> | <a href="Site_map.html">Site Map</a> | <a href="Privacy_Policy.html">Privacy Policy</a> | <a href="Contact_Us.html">Contact Us</a> | ©2007 Gladiola Productions </div>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</div>
</body>
</html>


----------



## lelia6570

Update: I changed the <div>container to <div>wrapper, and have had a degree of success, in that I now know the wrapper to be working as it is applying settings appropriately - I just still can't get it to center.

As a test, I set the settings in the #wrapper CSS definition to margin-left: 20% and margin-right: 20%, and it applied those appropriately, so it's not the fault of the wrapper being coded improperly. But 20% still doesn't leave it nice and universely centered.

Any suggestions ?


----------



## mobs6

Ok, leila i've found your problem in my compie
just replace it at your tag <body> like this:

<body bgcolor="#FFFFFF" *style="width:auto;"* onmousemove="closesubnav(event);">

i was only insert this command: *style="width:auto;"* and your page already center...:yltype:

hope it will help u..


----------



## mobs6

just some suggestion...if u like to designing with web...always try to test viewing it in different browser...i always test it in several brpwser like: (internet explorer) IE6 and IE7, Mozzila Firefox 2.0.3, and Opera 9..u'll find any differences on it......opera not very good in css and not to good for viewing picture...mostly i use opera for text based..not for design, like searching and news online, etc...but i always try it on opera to...
ok hope my suggestion will helpfull


----------



## lelia6570

Still no luck Mob;

I was a very excited pregnant woman for about 5 minutes, but nothing. I'm really considering just starting over from scratch, because it seems so hopeless !


----------



## lelia6570

Correction !

I was looking around in the code, and in the CSS body section had snuck in a text-align:left instead of a text-align:center..... the husband was messing around with it last night after I fell asleep crying.

So as of right now, it looks awesome... I need to wait til I get to my home computer to check it out on a couple different browsers, but hey ! if it works in IE, thats a step further than I was earlier.

Much much thanks mobs !


----------



## woody58

hey wondering if anyone can help me with same problem....i need to center my page so that when i use bigger resolution screens and drag the windows bigger/smaller that the page always stays centralised but i don't now how to do it or where to put it. its for a university project.

my code is as follows:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<title>Woody Cancer Care - Home Page</title>


<style type="text/css">

a { text-decoration:none }

A {
user-focus: none; outline : none; -moz-user-focus: none; -moz-outline: none; behavior: url(/includes/userfocus.htc)
}
A:LINK, A:ACTIVE { whatever }
A:FOCUS {
user-focus: none; outline : none; -moz-user-focus: none; -moz-outline: none; behavior: url(/includes/userfocus.htc)
}
A:VISITED { color : #0522b3; whatever }
A:HOVER {
color : #E54735;
whatever }

html {scrollbar-base-color: #4d2a00; scrollbar-arrow-color: #FFF;}


body {
background-image: url(Images/background_image.png);
background-repeat: repeat;
margin: 0px;
padding: 0px;
max-width: 960px;

}

#apDiv1 {
position:absolute;
width:960px;
height:99px;
z-index:1;
top: 7px;
left: 15px;
}
#apDiv2 {
position:absolute;
width:149px;
height:128px;
z-index:20;
left: 819px;
top: 0px;
}
#apDiv4 {
position:absolute;
width:910px;
height:621px;
z-index:3;
left: 26px;
top: 202px;
background-image: url(Images/notepaper.png);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
}
#apDiv5 {
position:absolute ;
width:166px;
height:208px;
z-index:24;
left: 69px;
top: 331px;
}
#apDiv6 {
position:absolute;
width:165px;
height:36px;
z-index:4;
left: 71px;
top: 307px;
}
#apDiv7 {
position:absolute;
width:165px;
height:33px;
z-index:6;
left: 70px;
top: 343px;
}
#apDiv8 {
position:absolute;
width:166px;
height:39px;
z-index:7;
left: 70px;
top: 375px;
}
#apDiv9 {
position:absolute;
width:166px;
height:36px;
z-index:8;
left: 69px;
top: 415px;
}
#apDiv10 {
position:absolute;
width:165px;
height:29px;
z-index:9;
left: 69px;
top: 451px;
}
#apDiv11 {
position:absolute;
width:923px;
height:32px;
z-index:10;
left: 25px;
top: 104px;
}
#apDiv12 {
position:absolute;
width:161px;
height:37px;
z-index:21;
left: 80px;
top: 209px;
}
#apDiv13 {
position:absolute;
width:587px;
height:111px;
z-index:22;
left: 254px;
top: 175px;
}
#apDiv14 {
position:absolute;
width:117px;
height:52px;
z-index:30;
left: 800px;
top: 465px;
}
#apDiv15 {
position:absolute;
width:250px;
height:33px;
z-index:25;
left: 702px;
top: 138px;
}
#apDiv16 {
position:absolute;
width:220px;
height:47px;
z-index:26;
left: 247px;
top: 305px;
font-family: "Bradley Hand ITC";
font-size: 28px;
font-weight: bold;
color: #0522b3;
}
#apDiv17 {
position:absolute;
width:352px;
height:115px;
z-index:27;
left: 248px;
top: 354px;
font-family: "Bradley Hand ITC";
font-size: 22pt;
}
#apDiv18 {
position:absolute;
width:300px;
height:223px;
z-index:26;
left: 577px;
top: 322px;
}
#apDiv19 {
position:absolute;
width:304px;
height:37px;
z-index:31;
left: 263px;
top: 334px;
font-family: "Bradley Hand ITC";
font-size: 28.24px;
font-weight: bold;
color: #0522b3;
}
#apDiv20 {
position:absolute;
width:304px;
height:94px;
z-index:32;
left: 265px;
top: 413px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 22.24px;
color: #0522b3;
font-weight: bold;
link-color: #0522b3;
}
#apDiv21 {
position:absolute;
width:304px;
height:89px;
z-index:33;
left: 264px;
top: 478px;
font-family: "Bradley Hand ITC";
font-size: 22.24px;
color: #0522b3;
font-weight: bold;
}
#apDiv22 {
position:absolute;
width:304px;
height:115px;
z-index:34;
left: 264px;
top: 571px;
font-family: "Bradley Hand ITC";
font-size: 22.24px;
color: #0522b3;
font-weight: bold;
}
#apDiv23 {
position:absolute;
width:299px;
height:27px;
z-index:36;
left: 577px;
top: 550px;
}
#apDiv24 {
position:absolute;
width:497px;
height:20px;
z-index:35;
left: 248px;
top: 930px;
}
#apDiv19 u {
font-family: "Arial Black", Gadget, sans-serif;
}
#apDiv25 {
position:absolute;
width:912px;
height:98px;
z-index:2;
left: 24px;
top: 818px;
}
#apDiv26 {
position:absolute;
width:200px;
height:115px;
z-index:37;
left: 369px;
top: 252px;
}
#apDiv27 {
position:absolute;
width:255px;
height:181px;
z-index:37;
left: 599px;
top: 618px;
}
#apDiv28 {
position:absolute;
width:200px;
height:115px;
z-index:37;
left: 582px;
top: 596px;
text-align: left;
}
#apDiv29 {
position:absolute;
width:301px;
height:27px;
z-index:38;
left: 577px;
top: 804px;
}
#apDiv30 {
position:absolute;
width:117px;
height:52px;
z-index:39;
left: 771px;
top: 736px;
}
#apDiv31 {
position:absolute;
width:90px;
height:90px;
z-index:40;
left: 104px;
top: 633px;
}
#apDiv32 {
position:absolute;
width:200px;
height:115px;
z-index:41;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a_)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


</script>
</head>

<body onload="MM_preloadImages('Images/homeROLL.png','Images/thingsROLL.png','Images/healthROLL.png','Images/donateROLL.png','Images/about-usROLL.png','Images/supportROLL.png','Images/contactROLL.png','Images/home2ROLL.png','Images/donate2ROLL.png','Images/eventsROLL.png','Images/shoppingROLL.png','Images/fundraisingROLL.png','Images/educationROLL.png','Images/appleROLL.png','Images/bananaROLL.png','Images/pearROLL.png','Images/orangeROLL.png','Images/strawberryROLL.png','Images/[gickr.com]_e36cb481-f409-dbc4-2d16-38c2f33767cb.gif','Images/searchbar2.png')">
<div id="apDiv23"><img src="Images/picbanner.png" width="299" height="27" /></div>
<div id="apDiv19"><U>Latest News</U></div>
<div id="apDiv14"><img src="Images/paper-clip.png" width="117" height="52" /></div>
<div id="apDiv15"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','Images/searchbar2.png',1)"><img src="Images/searchbar.png" name="search" width="250" height="30" border="0" id="search" /></a></div>


<div id="apDiv3"></div>
<div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home 2','','Images/home2ROLL.png',1)"><img src="Images/home2.png" name="home 2" width="166" height="33" border="0" id="home 2" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate 2','','Images/donate2ROLL.png',1)"><img src="Images/donate2.png" name="donate 2" width="165" height="36" border="0" id="donate 2" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','Images/eventsROLL.png',1)"><img src="Images/events.png" name="events" width="165" height="33" border="0" id="events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shopping','','Images/shoppingROLL.png',1)"><img src="Images/shopping.png" name="Shopping" width="166" height="39" border="0" id="Shopping" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fundraising','','Images/fundraisingROLL.png',1)"><img src="Images/fundraising.png" name="fundraising" width="166" height="36" border="0" id="fundraising" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('education','','Images/educationROLL.png',1)"><img src="Images/education.png" name="education" width="165" height="29" border="0" id="education" /></a></div>
<div id="apDiv1"><img src="Images/masthead.png" width="960" height="99" /></div>
<div id="apDiv2"><img src="Images/hands.png" width="149" height="120" /></div>
<div id="apDiv4"></div>
<div id="apDiv11"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/homeROLL.png',1)"><img src="Images/home.png" name="Home" width="96" height="32" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('things','','Images/thingsROLL.png',1)"><img src="Images/things.png" name="things" width="190" height="32" border="0" id="things" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('health','','Images/healthROLL.png',1)"><img src="Images/health.png" name="health" width="118" height="32" border="0" id="health" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','Images/donateROLL.png',1)"><img src="Images/donate.png" name="donate" width="90" height="32" border="0" id="donate" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','Images/about-usROLL.png',1)"><img src="Images/about-us.png" name="About Us" width="105" height="32" border="0" id="About Us" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Support','','Images/supportROLL.png',1)"><img src="Images/support.png" name="Support" width="170" height="32" border="0" id="Support" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/contactROLL.png',1)"><img src="Images/contact.png" name="contact" width="153" height="32" border="0" id="contact" /></a></div>
<div id="apDiv12"><a href="http://www.twitter.com"><img src="Images/twitter.png" width="37" height="37" border ="0" /></a><a href="http://www.facebook.com"><img src="Images/facebook.png" width="33" height="37" border ="0"/></a><a href="http://www.myspace.com"><img src="Images/myspace.png" width="36" height="37"border ="0" /></a><a href="http://www.bebo.com"><img src="Images/bebo.png" width="39" height="37" border ="0" /></a></div>
<div id="apDiv13"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('apple','','Images/appleROLL.png',1)"><img src="Images/apple.png" name="apple" width="109" height="111" border="0" id="apple" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('banana','','Images/bananaROLL.png',1)"><img src="Images/banana.png" name="banana" width="128" height="111" border="0" id="banana" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pear','','Images/pearROLL.png',1)"><img src="Images/pear.png" name="pear" width="111" height="111" border="0" id="pear" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('orange','','Images/orangeROLL.png',1)"><img src="Images/orange.png" name="orange" width="120" height="111" border="0" id="orange" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('strawberry','','Images/strawberryROLL.png',1)"><img src="Images/strawberry.png" name="strawberry" width="116" height="111" border="0" id="strawberry" /></a></div>
<div id="apDiv18"><img src="Images/rio.png" width="300" height="223" /></div>
<div id="apDiv20">
<a href = "index.html"> <li>Rio Ferdinand becomes international ambassador for Woody Cancer Care</li></a>
<br>
<a href = "index.html">
<li>Professor wins award for his contributions to cancer research<br>
</li>
</a><a href = "index.html" > <BR>
<li>Len & Doris fundraise over £3000 for Woody Cancer Care</li>
</a>
</div>

<div id="apDiv24"><img src="Images/about.png" width="51" height="16" /><img src="Images/commercial.png" width="182" height="16" /><img src="Images/disclaimer.png" width="81" height="16" /><img src="Images/privacy.png" width="103" height="16" /><img src="Images/contactfooter.png" width="80" height="16" /></div>
<div id="apDiv25"><img src="Images/index.png" width="912" height="98" /></div>
<div id="apDiv27"><img src="Images/elderly.png" width="255" height="181" /></div>
<div id="apDiv29"><img src="Images/picbanner2.png" width="299" height="27" /></div>
<div id="apDiv30"><img src="Images/paper-clip.png" width="117" height="52" /></div>
<div id="apDiv31"><a href="http://www.nhsdirect.nhs.uk/"><img src="Images/NHS.png" width="90" height="90" border="0" /></a></div>
</body>
</html>



im grateful if anyone can help ray:_


----------

