SillyDog701 • how to center my web page???

by **chuber** » Tue 30 Oct, 2007 10:51 pm

Don,

Sorry, I am a big time newbie and wonder if you could convert your advice into an html example as I am not sure what you mean.

I will learn quickly and stop with the lame questions ... at the very least, I will try my best.

Thx again,
Chris

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

by **Don_HH2K** » Tue 30 Oct, 2007 10:57 pm

Basically your code right now would look like this:

Code: Select all: <html> <head><title>Page Title</title></head> <body> <p>This is the body of the site. It'll obviously have more than this in it, but it'll have a "body" tag at the very beginning of it, and a "/body" tag at the end of it to tell you where it is.</p> </body> </html>

This example, centered, would look like this:

Code: Select all: <html> <head><title>Page Title</title></head> <body> <center> <p>This is the body of the site. It'll obviously have more than this in it, but it'll have a "body" tag at the very beginning of it, and a "/body" tag at the end of it to tell you where it is.</p> </center> </body> </html>

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.8) Gecko/20071012 BonEcho/2.0.0.8 (ayakawa SSE2-PGU)

by **Edward** » Sun 04 Nov, 2007 9:39 am

It's too bad that commercial web sites can't do this. Everything (or mostly) seems to be along lines of the average user still using 800x600 resolution.

Sites like BBC News and Fox News, display everything to the left and leave a lot of white space on the right, this is with a monitor resolution at 1024x768 or (what I use) 1280x1024.

UserAgent: Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.8.1.9) Gecko/20071030 SeaMonkey/1.1.6

by **Rau71** » Sun 02 Mar, 2008 2:24 pm

I have my site centered using these codes, but how do I get a color to show up in margins on the sides so it isn't plane white? When I change the background color it doesn't seem to do anything.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

by **mphook** » Tue 18 Mar, 2008 9:14 pm

I am rather new to this but was wondering if you could look at this code and tell me if I can center these pages in my website.

I tried your <center> trick but was not sure if I had the location correct. Thanks for any help anyone can provide. I am using fp2003 with a bought template.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1272">
<meta http-equiv="Content-Language" content="en-us">

<title>Welcome</title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="csbaskt2 1011">
<meta name="Microsoft Border" content="tlb, default">
</head>
<body>

<table dir="ltr" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td vAlign="top"><font face="Arial" size="5" color="#FF8000"><b>Welcome</b></font><font face="arial, Arial, Helvetica"><p>
<b><font face="Arial" color="#000080" size="2">Welcome to the Arkansas
Explosion Girls Basketball Team website. Our organization is committed
to developing female student athletes between the ages of 13-15 as
basketball players for competition at the High School and AAU/BCI/MAYB
level.</font></b></p>
<p><b><font face="Arial" color="#000080" size="2">The Arkansas Explosion
Coaches desire to make playing basketball as rewarding and productive as
possible. Through hard work and commitment, our players will continue to
develop their  basketball skills and realize their potential. Working
together with their parents, we promise to provide them with the tools
necessary to ensure a memorable and exciting experience.</font></b></font></td>
</tr>
</table>

<p> </p>

<hr>

<p> </p>
<h2>Our Mission</h2>
<p> <font face="arial, Arial, Helvetica"><b><font face="Arial" color="#ff0000" size="2">The
Arkansas Explosion Girls Basketball Program is dedicated to the following:</font><font face="Book Antiqua" color="#ff9900" size="2"> 
</font></b></font> </p>
<table dir="ltr" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td vAlign="top">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td vAlign="baseline" width="42">
<img height="13" alt="bullet" hspace="14" src="ablbull1.gif" width="13"></td>
<td vAlign="top" width="100%"><b>
<font face="Arial" color="#ff0000" size="2">Significantly
improving our player's fundamental basketball skills.</font></b></td>
</tr>
<tr>
<td vAlign="baseline" width="42">
<img height="13" alt="bullet" hspace="14" src="ablbull1.gif" width="13"></td>
<td vAlign="top" width="100%"><b>
<font face="Arial" color="#ff0000" size="2">Providing a positive
and constructive environment conducive to full development of
our player's athletic potential.</font></b></td>
</tr>
<tr>
<td vAlign="baseline" width="42">
<img height="13" alt="bullet" hspace="14" src="ablbull1.gif" width="13"></td>
<td vAlign="top" width="100%"><b>
<font face="Arial" color="#ff0000" size="2">Exhibiting class and
quality by conducting ourselves in a respectful, honorable and
sportsmanlike manner.</font></b></td>
</tr>
<tr>
<td vAlign="baseline" width="42">
<img height="13" alt="bullet" hspace="14" src="ablbull1.gif" width="13"></td>
<td vAlign="top" width="100%"><b>
<font face="Arial" color="#ff0000" size="2">Having fun!</font></b></td>
</tr>
</table>
</td>
</tr>
</table>
<p><img border="0" src="100_0913a.JPG" width="229" height="172"> 
<img border="0" src="100_0912.JPG" width="218" height="172">
<img border="0" src="100_0908.JPG" width="225" height="172"></p>

