Intermediate CSS Layout – Apple iPod
Basic HTML4: Three Column Layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/* ----- [ 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
|
1 2 3 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
|
1 2 3 |
-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.
Do the rest on your own. This is fantastic practice!
See Demo page
http://www.everythingaboutweb.com/classes/examples/ipod_final/html5/