Databases
StackOverflow2013
Postsdbo
POWhat is the right way to structure HTML and CSS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the right way to structure HTML and CSS?
    primarykey
    data
    text
    <p>So, I'm a script monkey at the core. Lately I seem to get stuffed into doing design too for some odd reason and, well, let's just say I should probably have studied better.</p> <p>Either way - What I ask is, what's the Right way to structure a website?</p> <p>This one has a header with links, then a block with tabs, right under another block which consists of two parts and under those a few others who I'm not at yet.</p> <p>However, the thing is, I need to make a block that consists of two parts that are in the same box but structured independently.</p> <p>I'll try to draw it up.</p> <pre><code>Browser window..................-[]X ------------------------------------ |.................Header Links Here| ||Tab|Tab|Tab|_____________........| ||Tab content.............|Small...| ||........................|Section.| ||---Line signing new section------| ||........................|Another.| ||..Content Area..........|Small...| ||........................|Section.| ------------------------------------ </code></pre> <p>My issue is in the division of small sections and tab/content areas.</p> <p>I tried using floats, making them as tables, aligning and whatnot.</p> <p>The putting float:left on both tables worked. Kinda. Until I tried to resize the window.</p> <p>So, how do you PROPERLY structure a site like this? three divs and tables? Something else?</p> <p>I'll clarify this again: It's the Code to use to create the look above that I'm trying to figure out the proper way to do, not the <em>design</em></p> <p>As requested here's the current structure I have</p> <pre><code>&lt;div class="container"&gt; &lt;div class="topBlock"&gt; //Header Links Here &lt;/div&gt; &lt;div class="inputBlock"&gt; &lt;ul id="tabs"&gt; &lt;li&gt;&lt;a href="#strict"&gt;Strict&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#flex"&gt;Flex&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#multiStep"&gt;Multi-Step&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="strict" class="tabContent"&gt; &lt;table class="tableLeft"&gt; &lt;tr&gt; &lt;td&gt;From&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="inputBlockFrom" type="text" placeholder="FROM"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;To&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="inputBlockTo" type="text" placeholder="TO"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="tableRight"&gt; &lt;tr&gt; &lt;td&gt;Leave&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="inputBlockLeave" type="text" name="leave" placeholder="LEAVE"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="inputBlockOne" type="radio" name="one"/&gt;&lt;/td&gt; &lt;td&gt;One&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Return&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="inputBlockReturn" type="text" name="return" placeholder="RETURN"/&gt;&lt;/td&gt; &lt;td&gt;&lt;input id="inputBlockBut" type="radio" name="one" checked/&gt;&lt;/td&gt; &lt;td&gt;Return&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input id="inputBlockSubmit" type="submit" value="Search"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="flex" class="tabContent"&gt; Test Two &lt;/div&gt; &lt;div id="multiStep" class="tabContent"&gt; Test Three &lt;/div&gt; &lt;/div&gt; &lt;div class="mapBlock tabContent"&gt; &lt;table class="tableLeft"&gt; &lt;tr&gt;&lt;td&gt; &lt;div id="map" class="google_map"&gt;&lt;/div&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;table class="tableRight smallTable"&gt; &lt;tr&gt; &lt;td&gt;Distance&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;[-------------|------------]&lt;/td&gt; //Slider to be &lt;/tr&gt; &lt;/table&gt; &lt;table class="tableRight smallTable"&gt; &lt;tr&gt; &lt;td&gt;Choice / Choice&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="tableRight"&gt; &lt;tr&gt; &lt;td&gt;Show:&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt; &lt;td&gt;Price&lt;/td&gt; &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt; &lt;td&gt;Button!&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Sorry if it's messed up in the whitespacing somewhere..</p> <p>The CSS:</p> <pre><code>body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; background-color: #e2edff; } .container { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } .pageBlock { /* To future me: This class is for One Full Screen ideas */ min-height: 300px; } .topBlock { text-align: right; color: #000000; } .topBlock a { text-decoration: none; color: #000000; } .tableLeft { width: 75%; float: left; border-right: dotted 2px black; } .tableRight { float: left; overflow: auto; } .smallTable { border-bottom: 1px dotted #c9c3ba; } .google_map { height: 270px; width: 100%; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmeagar
    1. USMantar
    plurals
    1. PL
      singulars
      1. LTLinked
    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
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. USMantar
      1. VTBountyStart
    2. VO
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. USingh.am
      1. VTFavorite
    3. VO
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWrite semantic mark-up first, and then try to style that. By all means post a demonstration/sample mark-up for a given page, and we *might* be able to help you, but this seems to fall outside of a 'code' (Stack Overflow) question, and more towards a 'design' ([Doctype](http://doctype.com/)) question.
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. USDavid Thomas
    2. COI'll the current mess, just a sec
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. USMantar
    3. CO@Meke, personally I'd strip out the `table` elements, and identify other means of attributing meaning to the contents, whether with `ol`, `ul`, `dl`, `div`, `span`, `microformats...laying pages out with tables often *works* (albeit only for a very *limited* value of 'works'), but it's not the cleanest way of doing it. And adds hugely to the work required, later, to maintain/update the page(s).
      singulars
      1. POWhat is the right way to structure HTML and CSS?
      1. USDavid Thomas
 

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