• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

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

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
Ecelius
Asked:
Ecelius
  • 2
1 Solution
 
lherrouCommented:
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
 
EceliusAuthor Commented:
LHerrou,
Thanks, but when I replaced the snippet at the top of the code, nothing had been centered or changed!

                             
0
 
willissCommented:
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
 
EceliusAuthor Commented:
Thanks williss! You have helped me finish this project at last!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now