Centering site! Rargh!

**Minimal** · 01-24-2008, 04:01 AM

Hi I've read other posts but can't get it to work for mine (centering that is). Here's my code, probably excessive info in it but not sure what I'd take to simplify (semi-rookie). Made with an old version of DreamWeaver. Anybody PLEASE??

<html>
<head>
<title>Mason Real Estate Agent, Comox Valley Real Estate, Courtenay, Residential homes for sale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

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.0
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 && document.getElementById) x=document.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];}
}
//-->
</script>
</head>
<body text="#000000" onLoad="MM_preloadImages('file:///C|/Documents%20and%20Settings/Defiant%20Designs/My%20Documents/masonwalker2/button_valley_roll.jpg')" link="#000000" vlink="#000000" alink="#000000" background="file:///C|/Documents%20and%20Setting...t_gray_005.gif" bgcolor="#000000">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px"><img src="file:///C|/Documents%20and%20Setting...ater_cut_b.jpg" width="780" height="870">
<div id="Layer12" style="position:absolute; width:500px; height:484px; z-index:11; left: 212px; top: 269px">
<p align="center"><b><font size="3" face="Arial, Helvetica, sans-serif">Welcome
To My Website</font></b><font size="2" face="Arial, Helvetica, sans-serif"><br>
</font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">I specialize
in single family homes,</font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">I take
great pride in my work ethic<br>
</font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">Have a
look through </font><font face="Arial, Helvetica, sans-serif" size="2"></font></p>
<p align="left"> </p>
</div>
<div id="Layer11" style="position:absolute; width:127px; height:31px; z-index:10; left: 23px; top: 530px"><a href="contact" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','file:///C|/Documents%20and%20Settings/Defiant%20Designs/My%20Documents/masonwalker2/button_contact_roll.jpg',1)" target="_self"><img name="Image11" border="0" src="button_contact.jpg" width="123" height="32"></a></div>

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

**bigfreak** · 01-24-2008, 07:47 AM

i'm not sure about the centering code, but i don't think your images will show up when you put the site online.

"file:///C|/Documents%20and%20Setting...t_gray_005.gi " will try to pull the image from your machine, i'd change that. Make an images folder and put them in there.

Change the link to the image to read "images/filename.gif"

i'm sure you'll get an answer to your question later today.

**Minimal** · 01-24-2008, 01:16 PM

Yeah I know about that image, I just forgot to fix that. Thanks though.

**LadynRed** · 01-24-2008, 04:20 PM

First, get rid of all the position:absolutes, that's ONE problem right there.

Second, put a proper DOCTYPE on your pages - this is critical !

Third - do a search here for centering - this question gets asked ALLLLL the time.

**Minimal** · 01-27-2008, 03:14 AM

Thanks for replies so far. Still having trouble. I can't remove the absolutes because the site is made in layers. Here's how it is now: www.masonwalker.ca I've researched every old post, nothing working. This code is closest I've come but still out of wack (at least it does move everything though):

<html>
<head>
<style type="text/css">
#marker {position: absolute; top: 0; left: 50%;}
#container {position: absolute; top: 0; left: -50%; width:500px;}
</style>
<body>
<div id="marker">
<div id="container">
Website content here
</div></body>
</html>

THANKS in advance!! again

**LadynRed** · 11:47 AM

Quote:

I can't remove the absolutes because the site is made in layers

Hogwash... and they are not 'layers'. There is no reason to use absolutes to achieve a layout with DIVS and CSS. This is a huge mistake that newbies make because 1 - they use Dreamweaver, and 2 - because they haven't yet learned to use the normal document flow and floats.

Centering with CSS is very simple - WITHOUT the absolutes:
http://www.bluerobot.com/web/css/center1.html
http://maxdesign.com.au/presentation/center/

**Minimal** · 01-27-2008, 03:41 PM

Okay I get where you're coming from. I really don't know the fundamentals true, but I'm only concerned about this one site working (I don't plan on being a web designer, and this site is already done in Dreamweaver). I read all of the links and tried for a long time to implement all of it to no avail.
The container code that I posted before seems to almost work. When I use values of 12% it centers in my screen 1024*768 but still wrong in 800*600 (margin of 12% on left). Point is it is shifting things properly just not to the right place.
There must be a way to change these values or minor editing in this code to make it work! Yes I know I'm a freakin idiot and approaching this the wrong way but the other ways get me nowhere. THANKS and I do appreciate the replies.

**chrishirst** · 01-27-2008, 05:48 PM

margin:0 auto;

**Minimal** · 01-28-2008, 12:35 AM

