Centering the whole web page

S

Stephen

Hi,

I downloaded a free website template from the internet,
which seems like it will work for us because it has lots
of link buttons, etc.

But it is flush left. It seems strange to me to have the
whole page flush left and all this space on the right.

I want to center the page. I've tried blocking all the
the tables (the page is about three tables, two smaller
tables inside a big table), and then clicking the center
button. But it isn't working.

Does anyone know how I can get the website centered?

Thanks a lot,

Stephen
 
G

Guest

Hi Stephen,

This is an old fashion method, you can add an alignment property in the
outside table tag:
<table align="center" width="300px">
 
M

Murray

Here is the simplest method that will work for all pages -

Add this to the head of the document -

<style type="text/css">
<!--
body { text-align:center; } /* for IE5/IE5.5 */
#wrapper { text-align:left; width:760px; margin:0 auto; } /*you may need to
adjust the width value */
-->
</style>

Then change this -

<body...>

to this -

<body...>
<div id="wrapper">

and this -

</body>

to this -

</div>
</body>
 
S

Stephen

Hi,

I'm sorry. I now see that it is not one table with other
tables in it but actually three tables one on top of each
other. Should I just use these suggestions for all three
tables or is there a way to so the entire page?

Sorry, again.

Thanks again.

Stephen
 
S

Stephen

Hi,

I did try it. Maybe I am doing it wrong. Since there was
already a style /style inside the head /head, I just put
it as you wrote it with it's own style /style in total
between the other /style and the /head. But it only
centers the top table, not the two tables below it.

Please let me know what I could be doing wrong.

Thanks a lot,

Stephen
 
M

Murray

Show me your code, please.

--
Murray

Stephen said:
Hi,

I did try it. Maybe I am doing it wrong. Since there was
already a style /style inside the head /head, I just put
it as you wrote it with it's own style /style in total
between the other /style and the /head. But it only
centers the top table, not the two tables below it.

Please let me know what I could be doing wrong.

Thanks a lot,

Stephen
Click to expand...
 
S

Stephen

Hi,

Here is the code:

<HEAD>
<TITLE>Your Title Here</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=windows-1252">
<STYLE type=text/css>A:link {
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
</STYLE>

<style type="text/css">
<!--
body { text-align:center; } /* for IE5/IE5.5 */
#wrapper { text-align:left; width:760px; margin:0
auto; } /*you may need to
adjust the width value */
-->
</style>

<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
</HEAD>

Thanks a lot for your help.

Stephen
 
S

Stephen

Hi, Murray,

I really appreciate your help.

The code for the body is below but if you would like to
look at the page, it is at:
http://www.stockmasters.net/test3.htm.


<BODY text=#000000 vLink=#000080 aLink=#000080
link=#000080 leftMargin=5
topMargin=5 MARGINHEIGHT="5" MARGINWIDTH="5">
<TABLE height=60 cellSpacing=0 cellPadding=0 width=770
border=0>
<TBODY>
<TR>
<TD width="100%" background-color="dddddd"
bgcolor="#008080">
<CENTER>
<H2>Your Website Title Here</H2></CENTER></TD>
<TD align=right width=468><!-- Begin JimWorld Banner
Code -->
<CENTER>
<SCRIPT type language=JavaScript>
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</SCRIPT>

