Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on <a href="http://jsbin.com/ahatir/1" rel="nofollow"><strong>JSBin</strong></a>.</p> <p>Basically the point is that you enclose the image in a <em>relatively positioned <code>div</code></em>, then absolute position the hotspots inside the same <code>div</code>. Inside the hotspots <code>div</code>s you will have the more info elements, showing only on <code>:hover</code> of their parents.</p> <p>This makes it simple, and far more accessible.</p> <h2>Update: cropping the image equally from both sides</h2> <p>If you want to keep the image centered and still not use any javascript, you could set the required image as a <code>background-image</code> of the container, and setting its <code>background-position</code> parameters to <code>center center</code>.</p> <p>You would have to make sure that the <code>width</code> of this <code>div</code> is set to the width of your image, and the <code>max-width</code> to 100%, so that when the window gets resized below the image width it stays at the center.</p> <p>Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:</p> <p>I created a wrapper <code>div</code> for the hotspots with these characteristics:</p> <pre><code>margin: 0 auto; position: relative; width: 0px; </code></pre> <p>This basically makes sure that the wrapper <code>div</code> finds the center of our image. Then, you would position the hotspots <strong>relatively to the top-center position</strong> of the image, instead of the <strong>top-left</strong> as a starting point.</p> <p>Then you have what you are looking for.</p> <p><a href="http://jsbin.com/ahatir/5" rel="nofollow"><strong>Working demo</strong></a></p>
    singulars
    1. This table or related slice is empty.
    1. POInteractive HTML webpage
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSunyatasattva
    1. USSunyatasattva
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POInteractive HTML webpage
      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
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHow to I make my main wrapper div stay centered vertically on screen? If the screen is smaller than the image width I want it centered with no scrollbars. So it's cutting off the right and left side equally.
      singulars
      1. PO
      1. USStian Berg Larsen
    2. COI think this is a fairly different question from the original one, perhaps you should open a new question. By centered you mean [**this**](http://jsbin.com/ahatir/4)? Can you be more specific as what do you mean with the second statement?
      singulars
      1. PO
      1. USSunyatasattva
    3. COYes, almost like that. Except when you make the width of the browser smaller than the image, I want it to still stay centered. Which means it will be cropped equally on both left and right side.
      singulars
      1. PO
      1. USStian Berg Larsen
 

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