<p> </p>

<hr>

<p> </p>
<h2>Team Profile</h2>
<table dir="ltr" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td vAlign="top"><font face="arial, Arial, Helvetica"><b>
<font face="Arial" color="#000080" size="2">The Arkansas Explosion Girls
Basketball U14 Team is based out of Sherwood, Arkansas and is
comprised of girls from the Central Arkansas Area. The majority of our
players attend Mount Saint Mary's High School in Little Rock, Arkansas.</font></b><p>
<b>
<font face="Arial" color="#000080" size="2">The organization was founded
in March of 2005. </font></b></font></td>
</tr>
</table>

<p> </p>

<hr>

<p> </p>
<h2>Contact Information</h2>
<ul>
<li><strong>Telephone</strong><ul>
<li></li>
</ul>
</li>
<li><strong>FAX</strong> </li>
<li><strong>Postal address</strong>
<ul>
<li></li>
</ul>
</li>
<li><strong>Electronic mail</strong>
<ul>
<li>Coach Tony Stafford: <a href="mailto:tonstafford@comcast.net">tonstafford@comcast.net</a> </li>
<li>Coach Michael Hook: <a href="mailto:michaelhook@comcast.net">
michaelhook@comcast.net</a> </li>
<li>Coach Patti Drake: <a href="mailto:jpdrake@comcast.net">
jpdrake@comcast.net</a> </li>
<li>General Information:
<a href="mailto:explosionbasketball@comcast.net">
</a> </li>
</ul>
</li>
</ul>

</body>
</html>

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

by **Don_HH2K** » Tue 18 Mar, 2008 9:37 pm

I've found that FrontPage's style generator often overrides whatever I tell it to do. Ideally you'd place a <center> directly after the <body> tag and a </center> directly before the </body> tag. It doesn't look like you have any custom tags or CSS that would take over alignment, so it's possible that if modifying the code as follows doesn't work properly, FrontPage is taking over for you.

Code: Select all: <html> ... <body> <center> ... </center> </body> </html>

If that's the case, try selecting everything (in the visual designer) and setting the alignment options to "Center".

UserAgent: Mozilla/5.0 (compatible; Konqueror/3.5; Linux) KHTML/3.5.7 (like Gecko) SUSE

by **webladylisa** » Mon 28 Sep, 2009 3:36 pm

Can someone please tell me exactly how to make IE browsers center this page? http://www.edenvillanevis.org/index.html along with all of the other pages on that site.
My client is very adamant about this & I'm tearing my hair out trying to get this fixed. I'm using an older copy of Coffee Cup Html & I'm not happy with that program. The original plan was to use Adobe but I lost those program files when I rebuilt my entire computer (long story). I don't want to have to rebuild the whole site just to resolve this issue, but i'm really at my wits end here. Please help!

UserAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; InfoPath.1; .NET CLR 2.0.50727)

by **compfreak1523** » Tue 24 Nov, 2009 9:02 pm

The suggestions I see here work for those who use html a lot but I build all of my websites with nothing more than paint and notepad and all organization is done with CSS. I've tested this out with a couple of resolutions but it doesn't work. Any ideas?

Code: Select all: body{ background-color:#1D3403; margin-right:25%; margin-left:25%; margin-top:10px }

Also I use Google Chrome to test it so it may be a factor.
Also for post above me I clicked on the link and it was centered for me. I tried to read the source code but it was cluttered with html creating junk.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.33 Safari/532.0

by **hwood71** » Mon 25 Jan, 2010 10:21 am

HI
Like Chuber, I really have no experience in writing code. I have tried the <center> thing and it does seem to work for me. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.style1 {
font-size: 500pt;
color: #000000;
font-family: "Bell MT";
}
.style2 {
font-size: 210pt;
color: #000000;
font-family: "Bell MT";
}
.style3 {
color: #000000;
font-size: 16pt;
text-align: left;
}
.style4 {
font-family: "Bell MT";
}
.style5 {
font-size: 20pt;
}
.style6 {
font-size: 13pt;
}
</style>
</head>

<body style="background-color: #FFA000">

<div style="position: absolute; width: 279px; height: 705px; z-index: 1; left: 249px; top: 33px" id="layer1" class="style1">
P</div>
<div style="position: absolute; width: 149px; height: 100px; z-index: 3; left: 403px; top: 222px" id="layer3" class="style3">
<span class="style4"><span class="style5">Construction</span><br />
</span><font size="3" class="style6"><span class="style4">Rolling Meadows<br />
Kingston, NY 12401<br />
845-555-1212</span></font></div>
<div style="position: absolute; width: 395px; height: 175px; z-index: 2; left: 488px; top: 358px" id="layer2" class="style2">
agani</div>

</body>

</html>
Any suggestions would be great. I think I heard someone say something about"absolute" positioning, but as I said I know nothing.

UserAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.3; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)

