# web page off centre



## gollum456 (Oct 22, 2007)

hi all, i'm creating a website for my wife's business. but when i go to preview web page it is to the left and the background i have chosen covers the whole screen. how can i move it to centre and have a different colour down each side?
i'm using publisher 2007.
please help i'm starting to get really frustrated, as i cant find anything at all through google.

thanks in advance


----------



## haswalt (Nov 22, 2004)

Can't really help you with publisher. I would suggest getting hold of an actualy web authoring program.

Then try googline for css centering and backgrounds.

CSS is the main thing you are looking for.

Harry


----------



## tomdkat (May 6, 2006)

If you post a link to your site, maybe we can see something you can figure out how to change in Publisher to fix the problem. 

Peace...


----------



## gollum456 (Oct 22, 2007)

my site looks like this:

www.porttalbotmfc.com/

but i want it to look something like this:

http://www.learndirect-advice.co.uk/helpwithyourcareer/jobprofiles/profiles/profile1270/


----------



## tomdkat (May 6, 2006)

What color do you want down the sides? Man, that is some horrendous HTML that publisher generated. I second the recommendation of ditching Publisher in favor of another web design tool.

The bulk of your problems come from absolute positioning. I'll post an updated page you can use as a template. 

EDIT: Ok, I wasn't able to "fix" your current HTML but I came up with two new files which will hopefully do what you want.

Version #1: This version uses CSS for the page layout and your navigation header image still works:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <title>Port Talbot Mobile Foot Clinic - Home</title>

  <meta content="Dawn Morgans is a qualified Foot Health Practitioner of the Port Talbot Mobile Foot Clinic." name="description">

  <style type="text/css">
.pagebody {
border-left: 1px solid #6666cc;
border-right: 1px solid #6666cc;
border-bottom: 1px solid #6666cc;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 0px;
top: 0px;
padding-left: 0px;
left: 0px;
width: 980px;
padding-bottom: 5px;
}
.left-side-content {
display: block;
margin-left: 12px;
padding-right: 10px;
float: left;
width: 625px;
}
body {
margin-top: 0px;
}
.pagetext {
font-size: 10pt;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
}
.signature {
font-family: Comic Sans MS;
font-size: 12pt;
font-weight: normal;
}
.right-side-content {
display: block;
float: right;
margin-left: 5px;
width: 305px;
}
.border {
border: 1px solid #6633ff;
}
  </style>
</head>

<body style="background-image: url(index_files/image559.gif);">

<div class="pagebody">
<img style="border-style: none; width: 980px; height: 288px;" alt="Header and navigation image" src="index_files/image290a.gif" usemap="#MicrosoftOfficeMap0"><br>

<div class="left-side-content pagetext">
<h2 style="text-decoration: underline; text-align: center;">Welcome!</h2>

<p>Hi,
welcome to the website of Port Talbot Mobile Foot Clinic! My name is
Dawn Morgans and Im a qualified Foot Health Practitioner. I graduated
from Stonebridge College achieving S.A.C. Dip. FHPT, S.A.C. Dip. FHPP
in Foot Health Care.</p>

<p>As
a Foot Health Practitioner, I pride myself on delivering a professional
service, which is both efficient and hygienic. As this is a mobile
service I use sterile, disposable instruments. Each patients
individual needs are always a top priority with my treatment.</p>

<p>Foot
care is often overlooked and it is a known fact that feet are one of
the most neglected parts of the body. As well as providing treatment, I
also aim to demonstrate how you can maintain healthy feet.</p>

<p>Standard
treatment provided is for corns, calluses, fungal nail infections,
verrucas, dry and cracked skin, athletes foot, ingrown toenails,
trimming nails, also diabetic foot care and advice.</p>

<p>Once
you have decided to use my sevices, I will come to visit you in the
comfort of your own home. Medical notes will be taken on the first
visit. It will be important to know what medication you are taking and
any allergies you might have. I will also enquire as to what, if any
exercise you undertake, as this will also help to properly advise on
treatment.</p>

<p>Day,
evening or weekend visits are possible, so you do not need to worry
about disruption to your normal activities.</p>

<p>Residential
and nursing homes - discounted group rates. See pricing or contact me
for further
details.</p>

<p class="signature">Dawn Morgans</p>

</div>

<div style="text-align: center;" class="right-side-content"><br>

<img class="border" title="Dawn Morgans after graduation" style="width: 222px; height: 316px;" alt="Dawn Morgans" src="index_files/image3971.jpg">

<p style="margin-top: 0px; padding-top: 0px; top: 0px;" class="pagetext">Dawn
Morgans just after graduating Stonebridge College.</p>

<p style="margin-top: 0px; padding-top: 0px; top: 0px;" class="pagetext"><img class="border" style="width: 228px; height: 221px;" alt="Picture of bare soles" src="index_files/image6991.jpg"></p>

</div>

<img style="width: 3px; height: 606px;" alt="divider image" src="index_files/image698.gif">
</div>

<map name="MicrosoftOfficeMap0">
<area shape="Rect" coords="709, 136, 926, 170" href="http://www.porttalbotmfc.com/index_files/Page774.htm">
<area shape="Rect" coords="491, 136, 709, 170" href="http://www.porttalbotmfc.com/index_files/Page702.htm">
<area shape="Rect" coords="274, 136, 491, 170" href="http://www.porttalbotmfc.com/index_files/Page849.htm">
</map>

