U.S. CitiesCity-Data Forum Index
Go Back   City-Data Forum > General Forums > Science and Technology > Computers
 [Register]
Please register to participate in our discussions with 2 million other members - it's free and quick! Some forums can only be seen by registered members. After you create your account, you'll be able to customize options and access all our 15,000 new posts/day with fewer ads.
View detailed profile (Advanced) or search
site with Google Custom Search

Search Forums  (Advanced)
 
Old 08-06-2009, 03:58 PM
 
125 posts, read 700,549 times
Reputation: 88

Advertisements

Can someone PLEASE help me to vertically align my webpage. I've posted the html below. I've done a lot of research on this, but I can't find a straight answer (I've read to that one solution may only satisfy one type of browser). I'm a complete newbie at this, so if someone can tell me what and where to place in my code below, I'd really appreciate it.

<html>
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (site.jpg) -->
<center>
<table id="Table_01" width="1000" height="773" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://www.city-data.com/forum/images/index_01.jpg" width="1000" height="265" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.city-data.com/forum/images/index_02.jpg" width="213" height="508" alt=""></td>
<td><a href="pdf/pdf.pdf"><img src="http://www.city-data.com/forum/images/Link-to-Pdf.jpg" width="573" height="208" border="0"></a></td>
<td rowspan="2">
<img src="http://www.city-data.com/forum/images/index_04.jpg" width="214" height="508" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.city-data.com/forum/images/index_05.jpg" width="573" height="300" alt=""></td>
</tr>
</table>
<center>
<!-- End Save for Web Slices -->
</body>
</html>
Reply With Quote Quick reply to this message

 
Old 08-08-2009, 12:41 PM
 
28,648 posts, read 40,627,244 times
Reputation: 37346
May I ask why this is important? Most surfers are used to having to scroll down a page to see it all. I would think that vertically centering a page would be more confusing than helpful.

The problem(s) you are going to run into are many.

What browser are they using? Probably not so much of a problem as one might think, but I'd wager you'll run into a doozy somewhere in the solution to this question.

What resolution are they using? Anywhere from 640x480 (unlikely) to 1280 x 800 or higher. There is a method by which you can determine their resolution, but how much code are you going to expend on figuring out how to center your page on their screen?

Have they increased or decreased the text size on thier monitor? (Ctrl and scroll the mouse wheel). I do this all the time because my eyes aren't as good as they used to be. In the process of increasing (in my case) the size of the text everything else gets increased as well (sometimes) or moved about to adjust to the changes in text size.

Tough thing to do and I would just let it stay at the top of the page.

If you really want to just move it down then add a number of <p></p> to the top until it's lower on the screen. Centering is not going to happen on all those screens browsing to your page, but it won't be butted against the top, either.

BTW here is some code to get screen resolution. Remove the // from the last line to have it display on your screen.

var width = screen.width;
var height = screen.height;
var d = this.window.document;

//document.write("You're set to "+width+ "X" +height+"");
Reply With Quote Quick reply to this message
 
Old 08-08-2009, 02:23 PM
 
40,304 posts, read 41,850,213 times
Reputation: 16815
Not going to go into detail but vertical alignment usually does not work because the container needs a height besides the issue of what's the height already mentioned. So before you even start to get your table to align vertically use CSS to set the height of the <html> and <body> elements to 100%.


Quote:
html, body {
height: 100%;
}
Now I'm giving away all the tricks I learned.

If you do not know what this piece of code is I'd suggest looking at this CSS tutorial:

CSS Tutorial
Reply With Quote Quick reply to this message
 
Old 08-08-2009, 03:28 PM
 
Location: Wicker Park, Chicago
4,791 posts, read 13,332,510 times
Reputation: 1945
Hey JBower - whatcha trying to do?

Me, I'm learning html, CSS, some Web Design, and messing around with Adobe Web Premium CS4 just to make a FANCY resume website for myself!
Reply With Quote Quick reply to this message
 
Old 08-09-2009, 03:58 PM
 
125 posts, read 700,549 times
Reputation: 88
Quote:
Originally Posted by Tek_Freek View Post
May I ask why this is important? Most surfers are used to having to scroll down a page to see it all. I would think that vertically centering a page would be more confusing than helpful.

