SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to accomplish this is to set a compatible background color or background image for the <div> (or <td>) that contains the photo. That way everything can expand gracefully.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    earther;

    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.

  4. #4
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the two animated guys in the Guinness commercials say...

    "Brilliant!"

    Thanks for giving me an example - now I know what to do.

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

  6. #6
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope you can work it out. I'd be interested to see how you do it.

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    As earther suggested, for layout you can use repeating background tiles. But for content (yep images of musicians) I wouldn't bother. It's just not worth the hassle.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for example - try this link:

    http://www.imusicians.com/columns/article5.php

    I couldn't just center that graphic, the entire left side would look terrible. And it's possible to keep it off to the left of the column and continue the blue color as far to the right as necessary.

    But even THAT would look a little silly on a 1600x1200 display.

    That particular image is likely the least complicated one I'll ever use. So I'm at a bit of a loss for how to keep the site looking slick and professional.
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

  9. #9
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by earther; Aug 21, 2004 at 12:12. Reason: typo

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand what you're saying about the "off-topicness" of this, but the only reason it's even a question for me is because I'm now trying to rebuild my pages using a CSS-driven layout.

    So hopefully it can stay where it is.

    Thanks for the help. I'll play around with it and see where it leads.
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •