how to center my web page???

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

Moderator: Don_HH2K

Postby 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)
chuber
new member
new member
 
Posts: 2
Joined: Tue 30 Oct, 2007 10:11 pm
Location: San Diego

Postby 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)
Laptop: HP Compaq nx6325 - Turion 64 X2 @ 2GHz, 2GB DDR2, 100GB HD, ATI Radeon X300, 15" LCD, Seven Pro
Handheld: Palm Treo 650 - Intel PXA270 @ 312MHz, 10MB RAM, 32MB flash, 2.7" LCD, Palm OS 5.4
User avatar
Don_HH2K
Moderator
Moderator
 
Posts: 5112
Joined: Sun 09 May, 2004 3:59 pm

Postby 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
SillyDog701 Moderator
debian - SeaMonkey - Sylpheed - Opera
User avatar
Edward
Moderator
Moderator
 
Posts: 3709
Joined: Sun 01 Dec, 2002 7:15 pm

Postby 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
Rau71
new member
new member
 
Posts: 1
Joined: Sun 02 Mar, 2008 2:21 pm

Need help too!

Postby 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&nbsp; basketball skills and realize their potential. Working
together&nbsp;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>&nbsp;<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">&nbsp;
</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">&nbsp;
<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&nbsp;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><!--webbot bot="Substitution" s-variable="CompanyPhone" --></li>
</ul>
</li>
<li><strong>FAX</strong> </li>
<li><strong>Postal address</strong>
<ul>
<li><!--webbot bot="Substitution" s-variable="CompanyAddress" --></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">
<!--webbot
bot="Substitution" s-variable="CompanyEmail" --></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)
The WeatherNinja
mphook
new member
new member
 
Posts: 1
Joined: Tue 18 Mar, 2008 9:07 pm

Postby 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
Laptop: HP Compaq nx6325 - Turion 64 X2 @ 2GHz, 2GB DDR2, 100GB HD, ATI Radeon X300, 15" LCD, Seven Pro
Handheld: Palm Treo 650 - Intel PXA270 @ 312MHz, 10MB RAM, 32MB flash, 2.7" LCD, Palm OS 5.4
User avatar
Don_HH2K
Moderator
Moderator
 
Posts: 5112
Joined: Sun 09 May, 2004 3:59 pm

Nothing is working for IE fix

Postby 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)
webladylisa
new member
new member
 
Posts: 1
Joined: Mon 28 Sep, 2009 3:30 pm

Centering with CSS

Postby 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
Last edited by compfreak1523 on Tue 24 Nov, 2009 9:09 pm, edited 1 time in total.
Design with CSS
Tables are for noobs
compfreak1523
new member
new member
 
Posts: 3
Joined: Tue 24 Nov, 2009 8:53 pm

Floating Centering of the web page

Postby 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)
hwood71
new member
new member
 
Posts: 1
Joined: Mon 25 Jan, 2010 10:11 am

Postby 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
Design with CSS
Tables are for noobs
compfreak1523
new member
new member
 
Posts: 3
Joined: Tue 24 Nov, 2009 8:53 pm

Postby 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
Last edited by Flober on Tue 09 Feb, 2010 1:43 pm, edited 2 times in total.
Flober
new member
new member
 
Posts: 2
Joined: Wed 03 Feb, 2010 11:28 am

Postby 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%">&nbsp;</td>
<td>Your center info here</td>
<td colspan="1" width="50%"> &nbsp;</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)
Bathel
new member
new member
 
Posts: 1
Joined: Fri 30 Apr, 2010 10:12 am

Centering a webpage

Postby 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>&nbsp;</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>&nbsp;</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"><!-- Begin Vista-Buttons.com -->
</!--><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>
<!-- End Vista-Buttons.com --></!--></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)
braindead
new member
new member
 
Posts: 1
Joined: Sun 23 May, 2010 10:30 am

Previous

Return to Web Design and Page Coding

Who is online

Registered users: Bing [Bot], Google [Bot]