Databases
StackOverflow2013
Postsdbo
PONested divs and CSS semantics
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONested divs and CSS semantics
    primarykey
    data
    text
    <p>I have a feeling that this is a subjective question, but perhaps there's something somewhere on the interwebs that has attempted to standardize this already and I'm just not aware of it (but someone else who will post here is).</p> <p>Just a note: Please disregard any errors or omitted element attributes as I'm looking for suggestions solely regarding the authoring of the .css file itself. Both methods work. However, I personally prefer .css B as it seems more correct, but maintenance can be a pain if you're working with nested divs whos parents change class names.</p> <p>Let's say I have a simple form on a page contained inside a <code>div</code> container. The form has two three fields: two input text boxes and one textarea (from, subject and message).</p> <p>Which would be the more "semantically correct" CSS to accompany the following form:</p> <pre><code>&lt;div id="contact"&gt; &lt;form action="/index.php/forms/contact" method="POST"&gt; &lt;label for="txt_replyto"&gt;From:&lt;/label&gt;&lt;input type="text" id="txt_replyto"&gt;&lt;/input&gt; &lt;label for="txt_replyto"&gt;Subject:&lt;/label&gt;&lt;input type="text" id="txt_subject"&gt;&lt;/input&gt; &lt;label for="txt_replyto"&gt;Message:&lt;/label&gt;&lt;textarea id="txt_msg"&gt;&lt;/textarea&gt; &lt;/form&gt; </code></pre> <p></p> <p>(.css A)</p> <pre><code>&lt;style&gt; div#contact { width: 350px; } div#contact form { width: 100%; } div#contact label { float: left; width: 20%; text-align: right; } div#contact input { margin-left: 1%; width: 79%; float: left; } div#contact textarea { margin-left: 1%; width: 79%; float: left; } &lt;/style&gt; </code></pre> <p>or </p> <p>(.css B)</p> <pre><code>&lt;style&gt; div#contact { width: 350px; } div#contact form { width: 100%; } div#contact form label { float: left; width: 20%; text-align: right; } div#contact form input { margin-left: 1%; width: 79%; float: left; } div#contact form textarea { margin-left: 1%; width: 79%; float: left; } &lt;/style&gt; </code></pre> <p>Are there any pre-defined standards for this sort of thing (Google'ing it didn't yield much), or is it solely personal preference?</p> <p>Edit: Thar. Updated based on Jack's reminder :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDemian Brecht
    1. USDemian Brecht
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PONested divs and CSS semantics
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PONested divs and CSS semantics
      1. USMichael Irigoyen
      1. VTFavorite
    3. VO
      singulars
      1. PONested divs and CSS semantics
      1. This table or related slice is empty.
      1. VTDownMod
    1. COIs there a reason you're not using the actual label element? http://www.w3.org/TR/html401/interact/forms.html#h-17.9
      singulars
      1. PONested divs and CSS semantics
      1. USJackCA
    2. COOther than forgetting that it was there? ;) Nope. Will be changing that though.
      singulars
      1. PONested divs and CSS semantics
      1. USDemian Brecht
    3. COPersonally, I would also give the form its own id and then use that in the css ala form#contact. If you do those two changes it would completely reconstruct your question and setup, but it may look better.
      singulars
      1. PONested divs and CSS semantics
      1. USJackCA
 

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