How does hotmail do it??? 2

SPYDERIX · Apr 19, 2002

Hi,

I've posted a request for people to view my website, and the one thing that I was told to change, is to make the webpage viewable at 800*600 resolution and 1024*768 resolution.

Now

I was just in my hotmail accoutn and I noticed something. Hotmail looks good at both 800*600 and 1024*768 resolution, and both resolutions go right from the far left to the far right, with no scrolling. I have looked through thteir source code, and they don't use frames yet the page fits the entire screen at both resolutions.

So how did they do that??????????I would like to be able to do that too.

Thanks [deejay]

Nate
"If you're not living on the edge, you're taking up too much space!"

xso · Apr 19, 2002

Hi,

The trick is to put your content within a <table> tag and to have the width attribute set to 100%. Like this, the page will always take 100% of the screen.

I hope this helps.

Cheers,

xso

Boomerang · Apr 19, 2002

xso is right about the table and also right that setting the with attribute to 100% is a possibility to make fill the screen 100%, but that's not the way microsoft did it.

The made a table with 2 rows, each with 3 cells <TD>. The width of these cells are set to 312 - 10 - 375. The background of the right part of the table is white. Because the rest on the right site of the table is white to, it looks like its stretch.

You can easily analyse the code by doing the following:
1) Right click - view source , and save this file on your desktop or in a temporary directory as hotmail.htm
2) As you have the same file as me (I'm redirected to the Dutch hotmail site here) you wil see in the <head>:
<link rel="stylesheet" href="/cgi-bin/dasp/NL/hotmail___904500017.css"> (NL should be your language)
3) search in your Temporary internet files for the file hotmail___904500017.css and copy it on your desktop or in the same directory as hotmail.htm
4) change the <link to <link rel="stylesheet" href="hotmail___904500017.css">
5) Then in your browser do File - Open en browse to your hotmail.htm file and open it.
6) Search in your hotmail.htm file to the first <table and change the border to "1".
7) Now refresh the page and you will see all the cells in the table.

8) try changing other thing in the code and see what happens (analyse it)

Hope this helps,
Erik

<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

Boomerang · Apr 19, 2002

Oops .... :~/ .... I got the wrong site. (I thought you ment the login site instead of the account itself.)

So sorry xso, you where right with the 100%.

But my previous post can still help you to analyse this site to. It works on the same way. You also have to copy the file 'hotmail___904500017.js' and change the path in the line <script language="JavaScript" src="/cgi-bin/dasp/NL/hotmail___904500017.js"></script>

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

SPYDERIX · Apr 19, 2002

Thanks alot xso!!!

Makes sense, didn't think of that. [deejay]

Nate
"If you're not living on the edge, you're taking up too much space!"

Wullie · Apr 19, 2002

Hi all,

You also have to use % for your content, images etc..

Just make sure that you test the site in various resolutions before you launch it as some images look terrible when stretched..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How does hotmail do it??? 2

SPYDERIX

Technical User

xso

Programmer

Boomerang

Programmer

Boomerang

Programmer

SPYDERIX

Technical User

Wullie

Programmer

Similar threads

Part and Inventory Search

Sponsor