Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.</p> <p>With that said, there are a couple solutions if your layout was refined to:</p> <pre><code>&lt;html&gt; ... &lt;body&gt; &lt;div id='page_container'&gt; &lt;div id='header'&gt;&lt;/div&gt; &lt;div id='contents'&gt;&lt;/div&gt; &lt;div id='footer'&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test page&lt;/title&gt; &lt;style&gt; body{ background-color:green; margin:0px; } #page_container{ width:700px; margin-left:auto; margin-right:auto; display:table; height:100%; } #header{ background-color:red; text-align:center; font-size:25px; font-weight:600; height:75px; display:table-row; } #contents{ background-color:yellow; display:table-row; } #footer{ background-color:blue; height:25px; display:table-row; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='page_container'&gt; &lt;div id='header'&gt;Title of your page&lt;/div&gt; &lt;div id='contents'&gt; Foo bar baz&lt;br/&gt; Foo bar baz&lt;br/&gt; Foo bar baz&lt;br/&gt; Foo bar baz&lt;br/&gt; Foo bar baz&lt;br/&gt; Foo bar baz&lt;br/&gt; &lt;/div&gt; &lt;div id='footer'&gt;This is a footer&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.</p>
    singulars
    1. This table or related slice is empty.
    1. POMaking a footer not rise above the bottom of the screen without extraneous markup
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USAzmisov
    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. VTDownMod
    1. COAs a side note, the way I believe HTML should be designed is in small chunks. The html design you have laid out is sort of all left out in the open, without a home. I would much rather put everything in a page_container div, and then wrap all the page contents in a contents div. Then you could break up the contents into smaller chunks like sidebar1, sidebar2, mainbar, etc...
      singulars
      1. PO
      1. USAzmisov
    2. COOne more note: the only other way I can think of doing it would be with a min-height:100% on the contents div. Apparently, however, specifying a min-height prevents any negative-margining/border-box styling. If there were a way to fix that, you could avoid using display:table and make it cross-browser. Another note: the height:100% on the page container doesn't work when a doctype is declared. You'd have to look into that for a fix, since I don't know one off the top of my head.
      singulars
      1. PO
      1. USAzmisov
    3. COThere is a new CSS3 property 'box-sizing' that you can set to 'border-box' that will include padding and borders in the specified width instead them adding to the width. http://reference.sitepoint.com/css/moz-box-sizing
      singulars
      1. PO
      1. USJason Christa
 

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