HTML Forum

**stephank** · 11-17-2006, 01:38 PM

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">

</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>

**vangogh** · 11-17-2006, 01:55 PM

I'll be honest that I'm not sure this sounds like the best appoach to a design, but what you need to do is specify the widths of images a and c as a % instead of a fixed amount. Using px will force the images o be a certain size, but using % will allow them to resize.

I also noticed you're giving image b a width of 700px even though you only want it to be 600px.

**stephank** · 11-17-2006, 03:21 PM

Dear vangogh

Thanks for your reply. You're right it's supposed to be 600pixels.

I have tried to use % for images a and c but without success. Both image disappear if I do that for some reason.

Do I need to dig into other solutions for this that involve javascript onresize events and then crop the images somehow?

Any ideas or approaches appreciated.

Best

StephanK

Quote:

Originally Posted by vangogh

I'll be honest that I'm not sure this sounds like the best appoach to a design, but what you need to do is specify the widths of images a and c as a % instead of a fixed amount. Using px will force the images o be a certain size, but using % will allow them to resize.

I also noticed you're giving image b a width of 700px even though you only want it to be 600px.

**vangogh** · 11-18-2006, 03:32 PM

I generally don't design with images that can change size so I'm not certain, but I'm thinking the % doesn't work because it's a background image and that it might need to be coded in the html instead.

It's more of a guess, but try placing one of the images directly inside the table if that's possible and then apply the % width to it.

You can use JavaScript, but I think that will be more of a pain than it's worth.

**stephank** · 11-19-2006, 01:59 PM

Hmmm. Yeah I tried the table with the % instead of absolute values... the problem of the horizontal scrollbars remains.

I started digging into javascript which I'm fairly new to. But it seems to work in mozilla on PC. I think I need to do a sepearte code for explorer. No scrollbars. however when it refreshes the width and the position of the images I sometimes get a one pixel line between the images. Not sure how to avoid that...?

I'll try it this way and test it in all the browsers. If I get decent results I'll stick with it, otherwhise I might need to switch to flash, (which would be unfortunate, just to accomodate the background design...)

------------------------------------------------------------------

<script type="text/javascript">

function updateView() {
if (document.getElementById("bg1")) {
var bg1 = document.getElementById("bg1");
var bg2 = document.getElementById("bg2");
var bg3 = document.getElementById("bg3");

var bg1_origWidth = 600;
var bg2_origWidth = 700;
var bg3_origWidth = 600;

var scrWidth = window.innerWidth;
var scrHeight = window.innerHeight;

bg3.style.width = (scrWidth-bg2_origWidth)/2;

bg1.style.left = ((scrWidth-bg2_origWidth)/2)-bg1_origWidth;
bg2.style.left = (scrWidth-bg2_origWidth)/2;
bg3.style.left = ((scrWidth-bg2_origWidth)/2)+bg2_origWidth;

}
}
</script>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>
<BODY onload="updateView();" onresize="updateView();" STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<DIV ID="bg1"></DIV>
<DIV ID="bg2"></DIV>
<DIV ID="bg3"></DIV>

**vangogh** · 11-19-2006, 07:00 PM

It's the image though you need to specify in %. If you set the table in %, but leave the image in px then it will force the table cells to be at least the size of the image.

I'd try all combinations of % on images, table cells, etc before trying this in JavaScript. The JavaScript will just be a pain and I don't think it's going to be necessary.

**mgraphic** · 11-19-2006, 07:51 PM

FYI - You can resize the parent window with javascript, but beware because this can be considered as annoying to most users.

<body onload="window.resizeTo(600,600);"> (width, height)

**vangogh** · 11-21-2006, 12:14 AM

The first time a site resizes my browser is the last time I visit that site. Changing things on my side is a deal breaker for me and I'm sure many others as well so be careful if you decide to do it.

**ADAM Web Design** · 11-21-2006, 01:55 PM

That sounds like a messed-up design to me. If they're not backgrounds, why would you treat them as backgrounds?

Having said that, this sounds like a case for the overflow: auto; property. Rather than have users resize the page, put your entire page in a 600 x 600 div with overflow: auto set (this will keep everything constrained) and then go from there.

(You may need it on your other divs as well.)

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!