Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="https://www.google.com/search?sugexp=chrome,mod=11&amp;sourceid=chrome&amp;ie=UTF-8&amp;q=css+sprites" rel="nofollow">CSS Sprite <em>(Google)</em></a> is a big image (most probably .png) consisting out all of your required images(6 in yoyr case), in a grid-like structure. Benefit is that you will need only One HTTP request instead of <code>N</code>HTTP requests (where <code>n</code> is your number of images).</p> <p>Your problem looks like the CSS Styling. But if you want to use sprites, you need one master image (sprite.png) having transparent background and having width of x*n (where <code>X</code>= width of your one div/category, as you shown in <code>Desired Outcome</code> in your question. <code>N</code>= number of total images, 6 here.) The height of <code>sprite.png</code> should be equal to the tallest of your images.</p> <p>So, copy all your images <code>stero.png</code>, <code>books.png</code> into a new <code>sprite.png</code> as described above.</p> <p>Then you could use following <strong>HTML:</strong></p> <pre><code>&lt;div id="wrapper"&gt; &lt;div class="row"&gt; &lt;div id="books" class="cell"&gt; &lt;/div&gt;&lt;!--//books--&gt; &lt;div id="stereo" class="cell"&gt; &lt;/div&gt;&lt;!--//stereo--&gt; &lt;div id="pen" class="cell"&gt; &lt;/div&gt;&lt;!--//pen--&gt; &lt;/div&gt;&lt;!--//row--&gt; &lt;div class="row"&gt; &lt;div id="mag" class="cell"&gt; &lt;/div&gt;&lt;!--//mag--&gt; &lt;div id="bag" class="cell"&gt; &lt;/div&gt;&lt;!--//bag--&gt; &lt;div id="paper" class="cell"&gt; &lt;/div&gt;&lt;!--//paper--&gt; &lt;/div&gt;&lt;!--//row--&gt; &lt;/div&gt;&lt;!--//wrapper--&gt; </code></pre> <p><strong>CSS:</strong> </p> <pre><code>#wrapper{ margin: 5px auto; // to center the div on page width: 80%; } .row{ //stack'em in 3x2 grid clear:both; } .cell{ background-color: #fefefe; background-url: images/sprite.png; //Set common background UR float: left; //stack each other to left height: 15px; //desired height width: 30px; //desired width border: 3px solid #c3c3c3; //set border } //set specific background-position for each div //(Remember we are using same image for all these divs? #books{ background-position: -0px -0px; } //image starts at top:0, left:0px #stereo{ background-position: -0px -30px; } //image starts at top:0, left:30px #pen{ background-position: -0px -60px; } //image starts at top:0, left:60px #mag{ background-position: -0px -90px; } #bag{ background-position: -0px -120px; } #paper{ background-position: -0px -150px; } </code></pre> <p>You could also use your existing 6 images to achieve your desired result. Just set a required height,width of the div. Set <code>background-position:top-left;</code>. If the image is smaller that the div's dimensions, the image will be placed in top-left corner.</p> <p><strong>EDIT:</strong></p> <p>Ok, saw your live-page's code. You already are using a sprite file.</p> <p>From seeing your <code>How It looks</code> &amp; <code>Desired</code> pages, looks like you want to add that extra white-space around the right-bottom side of image. Right?? If yes, you could add the required white-space in the categories.png and use <code>background-position:top-left;</code> in CSS. It will prevent the image to repeat in the horizontal side.</p>
    singulars
    1. This table or related slice is empty.
    1. POCSS Sprite: Setting sprite image for several categories
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDavChana
    1. USDavChana
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCSS Sprite: Setting sprite image for several categories
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis seem to work. Thanks!
      singulars
      1. PO
      1. UStechAddict82
    2. CO@charliecodex23 You are welcome..
      singulars
      1. PO
      1. USDavChana
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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