Things to Remember About HTML5/CSS3

The #wrapper div

  • In the HTML, enclose all of the content between the <body> tags in a #wrapper div: <div id = “wrapper”>.
  • In the CSS  style the #wrapper ID in the following way:
    • You want to assign a width (something like 800px)
    • You want to set margin: auto; this causes the #wrapper to center in the browser window.

The <nav>

  • In the HTML, put the menu items within <li> tags.
  • In the HTML, before the first <li> tag, put the <ul> tag. After the last </li> tag, put the </ul> tag. So your navigation looks like this:
    • <nav>
      • <ul>
        • <li> menu item 1 </li>
        • <li> menu item 2 </li>
        • <li> menu item 3 </li>
        • <li> menu item 4 </li>
      • </ul>
    • </nav>

Normal Document Flow

Left to itself, HTML and CSS stacks elements flush left, one on top of the other, based on the order they appear in the HTML. This is called Normal Document Flow. The best way to work with positioning in CSS is to start with Normal Document Flow and then only make those changes that are necessary to achieve your design.

positioning

Float

Float is a property that will let two elements align in a layout. For our purposes, I recommend that you use it only to float an image inside a box of text. You can also use Float to position two columns next to each other, but you do not have the same control that you have when you use absolute positioning. Apply the Float property to an img tag in the CSS. Here are some URLs that explain the use of Float and Clear:

Absolute Positioning

Absolute positioning is a much clearer way of ordering layouts. With Absolute Positioning you specify the x.y coordinates of a box element. To make Absolute Positioning function correctly, you should specify an outer box as the area the absolutely positioned element is positioned relative to. The outer box is set to position: relative; and this lets the browser know that anything with position: absolute; within the outer box is positioned within it. If you don’t assign position:relative to an outer box, the absolutely positioned element will be positioned relative to the browser window. In our situation, the #wrapper is the outer box and the article is the absolutely positioned element. It looks like this in CSS:

#wrapper {

position: relative;

}

article {

position: absolute;
top: 100px;
left: 200px;

}

Inside Absolute Positioning – http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Advertisements

This blog is for exploring new models of journalism using technology and community participation.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: