?
Solved

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

Posted on 2008-06-18
4
Medium Priority
?
210 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

777 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