SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS, backgrounds, etc

    Sometimes I get carried away with the "design" of a site before I think about how difficult it will be to code. Luckily this is my jewelry site so I have to make all sorts of mistakes and hopefully learn from them. I am using Skeleton as the framework as I am used to using it. I don't like that it is by default only 960px wide. I need this to be 1200px wide so will work that out. The 1st problem I think I will face will be placing the logo on the left with the nav background and the content background placed where they are. Any ideas on the best way to handle this would be greatly appreciated. Thanks.

    Attachment 62476
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Each element can have its own background image, so that's not a problem. Thinking in terms of "1200px wide" is a bit of an old way to think of web design, though. Is a layout like this really practical when viewed on small screens? Is a fancy layout like this really needed? (That is, does it really help the content, and help the user to find that content?)

    My other question would be why you are using a framework. Right out of the blocks you are finding you have to change things. Why not start with a clean slate that you can build upon as needed?

    Just thinking out loud here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I always appreciate your thoughts, Ralph.

    Even though everyone is now designing for various devices, it may be in my best interest with this site to just stick to PC monitors and laptops.

    You know I love fancy layouts. I have never been a fan of plain, boring, lifeless sites. This site is for selling my handmade jewelry. I want it fancy.

    I will scratch Skeleton and proceed with a clean slate so I am not confined to Skeleton's layout.

    So I will have a header, left nav, content, footer.

    Now to get the logo sitting part way down the background of the left nav area and the content area. I will have to think about handling this one.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Now to get the logo sitting part way down the background of the left nav area and the content area. I will have to think about handling this one.
    There's usually a logical and straightforward way to do these things. Now is certainly the time to be asking this question, rather than later. How you place it depends on how you want to break up the content. You could just leave a space for it and position it absolutely, but I tend to avoid that if possible. I would start with a container for the page that is centered and has the main background pattern. Then two column divs, left and right. The first element in the left column will be the logo. You might need to give that a negative right margin to pull it right a bit.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok so instead of using the flowery background as the body background, make it container for the page and use that as the background. Then skip the header and go straight to left column and right column. Is that correct? Then I would have a footer that spans both left and right columns.

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I did add a header only to move the left and right columns backgrounds down the page a bit. Now working on getting the logo to sit a little on top of the left and right column backgrounds.


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
  •