Forum Moderators: not2easy

Message Too Old, No Replies

Liquid layout with fixed banner

How can I get a solution?

         

Gabriele

7:24 am on Mar 21, 2006 (gmt 0)

10+ Year Member



Hi all!
Actually I'm working hard to find a solution to fix this problem, but I haven't find it yet.
I have a fluid layout (a container built in percentage) and I have to insert in it a banner with fixed dimensions. Here's the matter: which dimensions for the banner? If the container was 60% in width, what about
the banner? Much bigger than container? I really don't know. Thanks all for your answers. bye

Gabriele ;-)

doodlebee

2:26 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



I don't think I understand your issue?

Is you banner an image? It has to be fixed width? Is the problem that you want it centered? is the banner a BIG image, and you're worried about scaling the size?

Please be a little more clear on the issue, and we may be able to help better :)

Gabriele

3:17 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



Yes, the banner is an image, used as banner's background. I don't know of what measure (px)it should be, because I use a fixed width (pixel) for this image. Thanks for your answer and excuse me. bye ;-)

Gabriele

doodlebee

7:25 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



Yes, the banner is an image, used as banner's background. I don't know of what measure (px)it should be, because I use a fixed width (pixel) for this image.

I'm sorry, but you're still not explaining the issue you're having. If I have a div that's fluid, and 100% in width, then I can place an image in the header at any size. If it has to be fixed with, then you just put it in there. If you're setting it as the background to a div that's 100% in width, then the background inmage will tile. If you don't want it to tile, then you put in "background-repeat:no-repeat;" and it'll display it only once. But when you set it as a background image, you can't set the pixel width.

If you want it centered in the banner, you need to tell the CSS to do so. But your question isn't very clear: you say you have an issue and can't find an answer, but you didn't answer my questions for clarification. Do you want it centered? Do you want it to expand to fill the fluid div, or remain a fixed size?

What, exactly, is the problem?

Gabriele

8:03 am on Mar 22, 2006 (gmt 0)

10+ Year Member



I have a container of 60% in width. I need to know how much big the image should be to fill completely the container's width (the container is centered). the image should be created in pixel using Photoshop. thanx a lot. ;-)

Don_Hoagie

1:23 pm on Mar 22, 2006 (gmt 0)

10+ Year Member



There is no pixel equivalent to "60%"; that's the whole point of a liquid layout... since you don't know whether someone's browser window is 640px wide or 3200px wide, you just say "60%", knowing the layout will look the same at any width.

If it is that important to you that the image take up the entire width of the design, then you should probably not be using a liquid layout.

There are some techniques on the web for making images stick at 100% of the width, but in the end what you have to do to get that effect is to make an image that is so huge that it will always be able to fill any width... and that takes up a lot of filesize.

But as far as your specific question, no, there isn't a magic pixel size that equates to "60%", because by definition "60%" is not a set width.

Gabriele

2:52 pm on Mar 22, 2006 (gmt 0)

10+ Year Member



Thanks all for your patience. I'd like to say that I had several doubts about, but now it's all fairly clear.
I didn't focus my attention on the filesize of the background image, so it wasn't clear enough that this question is pointless (maybe a little odd, too). thanks again. I have to get rid of such ideas if I want to do something good. cya ;-)

Gabriele

Css_Novice

5:18 am on Mar 29, 2006 (gmt 0)

10+ Year Member



Perhaps a solution would be to have your header image centred with each end of that image fading into the background colour it overlays.. that way if the browser is wider than the image, the b/g colour appears each end.

You can do this in any image editor such as photoshop...

Ive done this on a few headers and it works quite well...