Id like to put a border around my website and have it centered in the middle of the page.

Should i just add a table border to the outermost table?  I tried that but it is too thick.  I am using DW, Fireworks, and Visual Studio.NET.  I would also like to have the page background be a light greyish color but the contents of my site be un-affected.

Cheers!
LVL 6
TheRookie32Asked:
Who is Participating?
 
Havin_itCommented:
Okay, then a little bit of JavaScript will be needed. Here's a function you can place in the head of the document:

<script type="text/javascript">
<!--
function centerDiv(div)
      {
      var obj=document.getElementById(div);
      var pageWidth = document.body.offsetWidth ? document.body.offsetWidth : window.innerWidth;
      if(pageWidth>obj.offsetWidth)
            obj.style.left = ((pageWidth - obj.offsetWidth) /2)+'px';
      else
            obj.style.left='0px';
      }
//-->
</script>
</head>
<body onload="centerDiv('layer1');" onresize="centerDiv('layer1');">

<div id="layer1" style="position:absolute;top:50px;left:0px;width:800px;background-color:#CCCCCC;">

... table here ...

</div>

This dynamically centres the layer when the page is loaded, and when the window is resized (note, however, that 'onresize' isn't a valid HTML 4.01 attribute). If the window is narrower than the table, the table's left edge is set at zero pixels from the left of the window.

Will that suffice?
0
 
Havin_itCommented:
Hi Rookie,

I suggest a CSS-based approach to kill both these birds with one stone. Use a layer to contain the table, then you can give it its own background colour. The questions to be asked first, are:

1 - should the table be centered vertically as well as horizontally?
2 - is the table of fixed dimensions, or a percentage of the page width?

For a table that's horizontally-centered only, and percentage width, the code is very simple:

<div id="layer" style="position:absolute;top:50px;left:20%;width:60%;background-color:#CCCCCC;">

... table code here ...

</div>

Of course you can use percentages for the top and height as well, though results can vary among browsers when you do this.  If you require a fixed-dimension layer to be centered, a wee bit of JavaScript will be required...
0
 
TheRookie32Author Commented:
I would like it to be just a bit off the top of the browser, mainly centered vertically so it is centered on different screen widths...
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Havin_itCommented:
How about the dimensions of the table? Fixed, or percentage of the page width?
0
 
TheRookie32Author Commented:
fixed at 800 pixel width...
0
 
TheRookie32Author Commented:
Yes thanks a lot!  

Is there any way to apply it to all the pages in the document without having to add the code to the top of all the pages?  I only have about 10 so not a big deal...

Should have created a page template when i first started...  i do have my whole page surrounded in a table so if i could apply a style to that it would be cool.  If not ill add the code to the top of each page as that is exactly what i want it to do!  Wonder if i can make the default page a template and it will apply all the styles down the line...
0
 
Havin_itCommented:
Why certainly. You can put the JavaScript in an external file, much like you do with CSS.

Just take everything inside the <script> tag (except the <!-- and //--> bits, you can dump them too) and cut'n'paste them into a separate file, which you save as centerDiv.js or similar (extension _must_ be '.js'). You can open a new JS file from Dreamweaver's New Document menu.

To call the file from each page, just insert this line where you had the original <script> tag:

<script type="text/javascript" src="centerDiv.js"></script>
0
 
TheRookie32Author Commented:
So i hope you still look here at this.. i had another question and was hoping for a similar solution as far as importing the JS from another file but its not as important cause its only in the header which is a user control...

http://www.experts-exchange.com/Web/WebDevSoftware/Q_21394720.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.