Solved

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

Posted on 2008-06-18
4
207 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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 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