[blakrapter]

Hi, I am new here and relatively new to web design, so I am not very technical or html savy... I have a question that you all may be able to help me with. I am designing a website and would like to build it such that the entire screen/window is used when the page is being used. I can do this with tables I have been told by setting them to use 100% of the window. I will have menu bars on the right and left of fixed size and the middle area will expand and contract to make up the difference in screen resolutions. Here is my problem though:

The top banner that extends from one side of the page to the other and contains a black backdrop for a logo on the left side. The backdrop fades into a landscape photograph that extends all the way to the right side of the page. I am not sure how to make the top banner expand and contract to accomodate screen widths from 800 to 1024 pixels. Obviously I cannot "stretch" the photo because it will distort it. I would prefer to keep the black backdrop as small as possible (just large enough for the logo). What I would really prefer is to "crop" the excess of the photo for lower screen resolutions. I do not need the entire photo to show, so I can set it up 1024 pixels wide and "crop" the excess 200 or so pixels for 800x600 resolution. I am not sure how to do this though.

I have two possible solutions. The first is to create a small vertical strip in the black portion of the logo backdrop that will expand and contract to take up slack. I don't like that idea because the backdrop will be almost twice the necessary size when the page is being viewed in 1024x768. It will throw the banner off "balance." Also, the fade/gradiant on the right side of the backdrop is tapered because the logo is wider at the bottom, therefore, the verticle "takeup" strip will need to be placed to the left of the logo, which would then shift the logo toward the center of the banner at higher resolutions/window sizes and throw off the "balance" even more. Hopefully that makes sense.

My prefered method, which is where I need help, is to create two overlapping images. The logo and backdrop will be one image and the photo another. The backdrop/logo will be left justified and the photo right justified. The photo will be behind the backdrop. Therefore, the backdrop covers the extra width of the photo when a lower resolution is being used, and the photo will "slide out" from under the backdrop if higher resolutions are being used. My two problems with this: First, since the backdrop is fades into the photo, I basically need the black to fade to clear so that the photo can be seen through it. I have heard there is a file format that will do this, but I do not know what it is or how well it works. Second, I don't know if I can overlap those images like I mentioned without the browser going crazy.

Any suggestions will be greatly appreciated. Thanks.

[Transmogrify]

I can do this with tables I have been told by setting them to use 100% of the window.

Yeah, well don't. You can do this with CSS.

The top banner that extends from one side of the page to the other and contains a black backdrop for a logo on the left side. The backdrop fades into a landscape photograph that extends all the way to the right side of the page. I am not sure how to make the top banner expand and contract to accomodate screen widths from 800 to 1024 pixels. Obviously I cannot "stretch" the photo because it will distort it. I would prefer to keep the black backdrop as small as possible (just large enough for the logo). What I would really prefer is to "crop" the excess of the photo for lower screen resolutions. I do not need the entire photo to show, so I can set it up 1024 pixels wide and "crop" the excess 200 or so pixels for 800x600 resolution. I am not sure how to do this though.

All this can be done pretty simply.. Go here -

http://www.inknoise.com/experimental/layoutomatic.php

and generate your layout.

Then for your banner, make your banner image a background property of a <H1> element.

Best thing is to mock up your design, stick it up somewhere as a JPG and we can give some more advice from there.

[Clixxx]

Originally Posted by blakrapter

Hi, I am new here and relatively new to web design, so I am not very technical or html savy...

It will take him a while with the CSS!
The poor guy will get lost and not know where go....

Originally Posted by transmogrify

Yeah, well don't.

Woah... Ease up turbo! Give the guy a break... Dont introduce him to CSS... If he is new to html!