by **compfreak1523** » Mon 25 Jan, 2010 6:14 pm

Hey. I actually found a solution to it all. You can make a divider encasing the entire site in html code and then write this in css:

#div{
margin-right: auto;
margin-left: auto;
}

Where div is write the name of the divider. This worked for all of my new sites and I hope it works for all of you!

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.38 Safari/532.0

by **Flober** » Tue 09 Feb, 2010 1:41 pm

According to html tutorials you should try the next

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.l" xml:lang="en" lang="en" >
< head >
< title>center web page example</title>
< meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" / >
< link rel="stylesheet" href="style.css" type="text/css" media="all" / >
< /head >
< body>
< div id="container" >

YOUR WEBSITE CODE IN HERE

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

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

by **Bathel** » Fri 30 Apr, 2010 10:18 am

Actually, if you're using tables its very easy.

Create a "buffer" column on each side of the table and set each width to 50%.

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="1" width="50%"> </td>
<td>Your center info here</td>
<td colspan="1" width="50%">  </td>
</tr>
</table>

I'm no expert by any means, so maybe that's not the proper way to do it, but it works well for me!

UserAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; msn OptimizedIE8;ENUS)

by **braindead** » Sun 23 May, 2010 10:39 am

I have read, and tried to centre my webpage without success. HTML moves the page to the right side of the screen and I don't have the brain power to use CSS, or at least I mess it up every time.

I have created a page using many layers to ensure that everything stays together, and it does but, it's in the wrong place.
Could someone look at my page code and see if there is a way of getting the job done?

I would be most grateful

Braindead

<html>
<head>
<title>Bellewaarde 1915</title>
<meta name="keywords" content="hooge, bellewaarde, ypres, 16th, june, ww1, world war 1" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body bgcolor="black" text="#cc9933" link="blue" vlink="purple" alink="red">
<div id="layer1" style="background-color:rgb(75,62,17); width:1050px; height:810px; position: absolute; top:30px; z-index:1;">
<div id="layer3" style="background-color:black; width:10px; height:810px; position:absolute; left:200px; top:0px; z-index:1;">
<p> </p>
</div>
<div id="layer2" style="background-color:black; width:1050px; height:120px; position:absolute; left:0px; top:40px; z-index:1;">
<div id="layer4" style="width:200px; height:120px; position:absolute; left:-9px; top:0px; z-index:1;">

<p><a href="welome.htm" target="main"><img src="image/bellewaarde header.jpg" width="589" height="113" border="0" /></a></p>
</div>

<p> </p>
</div>

<div id="layer5" style="width:470px; height:190px; position:absolute; left:580px; top:0px; z-index:1;">
<p align="right"><img src="image/image7.png" width="450" height="157" border="0" /></p>
</div>

<div id="layer7" style="width:840px; height:500px; position:absolute; left:210px; top:210px; z-index:1;">
<p align="center"><iframe name="main" src="welome.htm" frameborder="0" width="800" height="500" id="main"></iframe></p>
</div>
<div id="layer8" style="width:180px; height:549px; position:absolute; left:4px; top:191px; z-index:1;">
<p><iframe name="ifrm2" src="menu%20welcome.htm" frameborder="0" scrolling="no" width="190" height="540" align="left" id="ifrm2"></iframe></p>
</div>
<div id="layer9" style="background-color:black; width:1050px; height:61px; position:absolute; left:0px; top:729px; z-index:1;"></div>

<div id="layer6" style="width:860px; height:40px; position:absolute; left:200px; top:160px; z-index:1;">
<p align="center">
</!--><link href="index-files/styles_oyrm2.css" type="text/css" rel="stylesheet"/>
<style>A#vbUL_oyrm2a{display:none}</style>
<script type="text/javascript"> var vbImgPath="index-files/"</script>
<script type="text/javascript" src="index-files/scoyrm2.js"></script>
<a id="vbul_oyrm2a" href="http://vista-buttons.com">Pull Down Menu Html by Vista-Buttons.com v4.3.0</a>
</!--></p>
</div>
<div id="layer10" style="width:200px; height:30px; position:absolute; left:430px; top:750px; z-index:1;">
<p align="center"><a href="mailto:marshanmedia@bellewaarde1915.co.uk">marshanmedia 2010</a>
</p></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16069086-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>

UserAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; GTB6.4; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET CLR 1.1.4322; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)

how to center my web page???

Need help too!

Nothing is working for IE fix

Centering with CSS

Floating Centering of the web page

Centering a webpage

Who is online