Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can <a href="http://www.rapidxhtml.com/order.html" rel="nofollow noreferrer">supply HTML or a Photoshop design and have it coded</a> up for well under a grand (1k). Or <a href="http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/" rel="nofollow noreferrer">get HTML/CSS designs free</a>.</p> <p>Then there is one thing you need to know and another two you need to work out:</p> <ol> <li><p>all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's <a href="http://rads.stackoverflow.com/amzn/click/0321410971" rel="nofollow noreferrer">Transcending CSS</a> is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.</p></li> <li><p>you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)</p></li> <li><p>what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's <a href="http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts" rel="nofollow noreferrer">a good start for multi-column layouts</a>. If you're a programmer, learn to use a framework like <a href="http://mark.stosberg.com/blog/2008/12/titanium-a-new-release-and-more.html" rel="nofollow noreferrer">Django</a> (Python), <a href="http://mark.stosberg.com/blog/2008/12/titanium-a-new-release-and-more.html" rel="nofollow noreferrer">Titanium</a> (Perl), <a href="http://accidentaltechnologist.com/ruby/10-alternative-ruby-web-frameworks/" rel="nofollow noreferrer">something smaller in Ruby</a> (because Ruby on Rails is a bit big to start with) or one in your favourite language.</p></li> </ol> <p>Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:</p> <ol> <li><p>understand inheritance (the 'cascade' in CSS) and the fact that <em>anything</em> can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);</p></li> <li><p>learn about <a href="http://www.webdesignfromscratch.com/html-css/css-block-and-inline.php" rel="nofollow noreferrer">block and inline elements</a> (<a href="http://www.webdesignfromscratch.com/articles-and-tutorials.php" rel="nofollow noreferrer">Web Design from Scratch</a> is a great learning resource and I'd recommend it), and that CSS can change this behaviour;</p></li> <li><p>test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for <a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="nofollow noreferrer">HasLayout</a>). What you can't tweak to get right in IE, use <a href="http://www.quirksmode.org/css/condcom.html" rel="nofollow noreferrer">conditional comments</a> to add CSS that only IE can see - <em>never</em> use CSS hacks - <a href="http://www.xs4all.nl/~peterned/csshover.html" rel="nofollow noreferrer">.htc files</a> that add missing IE functionality (e.g. rollover styles on any element) are available;</p></li> <li><p>learn about <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/" rel="nofollow noreferrer">CSS positioning</a>, and use 'fixed' sparingly;</p></li> <li><p>put all your CSS in one file (for starters), and don't use inline CSS in the HTML;</p></li> <li><p><a href="http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/" rel="nofollow noreferrer">styling forms</a> and form fields is almost a separate skill :-)</p></li> </ol> <p>Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and <a href="http://www.w3schools.com/Css/css_image_transparency.asp" rel="nofollow noreferrer">opacity</a> looks nice, but <a href="http://www.quirksmode.org/css/opacity.html" rel="nofollow noreferrer">requires non-standard CSS</a> for now. although the more flexible <a href="http://caniuse.com/css3-colors" rel="nofollow noreferrer">rgba</a> (a=alpha) method is widely-supported. As do <a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser" rel="nofollow noreferrer">rounded corners</a>, but both worth using.</p> <p>I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but <a href="https://stackoverflow.com/questions/203069/what-is-the-best-css-framework-and-are-they-worth-the-effort">read the arguments</a> and the <a href="http://www.vcarrer.com/2008/08/when-to-use-css-framework.html" rel="nofollow noreferrer">pros and cons</a>). To avoid annoying default margins and padding, I always reset everything by doing <code>html *, body * {margin: 0; padding 0;}</code> then build padding and margins back in wherever needed - never been a problem so far :-)</p>
    singulars
    1. This table or related slice is empty.
    1. POWhat CSS tools (framework,grids system, IDE,..) do I need for starting web design?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USDave Everitt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POWhat CSS tools (framework,grids system, IDE,..) do I need for starting web design?
      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. VTUpMod
    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. COGreat post. I will straightaway have a look at the links. Thx
      singulars
      1. PO
      1. USfabien7474
    2. COBTW, the web application framework is already chosen : it is Grails
      singulars
      1. PO
      1. USfabien7474
    3. COTo answer your question 2, I am building a highly interactive community website with back-end administration as well
      singulars
      1. PO
      1. USfabien7474
 

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