<SCRIPT type language=javascript>banner();</SCRIPT>
</CENTER><!-- End JimWorld Banner Code --></TD>
<TD width=10></TD></TR></TBODY></TABLE><BR>
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 background="but1.gif"
border=0>
<TBODY>
<TR>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><B><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff>Features</FONT></A></B></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A
href="http://www.lowpriced4u.com"><FONT
color=#ffffff><B>Home</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 3</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 4</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 5</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link
6</B></FONT></A></FONT></TD></TR></TBODY></TABLE></DIV>
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 width=770 border=0>
<TBODY>
<TR>
<TD vAlign=top width="100%" bgColor=#ffffff>
<IMG height=3
src="rodtop.gif"
width="100%"></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=770
bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD vAlign=top align=left height="100%">
<IMG height="100%"
src="rodleft.gif" width=3></TD>
<TD vAlign=top height="100%">
<TABLE height="100%" cellPadding=5 width="100%"
bgColor=#ffffff>
<TBODY>
<TR>
<TD vAlign=top align=left width="20%"
bgColor=#c9e9c4
height="100%"><LI><FONT face=arial size=2>
<A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
</FONT><LI><FONT face=Arial size=2
color="#000080">
<b><u>UK Residents </u><br>
&nbsp;&nbsp;&nbsp; <u>Click here</u></b></FONT>
<br>
&nbsp;<LI><FONT face=arial size=2>
<A
href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
<LI><A
href="http://www.stockmasters.net">Favorite
Links</A><BR><BR>
<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR></FONT></LI></TD>
<TD vAlign=top align=left><FONT face=arial
size=2>
<CENTER><B><FONT size=3>Your Web Page Title
Here!
</FONT></B></CENTER><BR>&nbsp;<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

<P></FONT></P></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=3 height="100%">
<IMG height="100%"
src="rodright.gif" width=3
valign="top"></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=800>
<TBODY>
<TR>
<TD vAlign=top align=left width=800 bgColor=#ffffff>
<IMG height=3
src="rodbottom.gif"
width=770></TD></TR></TBODY></TABLE></DIV><!-- Change the
following to point to your email address. I would
appreciate you leaving the Powered By Free Site Templates
link but it is not required in any way. -->
<TABLE cellSpacing=0 cellPadding=0 width=770>
<TBODY>
<TR>
<TD>
<CENTER><FONT color=black size=1>© Copyright 2001-
2003. All rights
reserved. Contact: <A
href="mailto:[email protected]"><FONT
color=#008400>JimWORLD</FONT></A>
&nbsp;&nbsp;Powered by <A
href="http://freesitetemplates.com/"><I><FONT
color=#008400 size=2>Free
Site Templates</FONT></I></A></FONT>
</CENTER></TD></TR></TBODY></TABLE><BR><BR><BR>
<SCRIPT language=JavaScript>
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</SCRIPT>
</BODY></HTML>


Thanks again.

Stephen
 
M

Murray

OK - so all you need to do now, is (assuming the head of the page looks the
way your previous post did - with my stylesheet embedded) -

Change this -

<TABLE height=60 cellSpacing=0 cellPadding=0 width=770

to this -

<div id="wrapper">
<TABLE height=60 cellSpacing=0 cellPadding=0 width=770


and this -

</body>
</html>

to this -

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

and you're done.

--
Murray


Hi, Murray,

I really appreciate your help.

The code for the body is below but if you would like to
look at the page, it is at:
http://www.stockmasters.net/test3.htm.


<BODY text=#000000 vLink=#000080 aLink=#000080
link=#000080 leftMargin=5
topMargin=5 MARGINHEIGHT="5" MARGINWIDTH="5">
<TABLE height=60 cellSpacing=0 cellPadding=0 width=770
border=0>
<TBODY>
<TR>
<TD width="100%" background-color="dddddd"
bgcolor="#008080">
<CENTER>
<H2>Your Website Title Here</H2></CENTER></TD>
<TD align=right width=468><!-- Begin JimWorld Banner
Code -->
<CENTER>
<SCRIPT type language=JavaScript>
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</SCRIPT>

<SCRIPT type language=javascript>banner();</SCRIPT>
</CENTER><!-- End JimWorld Banner Code --></TD>
<TD width=10></TD></TR></TBODY></TABLE><BR>
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 background="but1.gif"
border=0>
<TBODY>
<TR>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><B><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff>Features</FONT></A></B></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A
href="http://www.lowpriced4u.com"><FONT
color=#ffffff><B>Home</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 3</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 4</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link 5</B></FONT></A></FONT></TD>
<TD width=122 height=22 bgcolor="#00FF00"><FONT
face="verdana, arial" size=1><A

