How do I center a web page?? - Virtual Assistant Forums

MoragB · #1 (**permalink**) 06-02-2008

I'd be so grateful for some help - I'd like to make my web pages smaller & centered. I've tried opening the html file and inserting align='center' before the <table...> section (and also within the table section too, but it's not working....

So, what am I doing wrong? How can I make my web pages smaller & centered??

Agnes · #2 (**permalink**) 06-06-2008

I work in Dreamweaver and I click on <body> to select the page and then select <center> in my Properties workspace.

Hope this helps

Tess · #3 (**permalink**) 06-06-2008

Can you post back with your code please?

VagabondetteVA · #4 (**permalink**) 06-07-2008

I am creating my first from-scratch website

and this is how I did it:

I inserted a table that had a width of 100%.

Then, within that table I inserted another table with a width of 900 and a center align.

All of my content went within the 2nd table.

I'm sure that there is probably an easier way to do it, but that's how my other site did it and I'm already a bit freaked about doing this website so I didn't really want to learn much.

Codehead · #5 (**permalink**) 06-08-2008

Here is the secret:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Page</title>

	<style type="text/css">
		body {
			min-width: 800px;
			text-align: center;
		}
		#main-wrapper {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
		}
	</style>
   
</head>

<body>
<div id="main-wrapper">
	I'm a centered page :)
</div>
</body>
</html>

ss-bs · #6 (**permalink**) 08-05-2009

If you put...

<p align="center">

Before bit you want to centre and...

</p>

after it, it should centre it.

Codehead · #7 (**permalink**) 08-06-2009

HTML Code:

<p align="center">

Is deprecated, in general, align="center" is deprecated, it's best if you always use CSS...

bestva4u · #8 (**permalink**) 09-08-2009

Originally Posted by MoragB

I'd be so grateful for some help - I'd like to make my web pages smaller & centered. I've tried opening the html file and inserting align='center' before the <table...> section (and also within the table section too, but it's not working....

So, what am I doing wrong? How can I make my web pages smaller & centered??

Here is sample code for making web content centered:

<html>
<head></head>
<body>
<center> /* This is for the whole table to go in center of the page */
<table bgcolor="gray" width="500" height="300" >
<tr align="center">
<td>This table and its text is centered aligned</td>
</tr>
</table>
</center>
</body>
</html>

Please use align tag in every row of the table to make content centered aligned.

If you still have problem, please paste your code.

HTH.

Codehead · #9 (**permalink**) 09-08-2009

Same same, <center> and tables are deprecated for design, you should use CSS...

Business-Bytes · #10 (**permalink**) 09-08-2009

Originally Posted by Codehead

Same same, <center> and tables are deprecated for design, you should use CSS...

Boy do I agree, Hamid.

Besides being deprecated*, tables are for tabular data, not layouts/design. Look at it this way: If you would not use a table to present the same data in a word-processor, then the <table> tag should not be used. Also, search engines aren't too fond of tables.

Search engines love valid X/HTML/CSS.

*What's deprecated, you ask?:

Deprecated means that older HTML tags and attributes have been superseded by other more functional or flexible alternatives (whether as HTML or as CSS ) and are declared as deprecated (not valid) in HTML4.x by the W3C (the consortium that sets the HTML standards). Browsers "should continue" (no guarantee) to support deprecated tags and attributes, but eventually these tags are likely to become obsolete. This means that sites using deprecated tags/attributes will lose functionality in browsers. Not good. And not good for your visitors or PCs.

Just a little something to think about.

The Perfect Word · #11 (**permalink**) 03-14-2010

Originally Posted by Codehead

Here is the secret:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Page</title>

    <style type="text/css">
        body {
            min-width: 800px;
            text-align: center;
        }
        #main-wrapper {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
    </style>
   
</head>

<body>
<div id="main-wrapper">
    I'm a centered page :)
</div>
</body>
</html>

Will this work in HTML 4.01 Transitional?

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

Also, I'm looking to center the whole webpage on the screen, not center the text. In other words, whatever size monitor you have, your web page will be centered so if you have a really wide screen you won't have a lot of empty space to the right. Does that make sense?

Codehead · #12 (**permalink**) 03-14-2010

Hey, yes, this will center the whole web page in any browser, with any doctype...

The Perfect Word · #13 (**permalink**) 03-14-2010

Thanks for the quick response, Codehead, but it doesn't work right for me, so either I'm putting it in the wrong place, some other code is making it not work, or it won't work with the way my page is set up. (I didn't create it originally, just making changes.)

Except for the tables, it centers all the text and images just like if you took a Word document and set the whole page to "center," (like I've done to this paragraph) instead of the text left-aligned and having the whole page centered on the screen. Maybe everything needs to be set up in a table (or frames, whatever that is) for this work. This is where I put it. (I do have meta tags, but I didn't include them here.)

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

<head>

<title>The Perfect Word Pricing</title>

<link href="style2.css" rel="stylesheet" type="text/css">

<style type="text/css">
body {
min-width: 800px;
text-align: center;
}
#main-wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>

</head>

(Love your HTML/CSS lessons on here. Getting ready to start #4.)

Codehead · #14 (**permalink**) 03-14-2010

What about this bit in the original code:

HTML Code:

<div id="main-wrapper">
    I'm a centered page :)
</div>

I need to see more code in order to help you...

Also, I'm glad you like the classes

The Perfect Word · #15 (**permalink**) 03-14-2010

Code:

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

<title>The Perfect Word Pricing</title>

<meta name="description" content=" Transcription Service Rates located in Richmond, Virginia area.">
<meta name="keywords" content="Transciption, transcript, transcribe, speakers, rates, focus group, board meeting, interview, interviews, insurance recorded statement, focus groups, transcribe focus groups, transcribe insurance recorded statements,Richmond, Glen Allen, Deyerle, outsource, outsourcing, type, typed">
<meta name="author" content="Pam Deyerle-The Perfect Word"> 
<meta name="email" content="information@perfect-word.net">

<link href="style2.css" rel="stylesheet" type="text/css">

</head>

<body style="background-image: url(images/watercolorbg.jpg);">
<a href="default.html"><img src="http://www.virtualassistantforums.com/images/title.png" width="560" height="114" style="border: 0; position: relative; top: 20px;" alt="The Perfect Word Transcription Rates"></a> 

<BR><BR><BR>

<img src="http://www.virtualassistantforums.com/images/pricing.png" alt="The Perfect Word Transcription Rates">


<div style="left: 20px; top: 0px; width: 730px; position: relative;">

<p>The Perfect Word produces high quality transcripts at prices you can afford from almost any audio or video format. And unlike many transcription services, we offer you a choice between two billing options for most formats:  per transcription hour or per audio minute.</p>

<h3>Per Transcription Hour <font size="-1">(digital audio, CD, video, DVD, cassettes)</font></h3>

<p>We charge $25 per transcription hour. The cost of your entire recording is determined by several factors including length, audio quality, and number of speakers. The chart below is an example of what you can normally expect with a good recording:</p>

<table border="1" bordercolor="black" style="border-color: black; border-collapse: collapse;">
    <tr>
        <td width="130" align="center"><b>Length of Recording</b></td><td width="183"         align="center"><b>Average Transcription Time</b></td><td width="85"align="center"><b>Cost</b></td></tr>
    <tr>
        <td align="center">30 minutes</td><td align="center">1.75 hours</td><td align="center">$43.75</td></tr>
    <tr>
        <td align="center">60 minutes</td><td align="center">3.50 hours</td><td align="center">$87.50</td></tr>
    <tr>
        <td align="center">90 minutes</td><td align="center">5.25 hours</td><td align="center">$131.25</td></tr>
    <tr>
        <td align="center">120 minutes</td><td align="center">7.0 hours</td><td align="center">$175.00</td></tr>
</table>

<p>We are extremely skilled with poor recordings, thick accents, etcetera, but this will increase transcription time and cost.  To save money, use a good microphone and record in the quietest atmosphere possible.</p>

<h3>Per Audio Minute <font size="-1">(digital audio, CD, video, DVD)</font></h3>


<table border="1" bordercolor="black" style="border-color: black; border-collapse: collapse;">
    <tr>
        <th colspan="2" align="center">Per Audio Minute Rates for Clear Audio</th></tr>
    <tr>
        <td width="199" align="center">Up to 2 Speakers</td><td width="199" align="center">More Than 2 Speakers</td></tr>
    <tr>
        <td align="center">$1.50</td><td align="center">$1.75</td></tr>
</table>

<br>

<table border="1" bordercolor="black" style="border-color: black; border-collapse: collapse;">
    <tr>
        <th colspan="2" align="center">Per Audio Minute Rates for Difficult Audio*</th></tr>    
    <tr>
        <td width="199" align="center">Up to 2 Speakers</td><td width="199"         align="center">More Than 2 Speakers</td></tr>
    <tr>
        <td align="center">$2.00</td><td align="center">$2.25</td></tr>
</table>

<p>Example:  A 30-minute clear recording for up to two speakers would cost $45.00.</p>
<p>*Difficult recordings are those with a lot of background noise, low-speaking voices, thick accents, or audio that has been poorly recorded.</p>
    

<h2>Audio and Video Formats Accepted</h2>

<ul>
    <li>Standard and microcassette
    <li>Digital Audio (wav, mp3, wmp, etc.)
    <li>CD
    <li>Video (avi, mpeg, mov, etc.)
    <li>DVD
</ul>

<h2>Extra Services</h2>
<p>The Perfect Word offers the following additional services:</p>

<strong>Local Pickup/Delivery</strong> - ten-mile radius, no additional charge<br>
<strong>Rush Service</strong> – up to four a month at no additional charge for regular clients<br>
<strong>Verbatim</strong> -  includes uhs, ums, false starts, etcetera;  no additional charge<br>
<strong>Time Codes</strong> - you specify how often; add .25 to per-minute charge; hourly rate is the same<br>
<strong>File Encryption</strong> – to protect sensitive information; must be requested; no additional charge<br>
<strong>Second Pass</strong> - transcript is compared against recording after completion; additional charge<br>
<br>
<br>
<br>

<hr /><hr />


<table border="1">
    <tr>
        <td width="260" align="center"><a href="default.html">Home</a></td><td width="260"  
align="center"><a href="about.html">About Us</a></td><td width="260"align="center"><a  
href="http://perfect-word.net/audiouploads/upload.php">Upload File</a></td>></tr>

</table>

<br>
<br>
<br>

</div>
</body>
</html>

Hi, Codehead! Here is the WHOLE page as it is now without the centering code. Again, some of this was already done and as I'm learning through your lessons and other places, I'm making changes and additions For example, I just added the bottom two tables, the links at the bottom. Working on some other things, like images, as well. I know, for example, that the font tag is depracated, but I don't know how to change it just yet. Once I get to the CSS lessons of yours, I may know!

Thank you!