PC Review


Reply
Thread Tools Rate Thread

Align entire website to center, not left

 
 
Hepp-Kondas
Guest
Posts: n/a
 
      13th Oct 2009
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?
 
Reply With Quote
 
 
 
 
Ronx
Guest
Posts: n/a
 
      13th Oct 2009
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.



"Hepp-Kondas" <(E-Mail Removed)> wrote in message
news:CCB94551-E456-4B78-864E-(E-Mail Removed)...
> 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?


 
Reply With Quote
 
Helpful person
Guest
Posts: n/a
 
      13th Oct 2009
On Oct 13, 12:31*pm, Hepp-Kondas
<HeppKon...@discussions.microsoft.com> wrote:
> 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?


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
 
Reply With Quote
 
Ronx
Guest
Posts: n/a
 
      13th Oct 2009
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.



"Helpful person" <(E-Mail Removed)> wrote in message
news:275fd41b-72e7-44c3-9dd3-(E-Mail Removed)...
> On Oct 13, 12:31�pm, Hepp-Kondas
> <HeppKon...@discussions.microsoft.com> wrote:
>> 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?

>
> 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


 
Reply With Quote
 
Hepp-Kondas
Guest
Posts: n/a
 
      13th Oct 2009
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

"Hepp-Kondas" wrote:

> 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..........


 
Reply With Quote
 
Trevor Lawrence
Guest
Posts: n/a
 
      14th Oct 2009
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 Lawrence
Canberra
Web Site http://trevorl.mvps.org


 
Reply With Quote
 
Ronx
Guest
Posts: n/a
 
      14th Oct 2009
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.



"Hepp-Kondas" <(E-Mail Removed)> wrote in message
news:3B1531EA-D561-43BA-A815-(E-Mail Removed)...
> 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
>
> "Hepp-Kondas" wrote:
>
>> 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..........

>

 
Reply With Quote
 
Hepp-Kondas
Guest
Posts: n/a
 
      15th Oct 2009
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

"Trevor Lawrence" wrote:

> 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 Lawrence
> Canberra
> Web Site http://trevorl.mvps.org
>
>
>

 
Reply With Quote
 
New Member
Join Date: Apr 2012
Posts: 2
 
      10th Apr 2012
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to align text left, center, right? LurfysMa Microsoft Word New Users 10 26th Jul 2006 10:31 PM
The center/right/left align has dissapeared. =?Utf-8?B?U21pbGVLaXR0eQ==?= Microsoft Word Document Management 2 10th Jun 2006 09:05 PM
The center/right/left align has dissapeared. =?Utf-8?B?U21pbGVLaXR0eQ==?= Microsoft Word Document Management 0 10th Jun 2006 08:36 PM
Align to the left or to the right (or center) kaokao1 Microsoft Excel Programming 2 6th Jun 2006 04:09 AM
How do I center align my entire web page? =?Utf-8?B?TW9uaWNh?= Microsoft Frontpage 2 10th Jan 2006 10:21 PM


Features
 

Advertising
 

Newsgroups
 


All times are GMT +1. The time now is 06:43 AM.