The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

What if graphics are an integral part of my layout?

I'm bringing a question into this thread that didn't get a whole lot of traction over in the Usability forum.

I'm in the process of taking the site in my sig from a static 800x600 design (762 wide, actually) to a CSS-based design that will have a left fixed margin, a right fixed margin, and a variable-width center column.

My problem: The site borrows the basic theme of its layout from MSN's home page. (You know - the pic at the top of the center column that's clickable, and leads to whatever the main story is at the time?)

My site is about musicians - and sometimes, that photo will be of a performer live in concert (complete with diffuse light effects on stage), sometimes the backgrounds will have gradient fills, outer glow effects etc.

How do I make those pics work in a "flexible" layout?

Would appreciate opinions. If you need clarification, ask away! If you go to the site now, don't let the pic that's up there today fool you - a shot with a white background is a rare event.

It's kind of important to me that if possible, whatever the photo is takes up the entire width of the top column; but I haven't got a clue how to do that when I leave the screen size up to the user.

imusicians.com
The new website for musicians.
More features. Less money. And a lot less bull.

Thanks for the suggestion; I understand what you're saying, and it's similar to the suggestion someone made in the other thread; but I don't know how professional that looks, from a graphic arts perspective.

Take your avatar, as an example, and imagine it as a 375x225px graphic with white text in the upper left corner (which is how we run the main photos on the site now, in its 800x600 layout).

How would you expand that to a 1600x1200 column gracefully? Would you take the dark background, and have the obvious crop where the leaf ends in the bottom right corner? Or would you take the green from the leaf, and have the other three corners look awkward? Or am I just missing something because it's 1:30 in the morning and I need more coffee?

Last edited by imusicians; Aug 20, 2004 at 21:34.

imusicians.com
The new website for musicians.
More features. Less money. And a lot less bull.

How well this would work depends on the image. The image itself would need to be complete and on a background of the color you want to expand. You could also find a suitable pattern and work it into the background/edges of the photo so it would blend into a tiled background. Here's something that I recently put together http://www.prodigytek.com The header is on a tiled background that rests in a <div> using the same tile. This make the header flexible and seamless.

Perhaps you could use a repeated version of the Idol image in the background. Try it at very low opacity to kind of echo the main image but not really detract from it. If that works well, you could handle all the expansions in a similar manner. You could also have the text aligned right so it would move in to fill the empty space.

Off Topic:

This should really be in the Graphics forum not CSS. If a mod catches it, it might get moved