Centering Website On Visitors Monitor?

jdlev · #1 (**permalink**) 12-03-08, 02:54 PM

I can't figure it out. My backgroun image will stay centered on the page, but the layers on top of it will move around. It throws everything out of wack if someone resizes their window. How do I get a layer to stay located in the exact same place, relative to the background image?

d3web · #2 (**permalink**) 12-03-08, 03:47 PM

I'll usually put my design in a containing div then center it with CSS.

Code:

<div style="width:600px; margin-right:auto; margin-left:auto;">
  ...
  something in here
  ...
</div>

That's the basics. If you need further help, you may have to post the code you're using.

-Dan

jdlev · #3 (**permalink**) 12-03-08, 04:03 PM

Thanks for the help dan...here's the code for the page...

HTML Code:

<body onLoad="if(document.all)
window.external.AddFavorite
 (window.document.location,window.document.title)"
 bgcolor="D1E3ED" link="#003399" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" BOTTOMMARGIN="0">
<div id="Footer" class="Footer" style="position:absolute; left:249px; top:535px; width:513px; height:73px; z-index:1">
  <div align="center">
    <p><span class="Footer"><a href="/Answering-Service/">Answering Service</a> 
      | <a href="/high-volume-call-center/">High Volume Call Center</a> | <a href="/medical-answering-service/">Medical 
      Answering Service</a> | <a href="/call-center/">Call Center</a> | <a href="/call-center-services/">Call 
      Center Services</a> | <a href="/Professionals-Answering-Service/">Professionals 
      Answering Service</a> | <a href="/Answering-Service-Business-Applications/">Answering 
      Service Business Applications</a> | <a href="/call-center-case-studies/">Call 
      Center Case Studies</a> | <a href="http://www.telephoneansweringservice.com">TelephoneAnsweringService.com</a> 
      </span> </p>
  </div>
</div>
    
<div id="TASmaincontent" style="position:absolute; left:267px; top:168px; width:609px; height:187px; z-index:2">
  <h1 align="center"> &quot;Answering the call for excellence 
    among telephone answering services and call centers.&quot;</h1>
  <p align="left"> Searching for an answering service or call 
    center to man the phones 24 hours a day? Look no further than Telephone Answering 
    Service. TAS provides inbound call center support for a multitude of business 
    fields and varying business sizes. Trust the medical answering specialists 
    of Telephone Answering Service that have provided high-quality, reliable call 
    center patient support to medical practices that have been with Telephone 
    Answering Service for over 10 years! Bolster sales by having customers speak 
    with a live operator that can immediately dispatch on call support or complete 
    an online sale. Join other Fortune 500 companies that rely on the communications 
    infrastructure of Telephone Answering Service to handle mission critical projects. 
    Whatever your company, whatever your size, no matter your solution, Telephone 
    Answering Service has the call center expertise to effectively and professionally 
    handle your customer communication requirements. </p>
  <h2 align="center"> Select Your Call Center or Answering Service 
    Solution </h2>
</div>
<div style="position:absolute; left:265px; top:361px; width:611px; height:163px; z-index:3" class="TASsolutions" id="TASsolutions">
  <table width="604" height="143" border="1" cellpadding="1" cellspacing="" align="center">
    <!--DWLayoutTable-->
    <tr> 
      <td width="149" height="139" valign="top">
<div align="left"> 
          <h1 align="center"><a href="/Answering-Services/"><img src="/Images/Answering_Service.jpg" alt="Answering Service" width="149" height="53" border="0"></a> 
            <a href="/Answering-Services/">Answering Service</a></h1>
          <p>Learn about the benefits of partnering with an <a href="/answering-services/">answering 
            service</a> like telephone answering service.com </p>
        </div></td>
      <td width="149" valign="top"><h1 align="center"><a href="/call-center-high-volume/"><img src="/Images/High_Volume_Call_center.jpg" alt="High Volume Call Center" width="149" height="54" border="0"></a> 
          <a href="/call-center-high-volume/">High Volume Call Center</a></h1>
        <p><a href="/call-centers-high-volume/">High volume call centers</a> have 
          special needs. TAS can handle high call or overflow volume from large 
          businesses.</p></td>
      <td width="149" valign="top"><h1 align="center"><a href="/medical-answering-service/"><img src="/Images/medical_answering_service.jpg" alt="Medical Answering Service" width="149" height="53" border="0"></a> 
          <a href="/medical-answering-service/">Medical Answering Service</a></h1>
        <p align="left">A doctor's prescription for patient care success - the 
          <a href="/medical-answering-service/">medical answering services</a> 
          of TAS. Click to learn why.</p>
        </td>
      <td width="149" valign="top"><h1 align="center"><a href="/business-answering-service/"><img src="/Images/business_answering_service.jpg" alt="Business Answering Service" width="149" height="53" border="0"></a> 
          <a href="/business-answering-service/">Business Answering Service</a></h1>
        <p align="left">The <a href="/business-answering-service/">business answering 
          services</a> of TAS provide seamless integration for all types of businesses.</p></td>
    </tr>
  </table>
</div>
<div id="AddThis" style="position:absolute; left:7px; top:154px; width:177px; height:18px; z-index:5"> 
  
</div>

<div align="center"> <img src="/Images/Template.jpg" width="790" height="597"> 
  <map name="Map2">
    <area shape="rect" coords="426,132,490,154" href="/Answering_Services/">
    <area shape="rect" coords="503,133,571,154" href="/Business_Information/about_TAS.html">
    <area shape="rect" coords="583,131,643,154" href="/Business_Information/contact.html">
  </map>
  <map name="Map">
    <area shape="rect" coords="425,131,489,154" href="/answering_service/" target="_blank" alt="answering_services">
  </map>
</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-549206-5");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>

Yeroon · #4 (**permalink**) 12-04-08, 04:34 AM

Ouch... auto bookmark/fav popup = auto go to other website

But just apply the margin attributes suggested by 3dweb to your main divs (Footer, TASmaincontent etc). See what happens

jdlev · #5 (**permalink**) 12-05-08, 06:35 PM

That doesn't work at all, it just sends everything to the left side of the page and centers it?

kezoon · #6 (**permalink**) 12-06-08, 09:55 AM

All I use it stylesheets, make a container div and give it margin: 0 auto; then if that doesnt work for IE you have to put text-align: center in the body tag of the stylesheet. I hate how IE complicates almost anything.

wirehopper · #7 (**permalink**) 12-24-08, 02:44 PM

Code:

<style type="text/css">
body
{
margin-left:auto;
margin-right:auto;
}
</style>

Jambone · #8 (**permalink**) 12-26-08, 07:59 AM

or more simply

Code:

margin: 0 auto;

always works for me

jlhaslip · #9 (**permalink**) 01-05-09, 08:18 PM

Has anyone else noticed that there is some position: absolute in that page which is likely not performing according to the margin: auto ???