Okay its come to this haha: I've tried everything and I'm sick of it so.... I will mail a certified cheque of a whopping $50 to whoever can fix my code so that it works centered in the most common browsers at different resolutions. I dont care how you do it! Test it on your own comp if possible, you can repost the code here in full (cuz I don't know where to put stuff) with changes highlighted and removals noted so that I can apply it to all pages. I will contact you and mail you the $ so leave your email. You'll be able to see my code once my site is fixed. Thanks!! I'll leave you all alone now

........ heres my code as of now:

<html>
<head>
<title>Mason Walker, Real Estate Agent, Comox Valley Real Estate, Courtenay, Residential homes for sale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

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.0
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 && document.getElementById) x=document.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];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('button_home_roll.jpg','b utton_biography_roll.jpg','button_buyers_roll.jpg' ,'button_sellers_roll.jpg','button_listings_roll.j pg','file:///C|/Documents%20and%20Settings/Defiant%20Designs/My%20Documents/masonwalker4/button_valley_roll.jpg','button_calculator_roll.jp g','button_financing_roll.jpg','button_links_roll. jpg','button_contact_roll.jpg')" link="#000000" vlink="#000000" alink="#000000">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px"><img src="background_comoxwater_cut_b.jpg" width="780" height="870">
<div id="Layer12" style="position:absolute; width:500px; height:521px; z-index:11; left: 212px; top: 268px">
<p><a href="http://www.mls.ca/" target="_blank">Multiple Listing Service (MLS)</a><br>
</p>
<p><a href="http://www.oceanpacificrealty.com/li...acific_realty/" target="_blank">RE/MAX
Ocean Pacific Realty Listings</a></p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="Layer11" style="position:absolute; width:127px; height:31px; z-index:10; left: 23px; top: 530px"><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','button_con tact_roll.jpg',1)" target="_self"><img name="Image11" border="0" src="button_contact.jpg" width="123" height="32"></a></div>
<div id="Layer10" style="position:absolute; width:127px; height:28px; z-index:9; left: 23px; top: 500px"><a href="links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','button_lin ks_roll.jpg',1)" target="_self"><img name="Image20" border="0" src="button_links.jpg" width="123" height="32"></a></div>
<div id="Layer9" style="position:absolute; width:127px; height:28px; z-index:8; left: 23px; top: 470px"><a href="financing.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','button_fin ancing_roll.jpg',1)" target="_self"><img name="Image19" border="0" src="button_financing.jpg" width="123" height="32"></a></div>
<div id="Layer8" style="position:absolute; width:127px; height:31px; z-index:7; left: 23px; top: 440px"><a href="calculator.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','button_cal culator_roll.jpg',1)" target="_self"><img name="Image18" border="0" src="button_calculator.jpg" width="123" height="32"></a></div>
<div id="Layer7" style="position:absolute; width:126px; height:32px; z-index:6; left: 23px; top: 380px"><a href="listings.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','button_lis tings_roll.jpg',1)" target="_self"><img name="Image16" border="0" src="button_listings.jpg" width="123" height="32"></a></div>
<div id="Layer6" style="position:absolute; width:122px; height:34px; z-index:5; left: 23px; top: 350px"><a href="sellers.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','button_sel lers_roll.jpg',1)" target="_self"><img name="Image15" border="0" src="button_sellers.jpg" width="123" height="32"></a></div>
<div id="Layer5" style="position:absolute; width:132px; height:31px; z-index:4; left: 23px; top: 320px"><a href="buyers.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','button_buy ers_roll.jpg',1)" target="_self"><img name="Image14" border="0" src="button_buyers.jpg" width="123" height="32"></a></div>
<div id="Layer4" style="position:absolute; width:127px; height:31px; z-index:3; left: 23px; top: 290px"><a href="biography.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','button_bio graphy_roll.jpg',1)" target="_self"><img name="Image13" border="0" src="button_biography.jpg" width="123" height="32"></a></div>
<div id="Layer2" style="position:absolute; width:126px; height:29px; z-index:2; left: 23px; top: 260px"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','button_hom e_roll.jpg',1)" target="_self"><img name="Image12" border="0" src="button_home.jpg" width="123" height="32"></a></div>
<div id="Layer3" style="position:absolute; width:127px; height:30px; z-index:1; left: 23px; top: 410px"><a href="valley.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','file:///C|/Documents%20and%20Settings/Defiant%20Designs/My%20Documents/masonwalker4/button_valley_roll.jpg',1)" target="_self"><img name="Image17" border="0" src="button_valley.jpg" width="123" height="32"></a></div>
</div>
</body>
</html>

**chrishirst** · 01-28-2008, 04:42 AM

it will NEVER EVER centre properly UNTIL all the inline position absolutes have been REMOVED.