Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Vertical alignment problems.

Fiasco

Fiasco

macrumors regular
Original poster
Dec 1, 2007
121
2
New York, NY, USA
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.
 
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>
 
design-is said:
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>
Click to expand...

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.
 
Fiasco said:
I actually have that html code already for my container table. It still doesn't work.
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

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.
 
For the table tag, instead of using height: 100% you'll need to use a pixel value, e.g., 1000px.
 
angelwatt said:
For the table tag, instead of using height: 100% you'll need to use a pixel value, e.g., 1000px.
Click to expand...

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.
 
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.
 
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)
 
design-is said:
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)
Click to expand...

Thanks. I got it to work the other day.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back