Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Unfortunatelly Kyle's answer will do nothing about centering the inner div vertically.</p> <p>Liquid vertical alignment is close to impossible using CSS2.1. Given your constraints are there is a circle inside the outer div, that is as tall as the div itself, you'll need to use Javascript to calculate the absolute positioning and dimensions of the inner div that will fit in the circle. Let's assume you give the outer's dimensions fully, and specify a given height for the inner div.</p> <p>Markup</p> <pre><code>&lt;div id="outer"&gt; &lt;div id="inner"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#outer { position: relative; width: 100px; height: 100px; backgroud-image: blah } #inner { position: absolute; height: 60px; } </code></pre> <p>Javascript (assuming JQuery)</p> <pre><code>// prepare for semi-intense math var radius = $('#outer').width()/2; var height = $('#inner').height(); var d = Math.sqrt(radius*radius - height*height/4); $('#inner').width(2*d) .css('top', (radius - height/2) + 'px') .css('left', (radius - d) + 'px'); </code></pre> <h2>Edit: Explanation</h2> <p>What we need is to calculate <code>inner.left</code> (call it <em>x</em>), <code>inner.top</code> (call it <em>y</em>) and <code>inner.width</code> (call it <em>w</em>). This is what this problem looks like, the values in red is what we are after:</p> <p><img src="https://i.stack.imgur.com/tT2Qr.png" alt="Circle maths"></p> <p>To note, we have an origin (0,0) for the coordinates of all points. The circle has a radius equal to <code>outer.width/2</code> (since the circle is as high and long as this div). Thus in our coordinate system, the center, of both divs and the circle, is at (<em>r</em>, <em>r</em>) (<em>r</em> = radius).</p> <p>First we can deduce the y coordinate from the diagram, because we know the height <em>h</em>.</p> <pre><code>y = r - h/2 </code></pre> <p>In the diagram, the point we're after lies on the circle, thus we use the equation for the circle and solve for <em>x</em>. So the equation for the circle given center at (<em>r</em>, <em>r</em>) and radius <em>r</em> (remembering high-school maths):</p> <pre><code>(x - r)^2 + (y - r)^2 = r^2 (x - r)^2 + (r - h/2 - r)^2 = r^2 --- replacing y x = r ± sqrt(r^2 - 1/4*h^2) --- solving for x </code></pre> <p>This x is actually two different x's, one for each point at this y coordinate and depends on whether we take the + or - square root in the answer. The one we need is the lesser of the two. The width of the inner div is given by the difference between these two x's.</p> <pre><code>w = r + sqrt(r^2 - 1/4*h^2) - [r - sqrt(r^2 - 1/4*h^2)] w = 2*sqrt(r^2 - 1/4*h^2) </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POPlacing and centering div inside a div
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USEzequiel Muns
    1. USEzequiel Muns
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POPlacing and centering div inside a div
      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. VTUpMod
    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. VTAcceptedByOriginator
    1. COThis could (potentially) also be achieved using CSS3 expressions, but I'm not that familiar with them.
      singulars
      1. PO
      1. USEzequiel Muns
    2. COthx works great..but just had a doubt the height of inner div ..can it be made to the maximum possible height that can be fixed inside the square?
      singulars
      1. PO
      1. USAmitd
    3. COHa, just was editing my answer as you posted this! good job :)
      singulars
      1. PO
      1. USKyle
 

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