Photoshop Question posted in
The official user guide can be found here.

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

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

  1. I’d like to center the entire site, it is now stuck to the left side of the screen.

  2. 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>
Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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?

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search