Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well in my opinion I think you should ask this question at code review as there isn't really one "right" answer. </p> <p>But since you asked. I would suggest the following.</p> <p><strong>Header:</strong></p> <p>For starters, your header should use a heading tag (<em>for proper semantics</em>) and I would recommend using a <code>class</code> instead of an <code>id</code>. This way you can easily re-use it if needed. Also there is no need for the <code>center</code> tag. Centering could be done easily with CSS. </p> <pre><code>&lt;div id="Header"&gt; &lt;center&gt; Armor Games Header, Login and Acc Registration &lt;/center&gt; &lt;/div&gt; </code></pre> <p><strong>Categories:</strong></p> <p>A semantic way to do categories would be to make use of an "inline list structure" and wrap the text of each item in an <code>&lt;a&gt;</code>. <em>Assuming these are going to be linked to new pages</em>. And again a <code>class</code> might be better than an <code>id</code> if this is something you intend to re-use.</p> <pre><code>&lt;div id="Categories"&gt; [Several Categories and other clickables!] - [Random Game] - [Quests] &lt;/div&gt; </code></pre> <p><strong>Search:</strong></p> <p>For search I would suggest using an <code>input</code> field. You may or may not need to wrap it in a container depending on how you want to position it on the page. If the goal is to mirror the "Armor Games" website then you will need the container regardless. </p> <pre><code>&lt;div id="Search"&gt; Search Bar e and rest &lt;/div&gt; </code></pre> <p><strong>Images:</strong></p> <p>This seems fine for what you currently have, with the exception of the "title", this should be a heading tag instead of a div. However if you intend to have more content associated with each image you will most likely have to wrap each in a <code>div</code>. Or possibly a better solution would be to create columns and wrap the content of each in a <code>ul</code>. </p> <pre><code>&lt;div id="LatestQuests"&gt; &lt;div id="LatestQuestsTitle"&gt; Latest Quests &lt;/div&gt; &lt;img src="Images/Imagem1.jpg" class="QuestsPromotedImages"&gt; &lt;img src="Images/Imagem2.jpg" class="QuestsPromotedImages"&gt; &lt;img src="Images/Imagem3.png" class="QuestsPromotedImages"&gt; &lt;img src="Images/Imagem4.png" class="QuestsPromotedImages"&gt; &lt;img src="Images/Imagem5.png" class="QuestsPromotedImages"&gt; &lt;img src="Images/Imagem6.png" class="QuestsPromotedImages"&gt; &lt;/div&gt; </code></pre> <p>These are some basic things I would suggest. And like I said in my previous comment there may not be one "right" way to do this and your layout / HTML structure could vary depending on content / document type. For example if using HTML5 you might want to look into proper semantics for new HTML5 tags, such as <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;nav&gt;</code>, and <code>&lt;section&gt;</code> to name a few. Also if possible use CSS as much as possible. There are developer's who will use tables to easily position things. But in most cases this is not semantic. Tables are meant to be used for tabular data. Anyways, I think you are off to a pretty good start. If you want more specific advice it might be best to ask about smaller chunks of code at a time on <a href="https://codereview.stackexchange.com/">code review</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. PODivs, Just A Small Example That I Need
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USKris Hollenbeck
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODivs, Just A Small Example That I Need
      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
    1. COthank you very much :oo However, I just made the header with <h> instead of a <div> and on top and beneath the header gets white spaces. The css style is the same so I'm guessing it's because it's a header and not a div! Although there's probably some way to circumvent this :P
      singulars
      1. PO
      1. USHarlequin
    2. COHeader tags are as follows: `<h1></h1>`,`<h2></h2>`,`<h3></h3>`,`<h4></h4>`,`<h5></h5>`,`<h6></h6>`. Browsers will add some padding and margin to HTML elements by default. To get all the browsers to look the same you should use a CSS reset. A simple reset would be something like `*{padding:0;margin:0;}` ... However I prefer this one, http://meyerweb.com/eric/tools/css/reset/
      singulars
      1. PO
      1. USKris Hollenbeck
    3. COI have a wrapper, body {margin:0; padding:0;}, and it helped taking out white spaces at the top and sides. For the header white spaces, top and bot, I made it absolute, which screwed up divs beneath it and all floated top :P Working it out
      singulars
      1. PO
      1. USHarlequin
 

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