Dear Forum
I am working on an html site that is about 600pixels wide and 600pixels in height. Center / Top align. The site will not appear as a popup so I don't have control over the resize functionality or the scrollbars of the browser window.
I would however like to control the appearance of the left and right and bottom parts of the page if additional images (they're not repeatable backgrounds, but rather 500x800pixel gif images) in case the user resizes the window manually.
--------------------------------------------------------------------------------
Main Main Question is : How do I do that without having the horizontal scrollbars appear?
--------------------------------------------------------------------------------
Let's say I have three images that are next to each other aligned on the top of the browser:
[a] [b] [c]
Image [b] should always be 600 pixels. Image [a] and [c] should resize depending on the browsersize, so that image [b] remains centered at all times. So if the browser window is 1200pixels images [a] and [c] should both be 300 pixels.
image [a] should align top right.
image [b] should always be centered.
image [c] should align top left.
Here is the code I have so far:
Any help appreciated.
thanks
stephan
-------------------------------
<style type="text/css">
<!--
#a{
background-color: #00078;
background-image: url(images/lines_01.gif);
background-repeat: no-repeat;
background-position: top right;
position: static;
height: 600px;
width: 300px;
}
#b{
background-color: yellow;
background-image: url(images/lines_02.gif);
background-repeat: no-repeat;
background-position: top center;
position: static;
width: 700px;
height: 600px;
}
#c{
background-color: yellow;
background-image: url(images/lines_03.gif);
background-repeat: no-repeat;
background-position: top left;
position: static;
height: 600px;
width: 300px;
}
-->
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="a"></div></td>
<td><div id="b"></div></td>
<td><div id="c"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
