HTML - Size Of Browser Window Affecting Page Content

I am trying to create a table that does not change size depending on what the screen resolution is set to. I know that it is good practice to use percentages, however, as I am used to using pixels, I am finding it frustrating as I don't get the desired table size I want when the resolution is changed

Here is an example of the table, if anyone can help me with the changes, it would be much appreciated or if you could point me in the direction of a tutorial that makes the table resize to reflect the chosen resolution preference, that too would be welcomed

Code:

<font color="#FFFFFF" face="Verdana" size="2">
<table width="810px" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#000033"> 
    <td height="130px" colspan="2"><div align="center">Header</div></td>
  </tr>
  <tr> 
    <td width="130px" height="130px" bgcolor="#000066"><div align="center">Login</div></td>
    <td width="680px" height="130px" bgcolor="#000099"><div align="center">Image</div></td>
  </tr>
  <tr bgcolor="#0000CC"> 
    <td height="80px" colspan="2"><div align="center">Page Title</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
    <td rowspan="15" bgcolor="#0066FF"><div align="center">Body</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 1</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 2</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 3</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 4</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 5</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 6</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 7</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 8</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 9</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 10</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 11</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 12</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
  </tr>
  <tr bgcolor="#003399"> 
    <td height="30px" colspan="2"><div align="center">Footer</div></td>
  </tr>
</table></font>

Thanks in advanced

I need help/
I applied an opacity on my table background.
But the problem is, i have content such as images and text areas in my table which are getting affected by the opacity i placed on my table.
I applied a 14% opacity to my table and now its making my images and textbox inside my table invisible.
anyway to fix this problem. here is an example of my code

HTML
<table class="home">
<tr>
<th>Welcome</th>
</tr>
<tr>
<td width="100" height="200">
<p><img src="Web Photos/welcomebanner.gif" class="feature" width="1025" height="200" /></p>
</tr>

CSS
table.home td {
font-size: small;
border: 1px solid FFFFFF;
background-color: #FFFFFF;
filter: alpha(opacity=14);
}

Hello,

I want to open a html page in a same browser window with fullscreen mode.

I tried following code:

window.open("hello.html","_self","fullscreen,scrollbars")

However if I use _self, I did not get page in fullscreen mode.

Any help is really appreciated.

Regards,
John

Hello;

I am a graphic designer that codes pages quick and dirty entirely with tables. The one I am currently working on needs to be centered in all browser windows at all sizes. I understand that this shouldn't be hard, however everything that I have tried so far hasn't worked. My thoughts are that since it is built entirely in tables (with a java search tool) that I need to make a centered container and place the entire page inside of it. I have tried a few codes I've pulled from other forums with no luck

temporary url (and I know the code is dirty)

www.showcasepublishing.com/myoutandabout


Thanks in advance

Hello

I'm new to HTML

Now straight to the point :

I have a web page that looks too big when screen resolution is 1024x786 , but on the other pc (screen resolution 1280x1024 ) the same page looks too small and I have white spaces around it. I want my whole page with it's elements adapt to the browser window size and fit exactly to it ( I don't want to see that scrolling thing on the right or bottom ). You could just give me the link of the function/code I have to use.

Here is my code if that helps.

Code:

<html>
<title>AiiT</title>
<body background="b.png" style="background-repeat:no-repeat; background-position:center center; width: 1024px;height:768px;">
<div style="background-image: url('1.png'); width:764px; height:557px; position: absolute;
    top: 12%;
    left: 50%;
    margin-left: -382px; text-align:center;
"><div style="background-image: url('Tr.png'); background-repeat:no-repeat; position: relative; left:30px; top:30px;"><img src="Her.png" border="0" style="margin-top:10px;"><br><br>
<a href="en/"><img src="an.png" border="0"></a>&nbsp;&nbsp;<a href="lt/"><img src="li.png" border="0"></a><br><br><img src="Logo.png" border=0"></div></div>
</body>
</html>

Help appreciated.

I have a terrible problem how to make this page resize whatever the resolution of the browser. I've already did liquid layout via percent but the height doesn't do it. They want the content to be scalable in whatever browser dimensions they want. Kindly help me. Thanks.



Here is the html:
Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Porter House New York</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/drop-down-menu.js"></script>
<!--[if IE]>
	<script src="js/CreateHTML5Elements.js"></script>
<![endif]-->
<!--[if IE 6]>
	<script src="js/unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<header> <a href="index.html"><img src="images/logo_porter_house_new_york.png" alt="Porter House New York" class="logo" title="Porter House New York" /></a> </header>
<!-- end header -->
<nav>
  <ul>
    <li><a href="#" class="about" title="about">about</a>
      <ul>
        <li><a href="#" title="The Restaurant">The Restaurant</a></li>
        <li><a href="#" title="The Chef">The Chef</a></li>
        <li><a href="#" title="The Owners">The Owners</a></li>
      </ul>
    </li>
    <li><a href="#" class="menus" title="menus">menus</a></li>
    <li><a href="#" class="press" title="press">press</a></li>
    <li><a href="#" class="photos" title="photos">photos</a></li>
    <li><a href="#" class="private" title="private dining">private dining</a></li>
    <li><a href="#" class="gift" title="gift certificates">gift certificates</a></li>
    <li><a href="#" class="contact" title="contact">contact</a></li>
    <li><a href="#" class="watch" title="contact">contact</a></li>
    <li><a href="#" class="reserve" title="contact">contact</a></li>
  </ul>
</nav>
<!-- end nav -->
<div id="content">
  <div id="contentTop"> </div>
  <!-- end contentTop -->
  <div id="side"></div>
  <!-- end side -->
  <div id="main">
  </div>
  <!-- end main -->
  <div id="contentBottom"> </div>
  <!-- end contentBottom --> 
</div>
<!-- end content -->
<footer>
  <p>&copy; Copyright 2007. Porter House New York. Powered by 2B-Unique.com</p>
</footer>
<!-- end footer -->
</body>
</html>

Here is the CSS:
Code:

/* ---------------------------------------- */
/*   CSS RESETS                             */
/* ---------------------------------------- */
@import url('reset.css');
body {
	background: #fff url(../images/bg.jpg) repeat-x center 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
/* ---------------------------------------- */
/*   HEADER                                 */
/* ---------------------------------------- */
header {
	position: relative;
	margin: 1% auto 0;
	height: 20%;
	width: 98%;
	background: url(../images/header.png) no-repeat 0 0;
	*background: url(../images/header_ie.gif) no-repeat 0 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
header img.logo {
	margin: 3% 0 2% 3%;
	height: 50%;
	width: 25%;
}
/* ---------------------------------------- */
/*   NAV                                    */
/* ---------------------------------------- */
nav {
	position: relative;
	margin: 0 auto;
	height: 28px;
	width: 98%;
	background: url(../images/nav.png) no-repeat 0 0;
	*background: url(../images/nav_ie.gif) no-repeat 0 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
nav ul {
	margin-left: 1.1%;
	position: relative;
}
nav li {
	position: relative;
	float: left;
}
nav a {
	display: block;
	text-indent: -9999px;
	height: 25px;
	background: url(../images/nav_sprites.png) no-repeat 0 0;
}
nav a.about {
	background-position: 0 0;
	width: 73px;
}
nav a.about:hover {
	background-position: 0 -25px;
}
nav a.menus {
	background-position: -73px 0;
	width: 85px;
}
nav a.menus:hover {
	background-position: -73px -25px;
}
nav a.press {
	background-position: -158px 0;
	width: 83px;
}
nav a.press:hover {
	background-position: -158px -25px;
}
nav a.photos {
	background-position: -241px 0;
	width: 98px;
}
nav a.photos:hover {
	background-position: -241px -25px;
}
nav a.private {
	background-position: -339px 0;
	width: 145px;
}
nav a.private:hover {
	background-position: -339px -25px;
}
nav a.gift {
	background-position: -484px 0;
	width: 166px;
}
nav a.gift:hover {
	background-position: -484px -25px;
}
nav a.contact {
	background-position: -650px 0;
	width: 84px;
}
nav a.contact:hover {
	background-position: -650px -25px;
}
nav a.watch {
	background-position: -741px 0;
	width: 252px;
}
nav a.watch:hover {
	background-position: -741px -25px;
}
nav a.reserve {
	background-position: -993px 0;
	width: 121px;
}
nav a.reserve:hover {
	background-position: -993px -25px;
}
nav ul ul {
	position: absolute;
	left: -10px;
	top: 25px;
	z-index: 900;
	padding: 3px 0;
	background-color: #ffffeb;
}
nav ul ul li {
	float: none;
	width: 143px;
}
nav ul ul a {
	margin: 0 3px;
	padding-left: 10px;
	height: 16px;
	width: 127px;
	background: none;
	color: #71462d;
	font: normal 12px Tahoma;
	text-indent: 0;
	text-decoration: none;
	text-transform: uppercase;
}
nav ul ul a:hover {
	background: url(../images/submenu_hover.jpg) no-repeat 0 0;
	color: #fff;
}
/* ---------------------------------------- */
/*   CONTENT                                */
/* ---------------------------------------- */
#content {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	height: 304px;
	width: 98%;
	background: url(../images/content.png) repeat-y 0 0;
	*background: url(../images/content_ie.gif) repeat-y 0 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
#contentTop {
	position: absolute;
	top: 0;
	left: 1.05%;
	z-index: 100;
	background: url(../images/content_top.png) repeat-x 0 0;
	*background: none;
	height: 2%;
	width: 97.85%;
}
#contentBottom {
	position: absolute;
	bottom: 0;
	left: 1.05%;
	z-index: 100;
	background: url(../images/content_bottom.png) repeat-x 0 0;
	*background: none;
	height: 2%;
	width: 97.75%;
}
#side {
	position: relative;
	float: left;
	display: inline;
	margin-left: 1.1%;
	height: 304px;
	width: 19.62%;
}
#main {
	position: relative;
	float: right;
	display: inline;
	margin-right: 1.1%;
	min-height: 276px;
	width: 76.07%;
	padding: 28px 0 0 12px;
}
/* ---------------------------------------- */
/*   FOOTER                                 */
/* ---------------------------------------- */
footer {
	position: relative;
	margin: 0 auto;
	width: 98%;
	background: url(../images/footer.png) no-repeat 0 0;
	*background: url(../images/footer_ie.gif) no-repeat 0 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
footer p {
	margin: 20px 0 0 11px;
	display: inline-block;
	text-indent: -9999px;
	height: 50%;
	width: 40%;
	background: url(../images/copyright.png) no-repeat 0 0;
	background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}

Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page?

the width works perfectly and just the height im stuck with

Hi!

I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window.

How can I make it do that?

I did it once but just can't seem to remember how I did it.

Thanks

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

ok i have a page that opens another page without the toolbars, however the issue is that i dont know how to make them different sizes, like this page im including here is too small for what is actually on the page. I have to maximize the window. How do i html the code for the size page i want it to be. I hope I am sayong that correct.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Certification</title>



</head>

<script language="JavaScript"> 
function loadMainWindow() 
{ 
   var win = window.self; 
   win.opener = window.self; 
   var newloc = "http://clas0as21.corp.cox.com/sdchealtop/framework/frameset.asp"; 
   var ih = (window.window.screen.availHeight - 60) - 100; 
   var iw = (window.window.screen.availWidth - 10) - 100; 
   var it = ((window.window.screen.availHeight - 60) - ih) / 2; 
   var il = ((window.window.screen.availWidth - 10) - iw) / 2; 
   var features = 
"directories=no,menubar=no,location=no,toolbar=no,status=yes,scrollbars=yes*,resizable=yes" 
+ ",width=" + iw + ",height=" + ih + ",top=" + it + ",left=" + il + ""; 
   v1 = new Date(); 
   v2 = Date.parse(v1); 
   v3 = "pg" + v2; 
   var oNewWindow = window.open(newloc, v3, features); 
   oNewWindow.focus(); 
   win.close(); 


} 


function window.onload() 
{ 
   try 
   { 
      loadMainWindow(); 
   } 
   catch(e) 
   { 
      popUpMessage.style.display = 'You Are Being Redirected!'; 
   } 

} 


</script> 

Hello,

This is gonna be difficult for me to explain, but here we go.

I am wondering how I create a page that automatically (as far as possible) re sizes when you make the window bigger and smaller. So that the use of scrollbar is minimal. Do you understand what I am trying to say? Kind of floating in a way.

I am using dreamweaver and am gonna code this site in xhtml strict (right choice?).

Have a nice day,
helen

I have a form and once on submit it redirect to another php page. I would like to know how I can go about making the redirect php page a pop up window and have the pop up window at a specifiied size and at the same time reload the original php page. Anyhelp is appreciated. Thank you.

Hello,

I've been working in Dreamweaver on what I think is a pretty simple project, but am stuck figuring out the following:

On the system that I used to create the html code, the following produces exactly what I intend... a mouseover event that opens a window that is 800x600:

<a href="#" onmouseout="dave.close()" onmouseover="dave=window.open('Adrift in Manhattan.htmL','test','width=800,height=600')"><font
size="2" face="Georgia, Times New Roman, Times, serif">Adrift in Manhattan
</font></a><br />
<br />

When I "mouseover" on one of my other systems, the window opens full screen - not the 800x600 I want.

What am I missing?

Thanks,
bob

I have made a link from an image to open a detail of the image in a new page. Everything works OK but the only problem I've got is that the new browser window that opens is too big, the image is nestled up in the right hand corner.

Is there a way I can controll the size of the new browser window so that it only displays the image with a minmul white space around it?

Thanks in advance to anyone who can help.

Dyfrig