Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on <strong>any given block element</strong> on the page.</p> <p>As <a href="https://stackoverflow.com/questions/609517/why-em-instead-of-px/609541#609541">Henrik Paul</a> and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys <kbd>Ctrl</kbd>+<kbd>+</kbd> or <kbd>Ctrl</kbd>+<kbd>-</kbd>. So a good practice is to use em's instead. </p> <h2>Using px to define the width</h2> <p>Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:</p> <pre><code>&lt;div class="date-box"&gt; &lt;p class="month"&gt;July&lt;/p&gt; &lt;p class="day"&gt;4&lt;/p&gt; &lt;/div&gt; </code></pre> <p>A simple implementation would defining the width of the <code>date-box</code> class in px:</p> <pre><code>* { margin: 0; padding: 0; } p.month { font-size: 10pt; } p.day { font-size: 24pt; font-weight: bold; } div.date-box { background-color: #DD2222; font-family: Arial, sans-serif; color: white; width: 50px; } </code></pre> <h2>The problem</h2> <p>However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as <a href="https://stackoverflow.com/questions/609517/why-em-instead-of-px/609543#609543">flodin</a> points out. This is because the box will remain the same size in width as it is locked to <code>50px</code>. </p> <h2>Using em instead</h2> <p>A smarter way is to define the width in ems instead:</p> <pre><code>div.date-box { background-color: #DD2222; font-family: Arial, sans-serif; color: white; width: 2.5em; } * { margin: 0; padding: 0; font-size: 10pt; } // Initial width of date-box = 10 pt x 2.5 em = 25 pt // Will also work if you used px instead of pt </code></pre> <p>That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in <code>*</code> as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.</p>
    singulars
    1. This table or related slice is empty.
    1. POWhy em instead of px?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USSpoike
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POWhy em instead of px?
      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. COI'm wondering: How will it adjusts to grid-systems using percentages for width? Will it break it if the contianing block is given a width of 100%?
      singulars
      1. PO
      1. UShugo der hungrige
 

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