PDA

View Full Version : Center aligning an entire page



mjr49
Feb 23rd, 2010, 10:14 PM
I've recently attempted to convert a page from tables to layers. When the page used tables I was able to center the entire page in any browser. After converting to layers I can't seem to achieve this. Help!




<style type="text/css">
<!--
.style4 {font-family: "Gill Sans"; font-size: 20px; }
.style6 {font-family: "Gill Sans"; font-size: 14px; }
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

.style7 {font-size: 13px}
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.style9 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style10 {font-family: Tahoma}
.style11 {font-family: Arial, Helvetica, sans-serif}
.style12 {font-family: Arial, Helvetica, sans-serif; font-size: 20px; }

#Layer1 {
position:absolute;
width:780;
height:15px;
z-index:1;
float: right;
background-color: #000000;
top: 280px;
left: 183px;
overflow: hidden;
clip: rect(auto,auto,auto,50); }

}
-->
</style>
</head>
<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-9947165-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- End ImageReady Slices -->

<div id="Layer2" style="position: absolute; left: 193px; top: 0px; width: 125px; height: 40px; z-index: 1"><a href="index.html"><img src="images/consultancy-button.gif" alt="" width="125" height="40" border="0" /></a></div>
<div id="Layer3" style="position: absolute; left: 318px; top: 0px; width: 128px; height: 40px; z-index: 2"><a href="consulting.html"><img src="images/training-button.gif" alt="" width="128" height="40" border="0" /></a></div>
<div id="Layer4" style="position: absolute; left: 446px; top: 0px; width: 130px; height: 40px; z-index: 3"><a href="training_mentoring.html"><img src="images/auditing-button.gif" alt="" width="130" height="40" border="0" /></a></div>
<div id="Layer5" style="position: absolute; left: 576px; top: 0px; width: 130px; height: 40px; z-index: 4"><a href="auditing.html"><img src="images/coding-button.gif" alt="" width="130" height="40" border="0" /></a></div>
<div id="Layer6" style="position: absolute; left: 706px; top: 0px; width: 137px; height: 40px; z-index: 5"><a href="coding.html"><img src="images/our-team-button.gif" alt="" width="137" height="40" border="0" /></a></div>
<div id="Layer7" style="position: absolute; left: 843px; top: 0px; width: 133px; height: 40px; z-index: 6"><a href="contact.html"><img src="images/contact-button.gif" alt="" width="133" height="40" border="0" /></a></div>
<div id="Layer8" style="position: absolute; left: 193px; top: 40px; width: 778px; height: 1px; z-index: 7"><img src="images/subpage2_-10.gif" width="778" height="1" alt="" /></div>
<div id="Layer9" style="position: absolute; left: 193px; top: 285px; width: 782px; height: 8; z-index: 8; background: #CCCCCC; vertical-align: middle; background-color: #E7E5E6;"></div>
<div id="Layer10" style="position: absolute; left: 183px; top: 44px; width: 469px; height: 227px; z-index: 9"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="469" height="227">
<param name="movie" value="flash/apples.swf">
<param name="quality" value="high">
<param name="SCALE" value="exactfit">
<embed src="flash/apples.swf" width="469" height="227" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="exactfit"></embed>
</object>
</div>
<div id="Layer11" style="position: absolute; left: 654px; top: 44px; width: 331px; height: 227px; z-index: 10"><img src="images/logo.gif" alt="logo" width="331" height="227"></div>
<div id="Layer12" style="position: absolute; left: 985px; top: 303px; width: 1px; height: 2px; z-index: 11"><img src="images/subpage2_-14.jpg" width="1" height="2" alt="" /></div>
<div id="Layer13" style="position: absolute; left: 215px; top: 305px; width: 738px; height: 188px; z-index: 12; text-align: left"><p class="style12"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="520" height="26">
<param name="movie" value="flash/contact_strap.swf">
<param name="quality" value="high">
<embed src="flash/contact_strap.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="520" height="26"></embed>
</object>
</p>
<p class="style6"><span class="style10"><span class="style11"><span class="style7"><strong>maxwell stanley consulting</strong> is committed to providing clients with expert services in all areas of Clinical Coding, from strategic and organisational management to backlog coding.</span></span></span></p>
<p class="style8">The <strong>m.s.c</strong> team of directly employed clinical coding consultants are NHSIA Accredited Clinical Coders, TAP Approved Trainers and Approved Clinical Coding Auditors. Our management team are experienced in the restructure and organisational change within Clinical Coding departments, including implementation and development of Clinical Coding teams.</p>
<p class="style8"><strong>m.s.c</strong>&rsquo;s key objective is to help ensure the quality of information, which drives a health care organisation's ability to manage revenue, comply with regulations, improve quality of patient care and manage resources effectively.</p>
</div>
<div id="Layer14" style="position: absolute; left: 193px; top: 573px; width: 782px; height: 8; z-index: 13; background-color: #E7E5E6; layer-background-color: #E7E5E6;">
<div id="layer" style="position: absolute; left: 193px; top: 285px; width: 782px; height: 7px; z-index: 8; background: #CCCCCC; vertical-align: middle; background-color: #E7E5E6;"></div>
</div>
<div id="Layer15" style="position: absolute; left: 181px; top: 597px; width: 12px; height: 3px; z-index: 14; vertical-align: middle"><img src="images/spacer.gif" width="12" height="1" alt="" /></div>
<div id="Layer16" style="position: absolute; left: 193px; top: 597px; width: 21px; height: 3px; z-index: 15; vertical-align: middle"><img src="images/spacer.gif" width="21" height="1" alt="" /></div>
<div id="Layer17" style="position: absolute; left: 215px; top: 597px; width: 99px; height: 3px; z-index: 16; vertical-align: middle"><img src="images/spacer.gif" width="99" height="1" alt="" /></div>
<div id="Layer18" style="position: absolute; left: 318px; top: 597px; width: 128px; height: 3px; z-index: 17; vertical-align: middle"><img src="images/spacer.gif" width="128" height="1" alt="" /></div>
<div id="Layer19" style="position: absolute; left: 446px; top: 597px; width: 130px; height: 3px; z-index: 18; vertical-align: middle"><img src="images/spacer.gif" width="130" height="1" alt="" /></div>
<div id="Layer20" style="position: absolute; left: 576px; top: 597px; width: 130px; height: 3px; z-index: 19; vertical-align: middle"><img src="images/spacer.gif" width="130" height="1" alt="" /></div>
<div id="Layer21" style="position: absolute; left: 706px; top: 597px; width: 137px; height: 3px; z-index: 20; vertical-align: middle"><img src="images/spacer.gif" width="137" height="1" alt="" /></div>
<div id="Layer22" style="position: absolute; left: 843px; top: 597px; width: 110px; height: 3px; z-index: 21; vertical-align: middle"><img src="images/spacer.gif" width="110" height="1" alt="" /></div>
<div id="Layer23" style="position: absolute; left: 953px; top: 597px; width: 23px; height: 3px; z-index: 22; vertical-align: middle"><img src="images/spacer.gif" width="23" height="1" alt="" /></div>
<div id="Layer24" style="position: absolute; left: 976px; top: 597px; width: 9px; height: 3px; z-index: 23; vertical-align: middle"><img src="images/spacer.gif" width="9" height="1" alt="" /></div>
<div id="Layer25" style="position: absolute; left: 985px; top: 597px; width: 1px; height: 3px; z-index: 24; vertical-align: middle"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
<div id="Layer26" style="position: absolute; left: 181px; top: 0px; width: 1px; height: 600px; z-index: 25"><!-- ImageReady Slices (index.psd) -->
</div>
</div>
</body>
</html>

Nightfire
Feb 23rd, 2010, 10:35 PM
You'll find it hard to center align that, when everything is positioned absolutely.

Excavator
Feb 23rd, 2010, 11:57 PM
Hello mjr49,
To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto


In your case it would be easiest to wrap the entire site in a containing div, make it position relative and give it a width that will fit your site.
Something like this -
<!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>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
* {
margin: 0;
padding: 0;
}
#container {
height: 600px; /*this is just for demonstration*/
width: 800px; /*or however wide your site is*/
margin: 30px auto;
position: relative;
background: #999;
}
</style>
</head>
<body>
<div id="container">
<!--your website here-->
<!--end container--></div>
</body>
</html>

note - by making #container relative, your absolute positioning will now take it's measurments from #container instead of the body of the document. Some or all positioning may need adjusted to account for that.

When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.
You can go back and add them into your original post.

mjr49
Feb 24th, 2010, 05:57 PM
Thank you that's extremely useful. I'm a beginner at all this! I'll try it tonight and hopefully it'll resolve the issue.

monkey186
Apr 5th, 2011, 04:47 AM
Thanks from me too, the solution helped to deal with multiple absolute position elements, works 100%.