? Autosize/Center Aligning Website for Different Browser Sizes [Archive]

View Full Version : ? Autosize/Center Aligning Website for Different Browser Sizes

FutureRoots

05-16-2008, 04:59 PM

I am having issues creating a website (using imageready) that is centered in all browsers.

I made table width & height = 100% and made align & valign = center so that it would center in the middle of any viewers browser page-not sure I did this correctly...

I also have an link to a pdf file that may download for the viewer if they so choose, but something weird is happening around that link - white spaces as if the page is broken up.

the site is - URL REMOVED PER USER REQUEST

I'm sure this is a simple problem, but I am quite inexperienced so any help is greatly appreciated.

<html>
<head>
<title>Kids-First-Tutoring-Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="100%" height="100%" align="center" valign="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/index_01.jpg" width="1280" height="410" alt=""></td>
</tr>

<tr>
<td rowspan="2">
<img src="images/index_02.jpg" width="80" height="614" alt=""></td>
<td>
<a href="Kids1st-Summer-Registration.pdf" target="_blank"><img src="index_03.jpg" alt="Summer_Registration_Form" /></a></td>
<td rowspan="2">
<img src="images/index_04.jpg" width="831" height="614" alt=""></td>
</tr>
<tr>

<td>
<img src="images/index_05.jpg" width="369" height="527" alt=""></td>
</tr>
</table>

</body>
</html>

Medyman

05-16-2008, 11:15 PM

A little CSS can go a long way.

Add the following between your <head> tags.

<style type="text/css">
table {
margin:0 auto;
}
</style>

By the way, tables were not designed to be used for layout and it is generally recommened not to do so. You should be using CSS for this.

FutureRoots

05-17-2008, 12:38 AM

thanks, i tried this and it still looks the same.

rangana

05-17-2008, 02:34 AM

I wonder why Medyman gives you that margin:auto;, maybe he'll explain later.

Anyway, the issue is not more of a CSS issue but an image width and height issue ;)

See if this code helps:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Kids-First-Tutoring-Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0;}
body{background:#fff;}
img{display:block;}
#wrap{width:1280px;}
#nav{width:373px;float:left;}
</style>
</head>
<body>
<div id="wrap">
<img src="images/index_01.jpg" alt="" style="height:410px;width:1280px;">
<img src="images/index_02.jpg" alt="" style="height:617px;width:80px;float:left;">

<div id="nav">
<a href="http://www.kidsfirsttutoringcenter.com/Kids1st-Summer-Registration.pdf" target="_blank"><img src="images/index_03.jpg" alt="Summer_Registration_Form"></a>
<img src="images/index_05.jpg" alt="" style="width:373px;height:523px;float:left;">
</div>
<img src="images/index_04.jpg" alt="" style="width:827px;height:618px;float:right;">
</div>
</body>
</html>

P.S. I've change your code away from the deprecated attributes (http://www.codehelp.co.uk/html/deprecated.html) :(
I modified your code because tables was'nt intended for layouts (http://hotdesign.com/seybold) :(

I also added a DTD (http://alistapart.com/articles/doctype) in your page for it to validate (http://validator.w3.org) :)

Hope that helps :)

Medyman

05-17-2008, 02:36 AM

I wonder why Medyman gives you that margin:auto;, maybe he'll explain later.

Sorry, I misunderstood the issue.

What Rangana suggests should work

FutureRoots

05-17-2008, 04:30 AM

thanks a million! you sure know your stuff. i am going to read up more on why the original code was not working. thank-you for the info...really & truly
:)

rangana

05-17-2008, 04:34 AM

In your original code, both the height and width makes it annoying :(

...This article should also help you explain why there are gaps:
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps