Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2008
    Location
    Talladega, AL
    Posts
    45
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Sprite Images, CSS and HTML - Need Starter Help

    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. 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.
    Code:
    .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
    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">
    <head>
    <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
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    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
    ultags[t].style.visibility="visible"
    ultags[t].style.display="none"
    }
    }
    }
    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
    </script>
    </head>
    <body>
    <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>
    </div>
    <div id="bg2">
    <div id="header2">
    <div id="menu">
    <ul>
    <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>
    </ul>
    </div>
    <div id="search">
    <form method="get" action="http://www.google.com/custom" target="google_window">
    <fieldset>
    <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" />
    Web</font>
    </form>
    </div>
    </div>
    </div>
    <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>
    </div>
    <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>
    <script type="text/javascript"
                                        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                                        </script>
    </div>
    <p>
    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 
    malnourished.</p>
    <p>
    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>
    <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>
    <p>
    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>
    <p>
    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>
    <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>
    <p>
    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>
    <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>
    <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 
    market, 
    <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 
    different 
    <a href="diseases_conditions/default.html">diseases and conditions</a>.</p>
    <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>
    <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>
    <div class="meta">
    </div>
    </div>
    </div>
    <div id="sidebar">
    <ul>
    <li>    
    <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>
        <ul>
        <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>
        </ul>
        </li>
    <li><a href="diseases_conditions/default.html">Disease &amp; Conditions</a>
        <ul>
        <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>
        </ul>
    </li>
    <li><a href="general_health/default.html">General Health</a>
      <ul>
      <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>
      </ul>
    </li>
    <li><a href="mental_health/default.html">Mental Health</a>
        <ul>
        <li><a href="mental_health/mood_swings.html">Mood Swings</a></li>
        <li><a href="mental_health/stress.html">Stress</a></li>
        </ul>
    </li>
    <li><a href="nutrition/default.html">Nutrition</a>
            <ul>
        <li><a href="#">Enzymes</a>
            <ul>
            <li><a href="nutrition/food_enzymes.html">Food Enzymes</a></li>
            </ul>
        </li>
        <li><a href="#">Minerals</a>
            <ul>
            <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>
            </ul>
        </li>
        <li><a href="#">Probiotics</a>
            <ul>
            <li><a href="nutrition/probiotic_benefits.html">Benefits of Probiotics</a></li>
            </ul>
        </li>
        <li><a href="nutrition/supplements.html">Supplements</a></li>
        <li><a href="#">Vitamins</a>
            <ul>
            <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>
            </ul>
        </li>
    </ul>
    </li>
    <li><a href="personal_care/default.html">Personal Care</a>
        <ul>
        <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>
        </ul>
    </li>
    <li><a href="senior_health/default.html">Senior Health</a>
        <ul>
        <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>
        </ul>
    </li>
    <li><a href="womens_health/default.html">Women's Health</a></li>
    </ul>
    </div>
    </li>
    <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>
    </div>
    </li>
    <li>
    <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>
    <li>
    <h2>Clean, Healthy Air &amp; Water</h2>
    <!--webbot bot="Include" u-include="includes/ads/125x125_environment.htm" tag="BODY" --></li>
    <li>
    <h2>Amazon Health</h2>
    <!--webbot bot="Include" u-include="includes/ads/125x125_amazon.htm" tag="BODY" --></li>
    <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>
    <script type="text/javascript"
                                                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                                                </script>
    </div>
    </li>
    </ul>
    </div>
    <div style="clear: both; height: 40px;">&nbsp;</div>
    </div>
    </div>
    </div>
    </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");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>
    Last edited by Script Idgit; 05-27-2009 at 09:12 AM. Reason: Forgot to upload image - de de de

  • #2
    New Coder
    Join Date
    Mar 2008
    Location
    Talladega, AL
    Posts
    45
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    How about:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title></title>
    	<meta http-equiv="content-type" 
    		content="text/html;charset=utf-8" />
    		
    <style type="text/css" media="screen">
    
    body,p{margin:0;padding:0;color:red;text-align:center;}
    p{line-height:75px}
    #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}
    
    
    </style>
    </head>
    <body>
    <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>
    	</div>
    </div>
    
    </body></html>
    Does that help?

  • Users who have thanked SB65 for this post:

    Script Idgit (06-09-2009)

  • #4
    New Coder
    Join Date
    Mar 2008
    Location
    Talladega, AL
    Posts
    45
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This is exactly what I was asking for. Thanks a lot, brother.

    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.
    Last edited by Script Idgit; 06-09-2009 at 07:11 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •