View Full Version : Sprite Images, CSS and HTML - Need Starter Help

Script Idgit
05-27-2009, 09:09 AM
I don't know the first thing about how to use sprites in the html and css. I just know that I have too many calls to the server. Would someone please just put a couple of my sprite images in my page so I can see how its done. I'll figure out the rest of it from there. The sprite image is located here (http://4yourbody.info/images/gen1.png). This is the file info that was generated when I made the sprite. All of the sprites are named the same as they were in the original html for easy reference.

.0001_arrow { background-position: 0 -30px; }
.4yourbody_logo { background-position: 0 -72px; }
.bg01 { background-position: 0 -180px; }
.bg02 { background-position: 0 -900px; }
.bg03 { background-position: 0 -1020px; }
.bg04 { background-position: 0 -1138px; }
.bg05 { background-position: 0 -1188px; }
.bg06 { background-position: 0 -1675px; }
.bg99 { background-position: 0 -1868px; }
.img02 { background-position: -1390px -30px; }
.img03 { background-position: -1390px -109px; }

Don't forget to add a background rule to reference the sprite image. Something like
this, for example:

#container li {
background: url(gen1.png) no-repeat top left;
}Page Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Health and Nutrition through Healthy Diet, Exercise and Smart Supplementation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="health and nutrition, healthy eating, healthy diet, supplement, supplements, supplementation," />
<meta name="description" content="Health, nutrition and supplementation: How a healthy diet and proper supplementation can improve your health." />
<meta name="Distribution" content="Global"/>
<meta name="Rating" content="General"/>
<meta name="Language" content="en-us"/>
<meta http-equiv="Revisit-After" content="30 days"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="verify-v1" content="q/WMZ+ImXM+OpT/cRjrZOprkYIdjZgMCVeImHQlfqrs=" />
<meta name="y_key" content="7181366e51f6f66b" />
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
<div id="bg1">
<div id="header">
<img src="images/4yourbody_logo.gif" alt="4yourbody Logo: Free health and nutrition information." width="375" height="80" />
<h2>Health, Nutrition and Proper Diet</h2>
<div id="bg2">
<div id="header2">
<div id="menu">
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="privacy.html">Privacy</a></li>
<li><a href="site_map.html">Site Map</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<div id="search">
<form method="get" action="http://www.google.com/custom" target="google_window">
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="windows-1252" />
<input type="hidden" name="oe" value="windows-1252" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="client" value="pub-4855258898460788" />
<input type="text" name="q" value="Search by Google" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset><input name="sitesearch" type="radio" value="http://www.4yourbody.info" />
<font size="2" face="Arial">4yourbody
<input type="radio" name="sitesearch" />
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h1>Health &amp; Nutrition</h1>
<div class="bm">
<script type="text/javascript">var addthis_pub="4yourbody";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
<img src="images/bookmarks/img01.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<div class="entry">
<div class="img_right">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";

google_ad_slot = "5145830753";
google_ad_width = 300;
google_ad_height = 250;
<script type="text/javascript"
Health and nutrition conditions in the US and
other nations thought to be doing well aren't nearly
as good as you might expect. There are many people
who believe they are eating a nutritious
<a href="diet_weight_loss/default.html">healthy
diet</a> that are actually undernourished or they are
First of all, there is a huge difference between what
your body needs nutritionally and what you think you're
getting from your diet.<i> </i>It is no longer
possible for us to get the nutrients our bodies need
for good health just by eating a simple diet the way the
nutritional pyramid says we should. Our foods do not
have the amounts of nutrients that they used to. It's no longer a
simple matter of eating your fruits and veggies to
live a life of health and well-being.</p>
Health and nutrition go hand in hand; you can not
have one without the other. If you want to get
serious about your health you need to learn what
your body really needs in the way of nutrition and
how to get it.</p>
<h2>How do I eat a healthy nutritious diet?</h2>
Maybe one hundred years ago you could have bought
your veggies at the local market and been getting
what you needed nutritionally from your diet. In
today's modern society it no longer works that way.
Through overuse and the lack of crop rotation the lands that our foods come
from have been stripped of the vitamins and minerals
necessary to grow healthy crops. This is from a
study done all the way back in the 1930's. Do you think
our lands have magically replenished themselves with the
vital nutrients we need for our survival over the past
3/4 of a century or so? Me either.</p>
<h2>My Food <i>looks</i> Healthy.</h2>
Back during World War I or World War II (I can't remember which) we had a lot of extra Nitrogen,
Phosphorous and Potassium on our hands from all of
our weapon making efforts. Well, our government,
being the good citizens of the environment they
are, started burying it in the ground. Then, they began to
notice that at some of these dump sites the plants
were much greener and healthier looking than the
surrounding foliage. To make a long story short, this
eventually lead to the discovery
that given the proper levels of these chemicals,
unhealthy crops could be made to look healthy and
nourishing even though they are not healthy plants. </p>
Our foods no longer contain the vital
nutrients in the levels our bodies need for living a healthy
lifestyle; they just look pretty. If the fruits and
vegetables that you are eating are not healthy they can
not provide the nutrients necessary for your health and
well-being, period.</p>
<h2>How do I get the nutrition I need?</h2>
This is actually quite a controversial subject. You
will find people who will tell you all kinds of crazy
stuff; I'm going to give you the straight poop.</p>
First of all, you need to eat fresh, raw fruit and
veggies every day. Even though they don't have the
nutrient levels they used to they still have a lot of
nutritional value. All you hear about are vitamins and
minerals, but they are only part of the story. You also
need <a href="nutrition/food_enzymes.html">food enzymes</a>, which you get from raw foods, and if
you're a meat eater, like myself, then you also need to
explore the
<a href="nutrition/probiotic_benefits.html">benefits of probiotics</a>.</p>
Secondly, the FDA has officially proclaimed that EVERYONE who
wants to be healthy should be taking a daily supplement
in addition to your normal diet. What the FDA doesn't
tell you, however, is that not all supplements are
created equal and that some are actually extremely
harmful. It's not all of the new herbal supplements and
such I'm talking about either. Believe it or not, your
one a day multivitamin could be harmful to your health.
There are two types of vitamin supplements on the
<a href="nutrition/whole_food_natural_vitamins.html">natural whole food vitamins</a> which are healthy
and nutritious, and synthetic vitamins that are cheap,
cause vitamin deficiencies and could actually bring on
<a href="diseases_conditions/default.html">diseases and conditions</a>.</p>
Don't be fooled by all the marketing hype. Centrum,
One a Day Vitamins and many of the other
<a href="nutrition/supplements.html">supplements</a>
that will have a familiar ring to your ear are not good
for you; in fact, it's quite the opposite. Just
about every name brand vitamin on the shelves at your
pharmacy and local convenience store contain
<a href="nutrition/synthetic_vitamins_harmful.html">harmful
synthetic vitamins</a>. They have no nutritional value
despite what the label says. They have no biological
activity in your body. And, last but not least, they have no benefits
to your health.</p>
Our bodies are priceless and yet most of us
abuse our bodies as though they have the ability to handle major
abuse year after year without paying any price. It's often many
years later when we discover all that abuse comes at a major
cost. Let's educate ourselves and others about nutrition and
our body so we can all live longer and healthier lives.</p>
<div class="meta">
<div id="sidebar">
<h2>Health Information Articles</h2>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="default.html">Health &amp; Nutrition</a></li>
<li><a href="diet_weight_loss/default.html">Diet &amp; Weight Loss</a>
<li><a href="diet_weight_loss/body_mass_index_tables.html">BMI Tables</a></li>
<li><a href="diet_weight_loss/metric_bmi_calculator.html">Metric BMI Calculator</a></li>
<li><a href="diet_weight_loss/standard_bmi_calculator.html">Standard BMI Calculator</a></li>
<li><a href="diet_weight_loss/bmi_table.pdf">Printable BMI Table</a></li>
<li><a href="diseases_conditions/default.html">Disease &amp; Conditions</a>
<li><a href="diseases_conditions/coronary_artery_disease.html">Coronary Artery Disease</a></li>
<li><a href="diseases_conditions/diabetes.html">Diabetes</a></li>
<li><a href="diseases_conditions/hearing_loss.html">Hearing Loss</a></li>
<li><a href="diseases_conditions/heart_attack.html">Heart Attack</a></li>
<li><a href="diseases_conditions/high_cholesterol.html">High Cholesterol</a></li>
<li><a href="diseases_conditions/indigestion.html">Indigestion</a></li>
<li><a href="diseases_conditions/kidney_disease.html">Kidney Disease</a></li>
<li><a href="diseases_conditions/osteoporosis.html">Osteoporosis</a></li>
<li><a href="diseases_conditions/sight_loss.html">Sight Loss</a></li>
<li><a href="diseases_conditions/sleep_problems.html">Insomnia</a></li>
<li><a href="general_health/default.html">General Health</a>
<li><a href="general_health/digestion.html">Digestion</a></li>
<li><a href="general_health/gras.html">GRAS List</a></li>
<li><a href="general_health/immune_system.html">Immune System</a></li>
<li><a href="general_health/increase_energy_levels.html">Increase Energy</a></li>
<li><a href="general_health/quit_smoking.html">Quit Smoking</a></li>
<li><a href="mental_health/default.html">Mental Health</a>
<li><a href="mental_health/mood_swings.html">Mood Swings</a></li>
<li><a href="mental_health/stress.html">Stress</a></li>
<li><a href="nutrition/default.html">Nutrition</a>
<li><a href="#">Enzymes</a>
<li><a href="nutrition/food_enzymes.html">Food Enzymes</a></li>
<li><a href="#">Minerals</a>
<li><a href="nutrition/chelated_mineral_supplement.html">Chelated Minerals</a></li>
<li><a href="nutrition/chelated_mineral_absorption.html">Chelated Mineral Absorption</a></li>
<li><a href="#">Probiotics</a>
<li><a href="nutrition/probiotic_benefits.html">Benefits of Probiotics</a></li>
<li><a href="nutrition/supplements.html">Supplements</a></li>
<li><a href="#">Vitamins</a>
<li><a href="nutrition/antioxidant_list.html">List of Antioxidants</a></li>
<li><a href="nutrition/antioxidant_vitamins.html">Antioxidants</a></li>
<li><a href="nutrition/synthetic_vitamins_harmful.html">Harmful Synthetic Vitamins</a></li>
<li><a href="nutrition/vitamin_c.html">Vitamin C</a></li>
<li><a href="nutrition/whole_food_natural_vitamins.html">Whole Food Vitamins</a></li>
<li><a href="nutrition/whole_food_synthetic_vitamins.html">Whole Food Vitamins vs Synthetics</a></li>
<li><a href="personal_care/default.html">Personal Care</a>
<li><a href="personal_care/acne_treatment.html">Acne Treatment</a></li>
<li><a href="personal_care/sensitive_skin_care.html">Sensitive Skin Care</a></li>
<li><a href="senior_health/default.html">Senior Health</a>
<li><a href="senior_health/aging.html">The Aging Body</a></li>
<li><a href="senior_health/dementia.html">Dementia</a></li>
<li><a href="senior_health/memory_loss.html">Memory Loss</a></li>
<li><a href="womens_health/default.html">Women's Health</a></li>
<h2>Nutritional &amp; Health Books</h2> <div class="ads">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_738ade2c-f41d-4b83-8d7b-94bbb88b2c4b" width="120px" height="500px"> <param name="movie" value="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&ID=V20070822%2FUS%2F4yourbodyinfo-20%2F8010%2F738ade2c-f41d-4b83-8d7b-94bbb88b2c4b&amp;Operation=GetDisplayTemplate" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><param name="allowscriptaccess" value="always" /><embed src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822%2FUS%2F4yourbodyinfo-20%2F8010%2F738ade2c-f41d-4b83-8d7b-94bbb88b2c4b&amp;Operation=GetDisplayTemplate" id="Player_738ade2c-f41d-4b83-8d7b-94bbb88b2c4b" quality="high" bgcolor="#000000" name="Player_738ade2c-f41d-4b83-8d7b-94bbb88b2c4b" allowscriptaccess="always" type="application/x-shockwave-flash" align="middle" height="500px" width="120px"></embed></object> <noscript><a href="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&ampMarketPlace=US&ID=V20070822%2FUS%2F4yourbodyinfo-20%2F8010%2F738ade2c-f41d-4b83-8d7b-94bbb88b2c4b&amp;Operation=NoScript">Amazon.com Widgets</a></noscript>
<h2>Like It? Support It!</h2>
<!--webbot bot="Include" u-include="includes/general_health/add_2.htm" tag="BODY" --><!--webbot bot="Include" u-include="includes/general_health/donate.htm" tag="BODY" --></li>
<h2>Clean, Healthy Air &amp; Water</h2>
<!--webbot bot="Include" u-include="includes/ads/125x125_environment.htm" tag="BODY" --></li>
<h2>Amazon Health</h2>
<!--webbot bot="Include" u-include="includes/ads/125x125_amazon.htm" tag="BODY" --></li>
<h2>Related Health Links</h2>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";

google_ad_slot = "9002037867";
google_ad_width = 160;
google_ad_height = 95;
<script type="text/javascript"
<div style="clear: both; height: 40px;">&nbsp;</div>
<!--webbot bot="Include" u-include="includes/general_health/copyright.htm" tag="BODY" --><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-914607-1");
} catch(err) {}</script>

Script Idgit
06-08-2009, 07:47 PM
Please. Somebody - anybody? I don't want the actual work done for me; I just want a couple examples of the HTML and CSS for calling images from a sprite so I can figure out how to do this. I've searched and searched on the net and am really confused.

06-09-2009, 02:58 PM
How about:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />

<style type="text/css" media="screen">

#wrapper{width:1237px;margin:0px auto}/* set to the width of the background image */

/* the next entries are classes which refer to the appropriate background image*/
/* need to set the size of the div to match that of the background image as well */

.bg02 { background: url(http://4yourbody.info/images/gen1.png) 0 -900px; height:90px;}
.bg03 { background: url(http://4yourbody.info/images/gen1.png) 0 -1020px; height:88px;position:relative}
.yourbody_logo { background: url(http://4yourbody.info/images/gen1.png) 0 -72px;height:75px;width:310px;position:absolute;top:2px;left:200px;}

/* just for display */
.bg02, .bg03, .yourbody_logo{border:1px solid red}

<div id="wrapper">
<div class="bg02"><p>This is the top image</p></div>
<div class="bg03"><p>This is the green header like-thing</p>
<div class="yourbody_logo"><p>This is the logo</p></div>


Does that help?

Script Idgit
06-09-2009, 08:05 PM
This is exactly what I was asking for. Thanks a lot, brother. :thumbsup:

The edit button is gone from my original post. Could a moderator please mark this thread as resolved.

Also, this would be a very good thread to tag for anyone wanting to learn how to use sprite images.