Intermediate CSS Layout – Apple iPod

Basic HTML4: Three Column Layout

<html>
<head>
<title></title>
</head>

<body>

  <div id="wrapper">

       <div id="header">
            <div id="nav"></div>
       </div>

       <div id="left_side"></div>

       <div id="content"></div>

       <div id="right_side"></div>

       <div id="footer"></div>

  </div>
</body>

</html>

Basic HTML5: Three Column Layout

<!DOCTYPE html>
<head>
   <title></title>
</head>

<body>

 <div id="wrapper">

        <header>
          <nav></nav>
        </header>

        <aside id="left_side"></aside>

        <div id="content"></div>

        <aside id="right_side"></aside>

      <footer></footer>

  </div>
</body>

</html>

Basic CSS3: Three Column Layout

/* ----- [ HTML 5 Element Display ] ----- */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

/* ----- [ General Elements ] ----- */

* { margin:0;
   padding:0:
}

body {
    font-size: 62.5%;
}

img {
    border: none;
}

#wrapper {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f5f6f7;
}

header {
    width:980px;

}

#left_side {
    width:175px;
    float:left;
    margin-left: 5px;
}

#content  {
    width:596px;
    float:left;
    margin-bottom: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

#right_side{
    width:175px;
    float:right;
    margin-right: 5px;
}

footer {
    clear:both;
    width: 980px;
    background-color: #666;
}

/* ----- [ Navigational menu ] ----- */

nav {
 width: 980px;
 height: 35px;
}
CSS: Add below code to CSS to make it compatible across browsers
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
Script: Add below script inside HTML head tag to make page compatible with Internet Explorer
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
Rounded corners are created adding the following code in your CSS
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #d8d9da;

HTML5: Three Column Layout

Here’s how to start:

  1. Determine Layout: http://markup.io/v/htgyy7t3y0ek
  2. Know where you’re going to get your “starter code.”
  3. Create your file structure
  4. Create your index.html
  5. Create your style.css
  6. Attach your .css to your .html
    Navigation
  7. HTML: Insert the unordered list and list items tags for your navigation
  8. CSS: Remove the bullets, display the list as block and float to the left
    “Slider”
  9. Insert slider div and image into header
    Content
  10. Insert a main_photo div and insert image
  11. Insert 3 bottom divs and float all three to left
    Footer
  12. Insert the footer nav image in the footer div.

Do the rest on your own. This is fantastic practice!

See Demo page

http://www.everythingaboutweb.com/classes/examples/ipod_final/html5/

Leave a Reply

Your email address will not be published. Required fields are marked *