HTML-CSS Layout to center entire website and freeze a menu

Question

So I generated a website from Photoshop and sliced it for web...I'm trying to figure out some CSS styling now.

I'd like to center the entire site, it is now stuck to the left side of the screen.
Id also like to make the menu freeze or hover as you scroll down the page.

I know i'm noobbing it up, its been forever since iv'e done this.

Thanks for your help!!!!

3 Here's the code.

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_01.gif" width="1000" height="516" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_02.gif" width="44" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHEN-&-WHERE.gif" width="190" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_04.gif" width="84" height="29" alt=""></td>
        <td colspan="3">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_05.gif" width="142" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_06.gif" width="116" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_07.gif" width="128" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_08.gif" width="108" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHAT-TO-DO.gif" width="158" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_10.gif" width="30" height="29" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_11.gif" width="1000" height="839" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_12.gif" width="324" height="158" alt=""></td>
        <td colspan="5">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_13.gif" width="380" height="158" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_14.gif" width="296" height="275" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_15.gif" width="318" height="117" alt=""></td>
        <td colspan="6">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_16.gif" width="386" height="117" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_17.gif" width="1000" height="893" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_18.gif" width="1000" height="1416" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_19.gif" width="1000" height="245" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_20.gif" width="107" height="86" alt=""></td>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_21.gif" width="345" height="86" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_22.gif" width="48" height="86" alt=""></td>
        <td colspan="4">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_23.gif" width="432" height="86" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_24.gif" width="68" height="86" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_25.gif" width="1000" height="243" alt=""></td>
    </tr>
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_26.gif" width="1000" height="1218" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="spacer.gif" width="44" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="63" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="127" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="128" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="40" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="76" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="128" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="108" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="120" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="38" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="30" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

It certainly *looks* like "it's been forever;" please, stop: take a moment and have a look at this question: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. — David Thomas, Mar 31 '14 at 17:41
Also (and I'm sorry, but this looks like an important site to you, or at least to someone): it's "registry," not "registery" (which isn't a word at all). — David Thomas, Mar 31 '14 at 17:56

James Martin-Davies · Answer 1 · 2014-03-31T18:05:14.913

Try adding margin:0 auto; to your inline HTML style.

<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box" style="margin:0 auto;">

Margins have four different options you can pass it. margin:0; means there will be no margin around the element, whereas 'margin:0 auto; applies 0 margin to the top and bottom of your element, but auto aligns your element left and right horizontally.

Though, margin:0 auto; can look like the following (remember I said margins had four options?)

#Table_01 {
  margin:0 auto 0 auto;
}

It goes it order of top, right, bottom and left.

score 0 · Answer 2 · answered Mar 31 '14 at 17:40

Use CSS to style it.

You can do it externally or inline:

CSS externally

#Table_01 {
    margin: 0 auto;
}

CSS inline

<table id="Table_01" style="margin: 0 auto;" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">

As regards your menu issue you will need to explain further as I do not follow what your issue is?

score 0 · Answer 3 · answered Mar 31 '14 at 17:48

Try to add inline or external CSS in the table margin:0 auto; width:960px. I suggest you to set width:960px because its best resolution size, which works in all browser as well as its shows proper on all the screens.

And to make the menu freeze or hover as you scroll down the page, you have to read jquery or javascript.

score 0 · Answer 4 · edited May 23 '17 at 12:28

You can wrap the table in a div (just put an open div tag before the table and close it after the closing table tag).

Then use this css. I gave the div the id="wrapper" (actually you don't really need the wrapper, so just the #Table_01 css would work on its own without the div):

#wrapper
{
    width: 100%;
    height: 100%;
}

#Table_01
{
    margin: 0 auto;
}

For the menu sticking to the top you can use jQuery as described here with the JSFidde

HTML-CSS Layout to center entire website and freeze a menu

4 Answers4