Databases
StackOverflow2013
Postsdbo
POCSS Sprite: Setting sprite image for several categories
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Sprite: Setting sprite image for several categories
    text
    copied!<p>I am currently working with css sprite images for my site. But I am running into css styling issues. I have 6 categories with each having an image beside. When applying the image sprite I get repeated images of the same object. </p> <p>How can I get each category with their respective image through css &amp; sprite? If you like to look at the live examples below are the links.(ps sorry for the horrible html structure)</p> <p>Thank you</p> <p><strong>How it looks:</strong></p> <p><em>Sprite Images:</em> <a href="http://webprolearner2346.zxq.net/css-test/#" rel="nofollow noreferrer">Click Here</a></p> <p><em>Individual Images:</em> <a href="http://webprolearner2346.zxq.net/css-test2/" rel="nofollow noreferrer">Click Here</a></p> <p><strong>Desired Outcome:</strong></p> <p><img src="https://i.stack.imgur.com/9jhHa.png" alt="enter image description here"></p> <p><strong>CSS part related</strong></p> <pre><code>&lt;style&gt; #index_categories { background: #fff; float: left; width: 255px; height: 125px; margin: 10px 15px 10px 40px; padding: 5px; font-size: 97%; vertical-align: middle; background: url( http://webprolearner2346.zxq.net/css-test/images/categories.png) no-repeat top left; } .index_thumb { padding: 5px; } .index_categories_list { text-indent: 5px; padding-left: 10px; } .index_cat { list-style-type: none; } #listing { background: #fff; width: 95%; height: 115px; padding: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; margin-top: 5px; } .listing_pic { float: left; padding: 10px; } #whitebox { background: #fff; width: 95%; min-height: 200px; padding: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; margin-top: 5px; } .sprite-books{ background-position: 0 0; width: 87px; height: 87px; } .sprite-tshirt{ background-position: 0 -137px; width: 87px; height: 87px; } .sprite-stereo{ background-position: 0 -274px; width: 83px; height: 83px; } .sprite-chair{ background-position: 0 -407px; width: 87px; height: 87px; } .sprite-key{ background-position: 0 -544px; width: 83px; height: 83px; } .sprite-cake{ background-position: 0 -677px; width: 87px; height: 87px; } &lt;/style&gt; </code></pre> <p><strong>HTML snippet</strong></p> <pre><code>&lt;div class="contentPost" style="height:900px;"&gt; &lt;div id="index_categories" class="sprite-books"&gt; &lt;h3&gt;&lt;a class="frontLinks" href="#"&gt;Category 1&lt;/a&gt;&lt;/h3&gt; &lt;ul class="index_cat"&gt; &lt;li&gt;&lt;a href="#"&gt;Books&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="index_categories " class="sprite-stereo"&gt; &lt;h3&gt;&lt;a class="frontLinks" href="#"&gt;Category 2&lt;/a&gt;&lt;/h3&gt; &lt;ul class="index_cat"&gt; &lt;li&gt;&lt;a href="#"&gt;Stereo&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="index_categories" class="sprite-chair"&gt; &lt;h3&gt;&lt;a class="frontLinks" href="#"&gt;Category 3&lt;/a&gt;&lt;/h3&gt; &lt;ul class="index_cat"&gt; &lt;li&gt;&lt;a href="#"&gt;Chair&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload