PDA

View Full Version : Page Centering for all resolutions


hughveal
01-26-2011, 07:37 PM
I built a website a few years ago that looked fine in the resolution I was using on the machine I created it with. When I go to the site though, it is off center in several places and I am not sure how to fix it. The code is posted below. Any suggestions would be helpful. To look and see how it displays visit: http://www.womeninchristunited.org. (Please don't judge me, I am new to this.)
================================================== ======

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

<head>
<title>Women In Christ United - Home Page</title>
<style type="text/css">

div.nav{position:absolute;
left:525px;
top:50px;
right:0px;
bottom:0px;
height:146px;
width:580px;}

div.slide{position:absolute;
left:550px;
top:200px;}

div.lcontent{position:absolute;
left:310px;
top:650px;
right:0px;
bottom:0px;
height:612px;
width:400px;
background-image: url(assets/LeftContent.png)}

div.rcontent{position:absolute;
left:700px;
top:650px;
right:0px;
bottom:0px;
height:612px;
width:400px;
background-image:url(assets/RightContent.png)}
div.below{position:absolute;
left:310px;
top:1313px;}

body{Background-color:gray;
background-image:url(assets/Backgroundhp2e3.png);
background-repeat:no-repeat;
background-position:top center;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body style="text-align:center">


<div id="container">

<div class="nav"><p> <img name="NavWHOLE" src="../../Women In Christ United - Site/assets/NavWHOLE.jpg" width="580" height="146" border="0" id="NavWHOLE" usemap="#m_NavWHOLE" alt="" />
<map name="m_NavWHOLE" id="m_NavWHOLE">
<area shape="rect" coords="457,111,568,130" href="http://www.womeninchristunited.org/events.html" title="Event Calendar link" alt="Event Calendar link" />
<area shape="rect" coords="293,111,444,130" href="http://www.womeninchristunited.org/contactus.html" title="Contact Us Link" alt="Contact Us Link" />
<area shape="rect" coords="182,111,278,130" href="http://www.womeninchristunited.org/crusade.html" title="Crusade Link" alt="Crusade Link" />
<area shape="rect" coords="8,111,168,130" href="http://www.womeninchristunited.org/newsletter.html" title="Newsletter Link" alt="Newsletter Link" />
<area shape="rect" coords="430,12,563,31" href="http://www.womeninchristunited.org/cookbook.html" title="Cookbook Link" alt="Cookbook Link" />
<area shape="rect" coords="256,12,385,31" href="http://www.womeninchristunited.org/bookclub.html" title="Book Club Link" alt="Book Club Link" />
<area shape="rect" coords="101,12,204,31" href="http://www.womeninchristunited.org/aboutus.html" title="About Us Link" alt="About Us Link" />
<area shape="rect" coords="12,12,72,31" href="http://www.womeninchristunited.org/index.html" title="Home Page Link" alt="Home Page Link" />
</map>
</p></div>
<div align="center"><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>



</div>
<div class="slide">
<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="542" height="174" title="Slideshow">
<param name="movie" value="assets/HPslide2.swf" />
<param name="quality" value="high" />
<embed src="assets/HPslide2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="542" height="174"></embed>
</object>
</div>
<div class="lcontent"><p align="center">
<br/>
<img src="assets/Feature-header.png" />
<br/>
<a href="http://www.womeninchristunited.org/newsletter2.html">
<img src="assets/Sisterlogofinal.png" />
</a>
<br/>
<br/>
<br/>
<br/>
<a href="http://www.womeninchristunited.org/bookclub.html">
<img src="assets/bookclublinkfinal.png" /></a>
<br/>
<br/>
<br/>
<br/>
<a href="http://www.womeninchristunited.org/cookbook.html">
<img src="assets/cookbooklinkfinal2.png"/></a>
</p></div>
<div class="rcontent"><p align="center"><br/><img src="assets/EventCalendar-header.png" /><br/>
<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="250" height="250" title="Event Calendar">
<param name="movie" value="assets/EventCalendar.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="assets/EventCalendar.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
<br/>
<br/>

<a href="http://www.womeninchristunited.org/bookclub.html">
<img src="assets/botmJan09withheader.png"/></a></p></div>

<div class="below">
<img src="assets/Bottom.png" width="800" height="198" /> </div>
</div>
</body>
</html><script><!--
var jv=1.0;
//--></script>
<script language=Javascript1.1><!--
jv=1.1;
//--></script>
<script language=Javascript1.2><!--
jv=1.2;
//--></script>
<script language=Javascript1.3><!--
jv=1.3;
//--></script>
<script language=Javascript1.4><!--
jv=1.4;
//--></script>
<script><!--
function SiteStats_2616(){
var t=new Date();
var o='o='+t.getTimezoneOffset()+';';
t=t.getTime();
var isNN4=(document.layers)?true:false;
var isCSS=(document.all)?true:false;
var t='t='+t+';';
var b='b='+(isCSS?(document.body.clientWidth+'x'+docum ent.body.clientHeight):isNN4?(innerWidth+'x'+inner Height):'')+';';
var s='s='+(isCSS||isNN4?(screen.width+'x'+screen.heig ht):'')+';';
var c='c='+(isCSS||isNN4?screen.colorDepth :'')+';';
var j='j='+jv+';'
var p='p='+escape(location.href)+';';
var r='r='+escape(document.referrer)+';';
var u='http://www.womeninchristunited.org/cgi-bin/sitestats.gif?'+t+b+s+c+j+o+p+r;
document.write('<img src='+u+' width=1 height=1 style="position:absolute">');
var f='var e=new Date();e=e.getTime();var I=new Image(1,1);I.src="'+u+'e="+e+";";';
window.onunload=new Function(f);
setTimeout('alive_2616("'+u+'")',0x249F0);
}
function alive_2616(u){
var e=new Date();var I=new Image(1,1); I.src=u+'alive=1;t='+e.getTime(); setTimeout('alive_2616("'+u+'")',0x249F0);
}
SiteStats_2616();
//--></script><noscript><img src=http://www.womeninchristunited.org/cgi-bin/sitestats.gif?p=http%3A%2F%2Fwww.womeninchristunit ed.org%2Findex.html;r=-; width=1 height=1></noscript>

edbr
01-27-2011, 01:13 AM
you are using absolue positioning so it will always reference is starting points so to speak. use a relative positioned wrapper to put your site in , give it dimensions and set left and right margins to auto

hughveal
01-27-2011, 03:35 PM
Thank you for the info. I am going to give your advice a try this weekend, and if I see anything weird, I will post a follow up question or two. Is that OK with you?

edbr
01-28-2011, 01:07 AM
of course no problem