The Host Wiz » CSS

What are CSS Sprites and What are their Advantages

admin — Mon, 06 Feb 2012 15:02:41 +0000

A CSS Sprite is a single image with all of your web sites images combined into a single image. If you have image A and image B you combined them to make image C, and define the HTML tag size to be the size of the original image (image A or B) and the define the background-position attribute according to the location within image C. The Advantages of doing this give image roll over effect a quicker transition because the Hover image is already loaded into the browser it only needs to be shifted in background-position. It also speeds up your websites load time by having less fetches with each image transfer. Best practice with combining images is to only combine the necessary images together. There is no reason to combine all of the sites images together when this will increase the web-pages size and load time. I like to use the CSS Sprite Generator at website-performance all you have to do is zip up all of your images files you would like to combine and then upload it to the site. There are a few options you can choose from for your output image like transparency and image spacing requirements. The the Sprite Generator will provide you with a Image you can download and all required CSS (image size and location within sprite) to position the images correctly within your site.

Bookmark It

CSS – Hide Text and display a Image

admin — Thu, 05 Jan 2012 18:41:20 +0000

Converting Plain Text

The CSS Code

span.image { 
background: url(/images/bamboo.jpg) no-repeat; /* url to image */ 
width:100px;  /* actual image width */
height:100px; /*actual image height */
text-decoration:none; 
display:block; 
font-size:0px;
}

The Text in a span Tag

Replace this text with an image

The Image

The Result

Replace this text with an image

Converting a Link

The CSS Code

a.image { 
background: url(/images/bamboo.jpg) no-repeat; /* url to image */ 
width:100px;  /* actual image width */
height:100px; /*actual image height */
text-decoration:none; 
display:block; 
font-size:0px;
}

The Text in an anchor Tag (link)

Replace this text with an image

The Image

The Result

Replace this text with an image

Bookmark It

CSS – Horizontal Dropdown Menu’s

admin — Tue, 20 Oct 2009 15:30:13 +0000

I have been trying to find a way to implement some drop down menus similar to the ones on on my store. However I was unable to use the ones from my store because the code is in ASP and my hosting is in PHP. So my search began and my choice was to use the method mentioned on tanfa with an article titled “CSS Drop Down Menu Tutorial Code”. See a demo of the horizontal menu I used here – Horizontal Demo Page There are 3 steps to accomplish the CSS drop down menu. 1. Get the HTML 2. Download the whatever:hover file 3. Implement the CSS – see the section “To The CSS” for details If any of this info is no longer available please let me know and I will try to provide it here.

Bookmark It