How to attack this design?

Discussion in 'Web Design and Development' started by 103734, Oct 30, 2010.

  1. 103734 Guest

    Joined:
    Apr 10, 2007
    #1
    Ok I am making my first site and here is how it is supposed to look
    [​IMG]
    is has a gradient to black all around the image, and I am going to set the background black, I plan on putting some transparent div tables in the for the content area in the middle, what I am wondering is how I should handle the buttons and logo links.

    I want the buttons to be highlighted when the mouse is over them so I would need them to be separate from the background, same for the logo I am assuming since I want the logo.

    My question is should I make the logo and nav bar links transparent GIF's save the rest of the image as a single image and use it as the background or cut the entire image up into different parts?
     
  2. Wee Beastie macrumors regular

    Joined:
    Aug 20, 2007
    Location:
    In the snow with Rosebud
    #2
    For the nav, I usually use css sprites for image-based nav.

    For the logo, I'd either slice the logo image and then just wrap the <img> tag in an <a> tag OR do something like this:
    Code:
    HTML:
    <a id="logo" href="/">Company Name</a>
    
    CSS:
    a#logo {
        display: block;
        width: 244px; /* replace with actual width of image */
        height: 0px;
        padding-top: 63px; /* replace with actual height of image */
        background: url(images/logo.png) no-repeat 0px 0px; /* replace with actual path to image */
        overflow: hidden;
    }
    
    Setting up sprites for the nav will be similar except you would house both the normal and hover states in the same image and the show one or the other by shifting the background position.

    A good tutorial will likely do a better job than I am. This is just one random set of tuts that I found. I picked up the technique that I use to this day from viewing the source code of a site that I liked, so that is another option.

    http://skyje.com/2010/02/css-sprites/

    Good luck to you!

    Also, for your background textures, I would create a fixed width container div that will house the whole site and apply the background images to that has opposed to the body tag.

    Dividing websitetemplate.jpg into parts may also be useful depending on your needs. For instance, divide the top, middle, and bottom portions into separate images. Then set them as the background images for the header, main content, and footer divs respectively.
     
  3. 103734 thread starter Guest

    Joined:
    Apr 10, 2007

Share This Page