Align entire website to center, not left

  • Thread starter Thread starter Hepp-Kondas
  • Start date Start date
H

Hepp-Kondas

Our website, www.drugawarenessandprevention.org, aligns to the left.
After searching for answers to move it to the center, I found this advice
from 2006:
To centre the page
Add this line after the <body> tag on line 4
<div align="center">
Add this line before the </body> tag on line 137
</div>
I tried it, it DID move the site to the center, but I lost everything above
the table (our name and links), and I lost our theme "Zeroes". Help! Thank
you in advance.

Is there a way to center our website, and retail all elements and theme?
 
Adding those two lines, as described, would not have lost anything - it may
not have worked, but nothing would have been deleted and the theme would
remain.
However - <body> tag on line 4 implies you have a lot missing from the page
before you started.

<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="Microsoft Theme" content="Zero 1001">
</head>
<body>

The above is the minimum I would expect to see (some wording may be
different) - this places the <body> tag on line 7 at a minimum.

The modern way to centre pages is to use CSS and a container to wrap the
page content in:

Just before the </head> tag, add

<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
#wrapper {text-align: left; width: 760px; margin: 0 auto; position:
relative;}
</style>

Then add a div with id="wrapper" just after the body tag, and close the div
just before the </body> tag. The abridged page becomes:

<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="Microsoft Theme" content="Zero 1001">
<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
#wrapper {text-align: left; width: 760px; margin: 0 auto; position:
relative;}
</style>
</head>

<body>
<div id="wrapper">

page content goes here

</div>
</body>

</html>

Obviously, your <head> section will not be exactly as this example. But
nothing is deleted, and the theme will not be lost.
If you are using shared borders then only a more complex method will work,
the above will not.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Our website,www.drugawarenessandprevention.org, aligns to the left.
After searching for answers to move it to the center, I found this advice
from 2006:
To centre the page
Add this line after the <body> tag on line 4
<div align="center">
Add this line before the </body> tag on line 137
</div>
I tried it, it DID move the site to the center, but I lost everything above
the table (our name and links), and I lost our theme "Zeroes". Help! Thank
you in advance.

Is there a way to center our website, and retail all elements and theme?
Click to expand...

Personally I don't like center aligned web sites. They are extremely
annoying to the user when their viewing window is narrower than the
site. (Even elastic sites usually need a minimum width.)

www.richardfisher.com
 
The minimum width anyone can use (centered or not) is 100px.

For a centred site you can specify the content width as a % of the browser
portal width - but the minimum width the page can squish to is the width of
the smallest image or word in the page.

--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Hi Ronx,
I really appreciate your assistance. I checked the code, and copied the
first 29 lines below:
1
2<html>
3
4<head>
5<meta name="Microsoft Theme" content="zero 1011">
6<body >
7<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
8<meta http-equiv="Content-Language" content="en-us">
9
10<title>Drug Awareness and Prevention - Home</title>
11<meta name="keywords" content="Drug Awareness Prevention, cocaine, heroin,
crack cocaine, street drug news, anti-heroin, anti-cocaine, drug dealers,
drug trafficking, substance abuse">
12<meta name="description" content="Drug Awareness and Prevention Home Page-
Nonprofit mission is to lessen demand for heroin, cocaine, crack cocaine">
13<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
14<meta name="ProgId" content="FrontPage.Editor.Document">
15<table border="1" width="891" id="table1" style="border-color: #FFFFFF">
16 <tr>
17 <td width="498">
18 <p align="center" style="margin-top: 0; margin-bottom: 0">
19 <img border="7" src="nancy_brochure.jpg" width="75" height="185"
align="left"><b>Our
20 Vision, Our Mission, Our Profile</b></p>
21 <p align="center" style="margin-top: 0; margin-bottom: 0">
22 <span style="font-family: Times New Roman">
23 <b><font size="2">To educate , then eliminate</font></b></span><font
size="2"><span style="font-family: Times New Roman; font-weight: 700">
24 </span></font></p>
25 <p align="center" style="margin-top: 0; margin-bottom: 0">
26 <font size="2">
27 <span style="font-family: Times New Roman; font-weight: 700">
28 imported street drugs</span></font><span style="font-family: Times New
Roman; font-weight:700"><font size="2">.</font></span></p>
29 <p style="margin-top: 0; margin-bottom:0" align="left">
Should I still try inserted code, per your instructions?
Thank you, thank you, thank you!!!
Nancy
 
I suggest that you do as Ron suggests.

I note that he code you posted omits the closing </head> tag and has the
<body> tag in the wrong place, so this needs to be corrected, something like
this

<html>
<head>
<title>Drug Awareness and Prevention - Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Language" content="en-us">
<meta name="Microsoft Theme" content="zero 1011">
<meta name="keywords" content="Drug Awareness Prevention, cocaine, heroin,
crack cocaine, street drug news, anti-heroin, anti-cocaine, drug dealers,
drug trafficking, substance abuse">
<meta name="description" content="Drug Awareness and Prevention Home Page-
Nonprofit mission is to lessen demand for heroin, cocaine, crack cocaine">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
#wrapper {text-align: left; width: 760px; margin: 0 auto; position:
relative;}
</style>
</head>

<body>
<div id="wrapper">

..... page content goes here commencing
<table .......>

</div>
</body>

</html>

Whether all the <meta> tags are necessary or not is open for discussion.
Also since you have widths specified, some of which are greater than the
760px for <div id="wrapper">, you may need to adjust these
 
Trevor is correct - the page needs a lot of attention. Make the corrections
that Trevor indicated.

I would change
#wrapper {text-align: left; width: 760px; margin: 0 auto; position:
relative;}
to
#wrapper {text-align: left; width: 970px; margin: 0 auto; position:
relative;}

This will better suit your existing layout. 760px is the width for a browser
opened to 800px, 970px is for full screen on 1024px wide monitors.

Your page content actually starts at line 15 in the snippet you gave.

There is also some "curious" markup there, such as
<span style="font-family: Times New
Roman; font-weight:700"><font size="2">.</font></span>

That's a lot of code just for a full stop. Delete that segment and place the
full stop in the previous span.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Thank you Trevor. As an un-trained amateur, I am hesitant to do this, or
follow Ron's excellent suggestion. II am afraid I will mess everytihing up. I
will try to find a programmer to correct this.
I appreciate the adivce.
Nancy
 
Hi,

I'm using Microsoft Expression Web 4 to create a webpage with css.

Below is my css code:

/* CSS layout */
body {
margin: 0;
padding: 0;
text-align:left; width:1024px; margin:0 auto;position:fixed;
}

#masthead {
margin-left: 210px;
}

#top_nav {
margin-left: 210px;
padding-top: 10px;
padding-right: 10px;

}

#container {
padding-top: 10px;
padding-right: 10px;
}

#left_col {
width: 200px;
float: left;
}

#page_content {
margin-left: 210px;
}

#footer {
clear: both;
}

Now, I'm having problem with the entering text in the #page_content. The words just couldn't auto 'enter' right after the defined width (which is 1024px). I have to press enter manually.

Please help if there is any code this issue.

Thanks.
 
Back
Top