Vertical alignment problems.

Discussion in 'Web Design and Development' started by Fiasco, Mar 5, 2009.

  1. Fiasco macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #1
    Hi,

    I've run into a spot of bother with the vertical alignment of my new site. I can't get the site to be vertically centered on the page so regardless of monitor resolution it will stay centered.

    I have tried nesting my layout table inside a "holder" table with height and width set to 100%, and with align="center", valign="center". It doesn't work.

    Any ideas. The site is live so you can see the problem I'm having at www.baresoulphoto.com

    Any ideas?

    Thanks.
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    The first thing you have to hear is "you shouldn't be laying out your pages with tables!"

    Which is true. You should be using CSS. But assuming you don't want to know that, and have no interest in learning CSS and validating your pages, then try the following :)

    HTML:
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
     <tr>
      <td align="center" valign="middle">
    
       <!-- Place the entire web document here for absolute centering -->
    
      </td>
     </tr>
    </table>
     
  3. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #3
    I actually have that html code already for my container table. It still doesn't work.

    I wouldn't even know the first thing about CSS and learning it will take me forever, so I guess I'm stuck with my site at the top of the browser window.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    In your first post you had valign="center" and in design-is's post he uses valign="middle" Did you make sure you tried that?

    I can't check it on my computer because your site is already taller than my entire screen, which also means vertical aligning won't effect too many people.
     
  5. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #5
    Sorry that was a typo in my first post. I do actually have valign="middle" on my page.

    I didn't think it would affect too many people but I've received feedback from quite a few people with larger monitors than the one I used, (1280 x 800 on my macbook) and basically they see the layout stuck to the top of the window then a large white space underneath.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    For the table tag, instead of using height: 100% you'll need to use a pixel value, e.g., 1000px.
     
  7. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #7
    Entering a fixed value simply moves the whole layout down the page to the fixed value, which then means people with "regular" sized monitors have to scroll down to get to the content.

    I am trying to achieve a situation where the layout is centered in the browser window if say, viewed on a 1280 x 800 monitor or a 1920x1200 monitor.
     
  8. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #8
    Hmmm I remember this being a bit tricky back when I started before I learnt CSS. Sometimes it would just not work, for no reason.

    I'll have a better look this afternoon/tomorrow and let you know if I have any thoughts.
     
  9. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #9
    I appreciate that! Thank you.
     
  10. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #10
    Sorry for the delay.

    I think I have found your problem though.

    If you get rid of these bits that don't need to be there:

    HTML:
    <div id="pageWrap">
    <div id="pageCell">
    and

    HTML:
    </div> <!-- end of pageCell--> 
    </div> <!-- End of pageWrap-->
    It should work for you :) (Did for me at least... if not let us know)
     
  11. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #11
    Thanks. I got it to work the other day.
     
  12. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
  13. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #13
    It's only working in internet explorer for some reason. Not in firefox, safari, opera or chrome.
     
  14. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #14
    Oh right... well, if you feel like it, try removing those bits (mentioned above) and that might work for you ;)
     
  15. Fiasco thread starter macrumors regular

    Fiasco

    Joined:
    Dec 1, 2007
    Location:
    New York, NY, USA
    #15
    All set now. Thanks. :)
     

Share This Page