Intermediate CSS Layout – Apple iPod

Mar 08, 2012 by eaw in HTML/CSS

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:

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