href="http://www.freesitetemplates.com/templates/samples/83
/#"><FONT
color=#ffffff><B>Link
6</B></FONT></A></FONT></TD></TR></TBODY></TABLE></DIV>
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 width=770 border=0>
<TBODY>
<TR>
<TD vAlign=top width="100%" bgColor=#ffffff>
<IMG height=3
src="rodtop.gif"
width="100%"></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=770
bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD vAlign=top align=left height="100%">
<IMG height="100%"
src="rodleft.gif" width=3></TD>
<TD vAlign=top height="100%">
<TABLE height="100%" cellPadding=5 width="100%"
bgColor=#ffffff>
<TBODY>
<TR>
<TD vAlign=top align=left width="20%"
bgColor=#c9e9c4
height="100%"><LI><FONT face=arial size=2>
<A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
</FONT><LI><FONT face=Arial size=2
color="#000080">
<b><u>UK Residents </u><br>
&nbsp;&nbsp;&nbsp; <u>Click here</u></b></FONT>
<br>
&nbsp;<LI><FONT face=arial size=2>
<A
href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>

<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
<LI><A
href="http://www.stockmasters.net">Favorite
Links</A><BR><BR>
<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR>
<LI><A

href="http://www.freesitetemplates.com/templates/samples/83
/#">More
Links here</A><BR><BR></FONT></LI></TD>
<TD vAlign=top align=left><FONT face=arial
size=2>
<CENTER><B><FONT size=3>Your Web Page Title
Here!
</FONT></B></CENTER><BR>&nbsp;<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

<P></FONT></P></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=3 height="100%">
<IMG height="100%"
src="rodright.gif" width=3
valign="top"></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=800>
<TBODY>
<TR>
<TD vAlign=top align=left width=800 bgColor=#ffffff>
<IMG height=3
src="rodbottom.gif"
width=770></TD></TR></TBODY></TABLE></DIV><!-- Change the
following to point to your email address. I would
appreciate you leaving the Powered By Free Site Templates
link but it is not required in any way. -->
<TABLE cellSpacing=0 cellPadding=0 width=770>
<TBODY>
<TR>
<TD>
<CENTER><FONT color=black size=1>© Copyright 2001-
2003. All rights
reserved. Contact: <A
href="mailto:[email protected]"><FONT
color=#008400>JimWORLD</FONT></A>
&nbsp;&nbsp;Powered by <A
href="http://freesitetemplates.com/"><I><FONT
color=#008400 size=2>Free
Site Templates</FONT></I></A></FONT>
</CENTER></TD></TR></TBODY></TABLE><BR><BR><BR>
<SCRIPT language=JavaScript>
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</SCRIPT>
</BODY></HTML>


Thanks again.

Stephen
 
M

Murray

You're welcome. I take it it worked for you?

--
Murray


Hi, Murray,

This is so cool.

Thank you so much.

Stephen
 
S

Stephen

Hi, Murray,

Yes. It seems to work fine.

But, sorry, I have (hopefully) one last question. When it
is in Preview mode, it is fine and solid but when it is in
Design mode and I run the cursor up and down it, the page
shifts to the right and left.

Is is normal or did I do something wrong?

If you would like to look at the code, the page is now at:

http://www.stockmasters.net/test11.htm

Thanks so much for all of your help.

Take care,

Stephen
 
M

Murray

Sorry - I'm not able to see what you are describing. It does no shifting
for me in Design mode....

--
Murray


Hi, Murray,

Yes. It seems to work fine.

But, sorry, I have (hopefully) one last question. When it
is in Preview mode, it is fine and solid but when it is in
Design mode and I run the cursor up and down it, the page
shifts to the right and left.

Is is normal or did I do something wrong?

If you would like to look at the code, the page is now at:

http://www.stockmasters.net/test11.htm

Thanks so much for all of your help.

Take care,

Stephen
 
S

Stephen

Hi, Murray,

Well, it doesn't sound like it is much of a problem, so
we'll go on.

Thanks a lot for all of your help.

Stephen
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can't center block of text without centering whole document 4
Centering Layers on a page? 2
Centering the whole site 3
Problem centering tables after DWT's 7
Consider space in centering 1
centering website 6
Centering a Web Page 10
center drop down menu 8

Top