Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How to attack this design?

1

103734

Guest
Original poster
Apr 10, 2007
723
0
Ok I am making my first site and here is how it is supposed to look
websitetemplate-Copy.jpg

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?
 
W

Wee Beastie

macrumors regular
Aug 20, 2007
195
0
In the snow with Rosebud
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom