Solved

How do I make a custom home-made web page fill the whole of the browser?

Posted on 2008-06-18
4
206 Views
Last Modified: 2013-11-19
I have made this web page using Adobe Photoshop CS2, there seems to be no problems, but when I load the page in IE7 or Firefox, the right part of the page is blank, but nothing is sliced off. So how do I correct this error? I have uploaded the whole web page inclusive of images, so examination may be more in detail. ( Experts Exchange don't allow uploading of HTML files. )

This is very urgent, and help would be greatly appreciated!


Alternate Download URL:
http://www.sendspace.com/file/q63yrv
0
Comment
Question by:Ecelius
  • 2
4 Comments
 
LVL 38

Expert Comment

by:lherrou
ID: 21813346
Ecelius,

Here's the major issue: your design is based around images of a fixed size. To make a scalable website, you have to build a website which uses sections of tiling images or colors to fill areas where the space expands and contracts.

However, if you replace the first few lines of your HTML code with the following, at least your background will match your content area, and your content will be centered.


<html>
<head>
<title>main</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#101010" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (main.psd) -->
<table id="Table_01" width="781" height="601" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto 0 auto;">

Cheers,
LHerrou
0
 

Author Comment

by:Ecelius
ID: 21818617
LHerrou,
Thanks, but when I replaced the snippet at the top of the code, nothing had been centered or changed!

                             
0
 

Accepted Solution

by:
williss earned 125 total points
ID: 21854658
Hi Ecelius,

Did that not at least change the background colour?

What you should have changed (for the background colour) was:

<body bgcolor="#FFFFFF"
to
<body bgcolor="#101010"

For centering everything, you may need to change 2 things to get it to work in the most browsers.

1. as mentioned above, adding the following inside the <table> tag should do it in most up to date browsers style="margin: 0 auto 0 auto;"

2. surrounding the table tags with DIV tags containing centering instrcutions will also do the job in other browsers.

e.g.
<div style="text-align: center">
<table id="Table_01" width="781" height="601" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto 0 auto;">
other stuff in here
</table>
</div>

If you were under the impression that the images you had created would expand to fill the window, that isn't the case unfortunately
0
 

Author Closing Comment

by:Ecelius
ID: 31468347
Thanks williss! You have helped me finish this project at last!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question