THis is the home page of my website. The problem is that when it is viewed from 800x600 screen resolution it is showing nicely. But when it is viewed from a screen with a higher resololution, the whole page is aligned to the left. Please tell the code to align the whole web page in the centre of the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html XMLNS:ASP>
	<head>
		<title>default</title>
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="" name="vs_targetSchema">
		<meta content="Microsoft FrontPage 6.0" name="GENERATOR">
		<meta content="FrontPage.Editor.Document" name="ProgId">
		<meta content="Microsoft Visual Studio.NET 7.0" name="Originator">
		<style fprolloverstyle>A:hover {color: #FF0000; font-style: italic; font-weight: bold}
		</style>
		<script language="javascript" id="clientEventHandlersJS">
<!--
function MARQUEE1_onclick() {

}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MARQUEE1_onclick() {

}

function MARQUEE1_onclick() {

}

//-->

		</script>
	</head>
	<body style="TEXT-ALIGN: center" vLink="#000000" aLink="#000000" link="#000000" bgColor="lightgrey" leftMargin="1" topMargin="1" onload="MM_preloadImages('Images/ro2.jpg')" rightMargin="1" MS_POSITIONING="GridLayout">
		<form id="Form1" style="BACKGROUND-COLOR: #cccccc" method="post" runat="server">
			<TABLE id="Table3" style="Z-INDEX: 102; LEFT: 0px; WIDTH: 782px; POSITION: absolute; TOP: 0px; HEIGHT: 112px" borderColor="#ffffff" cellSpacing="0" cellPadding="0" width="770" border="0">
				<TR>
					<TD style="WIDTH: 773px; HEIGHT: 180px" align="middle" colSpan="3">&nbsp;<SPAN></SPAN><!--webbot bot="Include" U-Include="top.htm" TAG="BODY" startspan -->
						<TABLE id="Table2" style="Z-INDEX: 101; LEFT: 0px; WIDTH: 777px; POSITION: absolute; TOP: -1px; HEIGHT: 182px" cellSpacing="0" cellPadding="0" width="777" border="0">
							<TR>
								<TD vAlign="top" height="110"><IMG style="WIDTH: 772px; HEIGHT: 108px" height="108" src="Images/top.jpg" width="772"><br>
									<B><FONT face="Verdana" size="1"><IMG style="WIDTH: 774px; HEIGHT: 10px" height="10" src="Images/bar.gif" width="774"></FONT></B></TD>
							</TR>
							<TR>
								<TD vAlign="top" align="middle">
									<TABLE id="Table1" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0" cellPadding="0" width="768" border="0">
										<TR>
											<TD style="HEIGHT: 22px" vAlign="center" align="middle" width="100%" bgColor="silver" height="22"><B><FONT face="Verdana" size="1">&nbsp;
														<A class="menu" href="default.htm" target="">Home</A> | <A class="menu" href="c_about_us.htm" target="">
															About Us</A> | <A class="menu" href="c_about_sainik_schools.htm" target="">Sainik 
															Schools </A>| <A class="menu" href="c_admission_procedure.htm" target="">Admission 
															Procedure</A> | <A class="menu" href="SAINIK SCHOOL IMPHAL.pdf" target="">Application 
															Form</A>| <A class="menu" href="c_application_form.htm" target="">Application 
															Details</A>| <A class="menu" href="c_bond_agreement.htm" target="">Bond 
															Agreement</A>| <A class="menu" href="c_correspondence.htm" target="">Correspondence</A>&nbsp;|<A class="menu" href="c_education.htm" target="">
															Education</A>| <A class="menu" href="c_facilities_available.htm" target="">Facilities</A>
														|<A class="menu" href="c_hostel_messing.htm" target=""> Hostel and Messing</A>|<A class="menu" href="c_other_activities.htm" target="">
															Other Activities</A>|<A class="menu" href="c_other_information.htm" target=""> Other 
															Information</A> |<A class="menu" href="c_scholarship.htm" target=""> Scholarship</A>
														|<A class="menu" href="c_withdrawal.htm" target=""> Withdrawal</A> |<A class="menu" href="Dynamicpage/c_adm.aspx" target="">
															Student Detail</A>&nbsp;
														<br>
														|<A class="menu" href="c_faculty.htm" target=""> Faculty</A> |<A class="menu" href="c_photo1.htm" target="_blank">
															Photo Gallery</A> </FONT></B>
											</TD>
										</TR>
									</TABLE>
								</TD>
							</TR>
						</TABLE>
						<MARQUEE style="DISPLAY: inline; Z-INDEX: 103; LEFT: 9px; VISIBILITY: visible; FONT: caption; TEXT-TRANSFORM: capitalize; WIDTH: 763px; COLOR: #3300ff; POSITION: absolute; TOP: 157px; HEIGHT: 22px; BACKGROUND-COLOR: white" scrollAmount="3" id="MARQUEE1" language="javascript" onclick="return MARQUEE1_onclick()"><FONT size="3">Sainik 
								School Imphal (Manipur), India, PIN-795001</FONT></MARQUEE>
						&nbsp; 
						<!--webbot bot="Include" i-checksum="7661" endspan --></TD>
				</TR>
				<TR>
					<TD style="WIDTH: 162px; HEIGHT: 53px; TEXT-ALIGN: center" vAlign="top" align="middle" bgColor="#99cc33" colSpan="3">
						<P align="center">
							<TABLE id="Table4" style="VERTICAL-ALIGN: baseline; WIDTH: 782px; HEIGHT: 39px; TEXT-ALIGN: center" cellSpacing="1" cellPadding="1" width="782" align="center" bgColor="#ff0033" border="2">
								<TR>
									<TD vAlign="center" borderColor="#33cc66" align="middle" bgColor="#ff0033" colSpan="1" rowSpan="1"><STRONG><FONT style="TEXT-ALIGN: center" color="#ffffff"><FONT face="Trebuchet MS"><FONT size="5">PHOTOS 
														OF SCHOOL TOPPERS </FONT><A class="menu" href="toppers.htm" target="_blank"><FONT color="#ffffff" size="5">
															Click Here</FONT></A><FONT size="5"> </FONT></FONT></FONT></STRONG>
									</TD>
								</TR>
							</TABLE>
						</P>
					</TD>
				</TR>
				<TR>
					<TD style="WIDTH: 10px; TEXT-ALIGN: center" vAlign="top" align="middle" bgColor="#99cc33"><A onmouseover="MM_swapImage('ro','','Images/ro2.jpg',1)" onmouseout="MM_swapImgRestore()" href="#"></A>&nbsp;
						<p>
						</p>
					</TD>
					<TD style="WIDTH: 581px" align="middle" bgColor="#99cc33"><P align="center"><IMG src="Images/ssi.jpg"></P>
					</TD>
					<TD style="WIDTH: 155px" align="middle" bgColor="#99cc33"><TABLE id="Table5" style="WIDTH: 165px; HEIGHT: 157px" cellSpacing="0" cellPadding="0" width="165" border="0">
							<TR>
								<TD align="middle"></TD>
							</TR>
							<TR>
								<TD align="middle">
									<TABLE id="Table6" style="FONT: messagebox; WIDTH: 123px; HEIGHT: 249px" cellSpacing="0" cellPadding="0" width="123" border="0">
										<TR>
											<TD style="FONT: caption; COLOR: #ffffff; BACKGROUND-COLOR: #009933" align="middle">Contact 
												Details</TD>
										</TR>
										<TR>
											<TD class="heading" style="COLOR: #ff0033" align="middle" width="128" bgColor="#ffff66" height="21"><B>Phone 
													No<FONT style="BACKGROUND-COLOR: #ffff66" color="#ffff66"> </FONT></B>
											</TD>
										</TR>
										<TR>
											<TD class="txt11" style="COLOR: #ff0033" borderColor="#ffff66" borderColorLight="#ffff66" align="middle" width="128" bgColor="#ffff66" borderColorDark="#ffff66" height="22">09862468237
											</TD>
										</TR>
										<TR>
											<TD width="128" bgColor="#ffff66" height="3">
												<P align="center"></P>
												<P align="center"><FONT face="Verdana, Arial, Helvetica" color="#999999" size="1">-----------------------</FONT></P>
											</TD>
										<TR>
											<TD class="heading" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #ffff66" align="middle" width="128" bgColor="#3399ff" height="18">E-mail:</TD>
										</TR>
										<TR>
											<TD class="txt11" style="COLOR: #009900; TEXT-DECORATION: none" align="middle" width="128" bgColor="#3399ff" height="34"><A href="mailto:ssimphal@hotmail.com">ssimphal@hotmail.com</A></TD>
										</TR>
										<TR>
											<TD class="heading" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #ffff66; HEIGHT: 13px" align="middle" width="128" bgColor="#ff3333" height="13">Postal 
												Address</TD>
										</TR>
										<TR>
											<TD class="txt11" style="COLOR: #ffff66" vAlign="top" align="middle" width="128" bgColor="#ff3333" height="44" rowSpan="4">Principal<BR>
												Sainik School Imphal<BR>
												Post Box No. 21<BR>
												Imphal<BR>
												Manipur,&nbsp;INDIA&nbsp;
												<BR>
												PIN: 795001</TD>
										</TR>
									</TABLE>
									<div align="center"></div>
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
				<TR>
					<TD style="WIDTH: 773px" vAlign="top" align="middle" bgColor="#99cc33" colSpan="3">
						<TABLE id="Table10" style="WIDTH: 745px; HEIGHT: 46px" cellSpacing="0" cellPadding="0" width="745" align="center" border="0">
							<TR>
								<TD style="FONT: caption; COLOR: #ffffff; HEIGHT: 55px" align="middle"><FONT color="#ffcc33" size="3">THE 
										NEW LOOK FOR SAINIK SCHOOL IMPHAL ACADEMIC BLOCK</FONT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</TD>
							</TR>
							<TR>
								<TD style="FONT: caption; COLOR: #ffffff" align="middle">
									<P align="center">Principal's speech on the occassion of Annual Day October7, 2007 <A class="menu" href="c_principal_speech.htm" target="_blank">
											Click Here</A> <IMG height="11" src="Images/new.gif" width="20">
										<br>
										Newsletter April-September 2007<A class="menu" href="c_newsletter.htm" target="_blank">
											Click Here</A><IMG height="11" src="Images/new.gif" width="20"></P>
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
				<TR>
					<TD style="WIDTH: 773px" bgColor="#ccff99" colSpan="3">
						<TABLE id="Table7" style="WIDTH: 783px; HEIGHT: 46px" cellSpacing="0" cellPadding="0" width="783" align="center" border="0">
							<TR>
								<TD align="middle" bgColor="#0066ff">
									<div align="center"><STRONG><FONT color="#ffffff">Website is designed and&nbsp;developed 
												by:
												<BR>
											</FONT><FONT color="#ffff00"><A class="menu" href="developer.htm" target="">Computer 
													Science Dept., Sainik School Imphal</A></FONT></STRONG>
									</div>
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
				<TR>
					<TD style="WIDTH: 773px" bgColor="#ccff99" colSpan="3">
						<TABLE id="Table8" style="WIDTH: 782px; HEIGHT: 38px" cellSpacing="0" cellPadding="0" width="782" align="center" border="0">
							<TR>
								<TD align="middle">
									<div align="center"><FONT color="#cccc00"><FONT color="#3399ff">Hosted By:
												<BR>
											</FONT></FONT><FONT color="#6666ff">National Informatics Centre (NIC), Manipur 
											State Unit, Imphal</FONT>
									</div>
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
				<TR>
					<TD style="WIDTH: 773px" bgColor="#ccff99" colSpan="3">
						<TABLE id="Table9" style="WIDTH: 782px; HEIGHT: 35px" cellSpacing="0" cellPadding="0" width="782" align="center" border="0">
							<TR>
								<TD align="middle">
									<HR>
									<div align="center"><STRONG>Disclaimer:&nbsp; Contents provided by the concerned school 
											authority</STRONG></div>
									<DIV align="center"><STRONG>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
											Best viewed in 800 x 600 screen resolution</STRONG></DIV>
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
			</TABLE>
		</form>
	</body>
</html>

Dani AI

Generated

The page is left-aligned because several top-level layout elements are positioned absolutely and use fixed widths. Absolute positioning (left:0, position:absolute) takes elements out of normal flow and anchors them to the viewport or nearest positioned ancestor, so when the browser window is wider the layout stays stuck to the left. 's left:50% / negative-margin trick and 's centered-table idea can work, but a cleaner and more maintainable approach is to center a single page container and make absolute children position relative to that container.

A minimal, safe fix is to wrap the existing page (the top-level form or table) in a centered container and add a few CSS rules:

<style>
/* put in the page head or an external stylesheet */
#page-wrap {
  width: 782px;       /* keep current design width */
  margin: 0 auto;     /* center the box in the viewport */
  position: relative; /* makes absolute children align to this box */
}
#page-wrap img { max-width: 100%; height: auto; display: block; }
</style>

<div id="page-wrap">
  <!-- place the existing <form>…</form> (or top-level table) here -->
</div>

Notes and troubleshooting: make sure the top-level absolutely positioned elements are inside the #page-wrap so their left/top are relative to it; if not possible, remove or change inline position:absolute; left:0; on those layout tables (set to static or relative). Replace fixed-width images with responsive rules (max-width:100%) so the layout scales. Moving styling into an external stylesheet and avoiding tables for page layout will make future fixes easier.

This addresses the root cause rather than masking it: it centers the entire page reliably across resolutions while preserving existing pixel widths, and it is more robust than relying on negative margins or text-align hacks.

Recommended Answers

All 3 Replies

Hey there, this is the wrong forum really, it should really go in http://www.daniweb.com/forums/forum143.html

However seeing as I'm here now I'll provide some help.

The best way to centre a page I have found in my expereince is to use a little margin/left thing. This goes in your style tags at the top (which to be honest to make your life easier you should move all styling to an external stylesheet but that is another learning hurdle.)

The following style code can be used:

div.Surround {left:50%;margin-left:-391px;position:absolute;width:782px;}

You will also need to surround everything within the <body> tags that needs to be centred with <div class="Surround"></div>

It may require some fiddling but I'm sure you can work it out ;) just ask otherwise.

easiest way to do it is put everything in a table and center the table to the page (page style property -- text:center)

Still I am having problem. Please rewrite the full code. Thank you for ur help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.