Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Something like this? <a href="http://jsfiddle.net/eW9kR/1/" rel="nofollow">http://jsfiddle.net/eW9kR/1/</a></p> <p>Please do tell me if this isn't what you're going for, and i'll do my best to help.</p> <p>Edit: Having seen your better description, i came up with this solution: <a href="http://jsfiddle.net/dPLDr/1/" rel="nofollow">http://jsfiddle.net/dPLDr/1/</a></p> <p>Basically, you first create a wrapper, div.wrap to hold the other divs. In that, you then place your two divs.</p> <pre><code>&lt;div class="wrap"&gt; &lt;div class="big"&gt; &lt;/div&gt; &lt;div class="small"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>You then set a width on the wrapper.</p> <pre><code>div.wrap { width: 300px; } </code></pre> <p>This makes sure that the divs contained within will expand to 300 px unless told not to.</p> <p>We set a background and border on our contained divs ..</p> <pre><code>div.big, div.small { background-color: #F00; border: 1px solid #000; } </code></pre> <p>You can then set whatever height you want on the big element, and a width and height on the smaller element. Then, you need to position your smaller div where it needs to be, i chose to float it to the right based on your illustration.</p> <p>And now comes the magic: In order to give the impression of a continous border, i remove the top border from the small element, and position it -1px relative to its original position on the Y axis. That way, it overlaps the big divs border, obscuring it.</p> <pre><code>div.small { border-top: none; position:relative; top: -1px; } </code></pre> <p>Finally, you set the appropriate border-radii. et voila.</p> <p>However, the top left corner of the smaller div is problematic, since it needs to be rounded <em>away</em> from the div in question. I attemped to make a workaround, but couldn't get it to look well with only CSS and HTML.</p> <p>As a pointer in the right direction though, make a 5px x 5px PNG that looks like said rounded border should, place it in the smaller div, and position it -6px relative on the x axis.</p> <p>Good luck!</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to create a non-rectangular DIV in HTML and CSS?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USAndreas Eriksson
    1. USAndreas Eriksson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. VTUpMod
    1. COThis is a great solution. You should copy and paste the code into your answer though! Then I'll throw you a +1! Remember, fiddles aren't forever... or something.
      singulars
      1. PO
      1. USmrtsherman
 

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