Help: Adding a banner to a webpage that uses flanking menus?

[Declan Naughton]

What would be the easiest way to add a banner to a page like:
http://bluerobot.com/web/layouts/layout3.html [Uses absolute to position
the panels and relitive for the content. I would like the banner to be
width 100% (of the browser window) and the height to be variable (So that,
whenever the window is small, the banner will be small and no scrollbar's
will show up.)]
My own page isn't uploaded yet, but it's almost the same as the above
link. I dont want to use float (had enough trouble with them already) for
the panels.
I'm guessing that I'm going to have to convert the panels from absolute
position, but thats enough trouble. I'm hoping that there is an easier way
(Should I use framesets?).
Any ideas?

 

[Sam Hughes]

What would be the easiest way to add a banner to a page like:
http://bluerobot.com/web/layouts/layout3.html [Uses absolute to
position the panels and relitive for the content. I would like the
banner to be width 100% (of the browser window) and the height to be
variable (So that, whenever the window is small, the banner will be
small and no scrollbars will show up.)

Browsers are bad at resizing images. It will look ugly and either
unevenly pixelated or unevenly depixelated.

 

[m]

What would be the easiest way to add a banner to a page like:
http://bluerobot.com/web/layouts/layout3.html [Uses absolute to position
the panels and relitive for the content. I would like the banner to be
width 100% (of the browser window) and the height to be variable (So that,
whenever the window is small, the banner will be small and no scrollbar's
will show up.)]
My own page isn't uploaded yet, but it's almost the same as the above
link. I dont want to use float (had enough trouble with them already) for
the panels.
I'm guessing that I'm going to have to convert the panels from absolute
position, but thats enough trouble. I'm hoping that there is an easier way
(Should I use framesets?).
No!

Any ideas?

Image in a div.

Image has short width with a transparent background or a background that
matches the div's background.

The div will resize to 100% of its container's width instantly, and will
look like a part of the image. The image won't suffer from being resized
by the browser.

Sure you can't substitute a styled <h1> for the banner altogether?

 

[Declan Naughton]

Browsers are bad at resizing images. It will look ugly and either

unevenly pixelated or unevenly depixelated.

Thanks ppl. But when the page is resized, all the panels move to the
left/right. Unless the banner scales with them, the horizontal scrollbars
appear (Which I dont want). Either that, or the banner is scaled out of
proportion (Which I also Don't want).

Image in a div.
Image has short width with a transparent background or a background that
matches the div's background.
The div will resize to 100% of its container's width instantly, and will
look like a part of the image. The image won't suffer from being
resized
by the browser.
Sure you can't substitute a styled <h1> for the banner altogether?

I want to get the banner image going, because it has a gradient in the
background.
I think I want the image to "suffer", because I want it to resize with the
browser(?).
The main problem is the panels. If the banner is in a small window, the
panels will be placed direcly under it, but when the window is made
bigger, the image gets bigger and moves behind the panels.
Know what I mean?

 

[Declan Naughton]

w00t.
I got it sorted.
Added all the panels and the content to a #container div.
Also added a #header and a #footer div.
The #container div's position is relitive. The .panel divs are absolute
(But there inside the #container div, so there placed under the banner).
Everything seems to be working fine in Mozilla and Konqueror.