</body>
</html>
```
Using a technique like this is arguably preferred since using tables for page layout is sooooo "20th century". 

Version #2: This version uses a table-based layout:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <title>Port Talbot Mobile Foot clinic - Home</title>

  <meta content="Dawn Morgans is a qualified Foot Health Practitioner of the Port Talbot Mobile Foot Clinic." name="description">

  <style type="text/css">
body {
margin-top: 0px;
padding-top: 0px;
top: 0px;
}
#container {
border-style: none none solid;
border-bottom: 2px solid #6633ff;
margin-top: 0px;
padding-top: 0px;
top: 0px;
}
.pagetext {
font-size: 10pt;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
}
.signature {
font-family: Comic Sans MS;
font-size: 12pt;
font-weight: normal;
}
.border {
border: 1px solid #6633ff;
}
  </style>

</head>
<body style="background-image: url(index_files/image559.gif);">

<table id="container" style="width: 980px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td colspan="3"><img style="border-style: none; width: 980px; height: 288px;" alt="Header and navigation image" src="index_files/image290a.gif" usemap="#MicrosoftOfficeMap0"></td>
    </tr>

    <tr>
      <td style="vertical-align: top; width: 70%;" class="pagetext">
      <h2 style="text-decoration: underline; text-align: center;">Welcome!</h2>

      <p>Hi,
welcome to the website of Port Talbot Mobile Foot Clinic! My name is
Dawn Morgans and Im a qualified Foot Health Practitioner. I graduated
from Stonebridge College achieving S.A.C. Dip. FHPT, S.A.C. Dip. FHPP
in Foot Health Care.</p>

      <p>As
a Foot Health Practitioner, I pride myself on delivering a professional
service, which is both efficient and hygienic. As this is a mobile
service I use sterile, disposable instruments. Each patients
individual needs are always a top priority with my treatment.</p>

      <p>Foot
care is often overlooked and it is a known fact that feet are one of
the most neglected parts of the body. As well as providing treatment, I
also aim to demonstrate how you can maintain healthy feet.</p>

      <p>Standard
treatment provided is for corns, calluses, fungal nail infections,
verrucas, dry and cracked skin, athletes foot, ingrown toenails,
trimming nails, also diabetic foot care and advice.</p>

      <p>Once
you have decided to use my sevices, I will come to visit you in the
comfort of your own home. Medical notes will be taken on the first
visit. It will be important to know what medication you are taking and
any allergies you might have. I will also enquire as to what, if any
exercise you undertake, as this will also help to properly advise on
treatment.</p>

      <p>Day,
evening or weekend visits are possible, so you do not need to worry
about disruption to your normal activities.</p>

      <p>Residential
and nursing homes - discounted group rates. See pricing or contact me
for further
details.</p>

      <p class="signature">Dawn Morgans</p>

      </td>

      <td><img style="width: 3px; height: 606px;" alt="vertical divider" src="index_files/image698.gif"></td>

      <td style="text-align: center; vertical-align: top;"><br>

      <img class="border" style="width: 222px; height: 316px;" alt="Dawn Morgans" title="Dawn Morgans after graduation" src="index_files/image3971.jpg">

      <p style="margin-top: 0px; padding-top: 0px; top: 0px;" class="pagetext">Dawn
Morgans just after graduating Stonebridge College.</p>

      <br>

      <p style="margin-top: 0px; padding-top: 0px; top: 0px;" class="pagetext"><img class="border" style="width: 228px; height: 221px;" alt="Photo of bare soles" src="index_files/image6991.jpg"></p>

      </td>
    </tr>
  </tbody>
</table>

<map name="MicrosoftOfficeMap0">
<area shape="Rect" coords="709, 136, 926, 170" href="http://www.porttalbotmfc.com/index_files/Page774.htm">
<area shape="Rect" coords="491, 136, 709, 170" href="http://www.porttalbotmfc.com/index_files/Page702.htm">
<area shape="Rect" coords="274, 136, 491, 170" href="http://www.porttalbotmfc.com/index_files/Page849.htm">
</map>

</body>
</html>
```
I created this version since it's closer to what you have now (since you're currently using a table-based layout). Please note that while I used a table-based layout in this version I did *not* nest tables since it wasn't needed. This exercise made me realize that a number of people nest tables unnecessarily when using table-based layouts.

Attached are screenshots of how version #1 looks in Maxthon 2.0.9 (IE6 rendering engine), Safari 3.1, Firefox 3.0b5, and Opera 9.5b all running on Windows XP Pro SP2.

Do the screenshots demonstrate what you're after?

Peace...


----------



## gollum456 (Oct 22, 2007)

thanks i appreciate it


----------



## gollum456 (Oct 22, 2007)

thats great!!....but err......what do i do with it?  btw ive just updated the website. would that make a difference also?

thaks again and sorry


----------



## tomdkat (May 6, 2006)

It looks like you just updated some graphics. You could use either version I posted above as a template, or base, for the other pages in your site. Something else to consider, the "HTML" generated by Publisher takes 35kb to store on my hard drive. The two versions I created above are stored in 5kb files each. 

If you can find another web design tool and drop Publisher immediately.

EDIT: There is so much convoluted mess in the HTML files you're using now, I suggest starting over with a better web design tool.

Peace....


----------



## gollum456 (Oct 22, 2007)

Well, i've taken your advice and got hold of Dreamweaver and servage.net's own web tools. the website will stay as it is for now though and i will redo it when i decide to make any major changes. the information is out there, and thats all i wanted really.
one last question though, i deleted the only copy i had on my harddrive (oops), and i thought i had backed it up onto my other pc. is there any way i can retrieve this, possibly from my server's folders?


----------



## tomdkat (May 6, 2006)

Yep, you can download a copy of your site from the server and use that as your new starting point.

Give yourself some time to learn DreamWeaver. It's a powerful tool but it can also be a bit overwhelming. 

Good luck!

Peace...


----------



## gollum456 (Oct 22, 2007)

thanks tom, will do...........you've been a gem, cheers!!


----------