The problem(s) you are going to run into are many.

What browser are they using? Probably not so much of a problem as one might think, but I'd wager you'll run into a doozy somewhere in the solution to this question.

What resolution are they using? Anywhere from 640x480 (unlikely) to 1280 x 800 or higher. There is a method by which you can determine their resolution, but how much code are you going to expend on figuring out how to center your page on their screen?

Have they increased or decreased the text size on thier monitor? (Ctrl and scroll the mouse wheel). I do this all the time because my eyes aren't as good as they used to be. In the process of increasing (in my case) the size of the text everything else gets increased as well (sometimes) or moved about to adjust to the changes in text size.

Tough thing to do and I would just let it stay at the top of the page.

If you really want to just move it down then add a number of <p></p> to the top until it's lower on the screen. Centering is not going to happen on all those screens browsing to your page, but it won't be butted against the top, either.

BTW here is some code to get screen resolution. Remove the // from the last line to have it display on your screen.

var width = screen.width;
var height = screen.height;
var d = this.window.document;

//document.write("You're set to "+width+ "X" +height+"");
I'll be honest, most of this is way over my head. And because I'm in a time crunch, I can't take the time to learn it right now. Where exactly would I place the <p></p> in the code above to get some space at the top? Thanks
Reply With Quote Quick reply to this message
 
Old 08-09-2009, 04:56 PM
 
125 posts, read 700,549 times
Reputation: 88
Quote:
Originally Posted by JBower View Post
I'll be honest, most of this is way over my head. And because I'm in a time crunch, I can't take the time to learn it right now. Where exactly would I place the <p></p> in the code above to get some space at the top? Thanks
I was just playing around with this. I set the top margin to about 40, and it gave me a nice background border at the top. I think by doing this and setting my res to a little less than 768 x 1000 that I have found a decent compromise. I'm sure there is code out there to make this thing fit perfectly, but I just haven't learned code yet, so trying to make it work just isn't feasible right now.
Reply With Quote Quick reply to this message
 
Old 08-09-2009, 08:23 PM
 
28,648 posts, read 40,627,244 times
Reputation: 37346
Quote:
Originally Posted by JBower View Post
I was just playing around with this. I set the top margin to about 40, and it gave me a nice background border at the top. I think by doing this and setting my res to a little less than 768 x 1000 that I have found a decent compromise. I'm sure there is code out there to make this thing fit perfectly, but I just haven't learned code yet, so trying to make it work just isn't feasible right now.
Nice work around.

The <P> </P> code would either go just after <head> or just before the start of the table depe3nding on what code might be between the two.

If your idea is working try setting your monitor to different resolutions and see how it looks.
Reply With Quote Quick reply to this message
 
Old 08-10-2009, 01:30 AM
 
Location: Mableton, GA USA (NW Atlanta suburb, 4 miles OTP)
11,319 posts, read 22,745,181 times
Reputation: 3896
Quote:
Originally Posted by Tek_Freek View Post
If your idea is working try setting your monitor to different resolutions and see how it looks.
There's a nice add-on for Firefox that'll let you quickly check a site at various standard sizes by resizing the Firefox window wiht the click of a button:

https://addons.mozilla.org/en-US/firefox/addon/1985

I use this all the time at work for testing the intranet pages I maintain.
Reply With Quote Quick reply to this message
Please register to post and access all features of our very popular forum. It is free and quick. Over $68,000 in prizes has already been given out to active posters on our forum. Additional giveaways are planned.

Detailed information about all U.S. cities, counties, and zip codes on our site: City-data.com.


Reply
Please update this thread with any new information or opinions. This open thread is still read by thousands of people, so we encourage all additional points of view.

Quick Reply
Message:

Over $104,000 in prizes was already given out to active posters on our forum and additional giveaways are planned!

Go Back   City-Data Forum > General Forums > Science and Technology > Computers
Similar Threads
Follow City-Data.com founder on our Forum or

All times are GMT -6.

© 2005-2019, Advameg, Inc. · Please obey Forum Rules · Terms of Use and Privacy Policy · Bug Bounty

City-Data.com - Archive 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35 - Top