Layout basics

  • Use ID styles to create div layout:
    • <div id="wrapper">
      <header>Website title and logo</header>
      <nav>Menu goes here</nav>
      <article>All your stuff goes here</article>
      <footer>Copyright stuff goes here</footer>
      </div>

      *reference the new html5 tags
  • Right now it looks like this:
  • Now add these styles:
    #wrapper { background-color: #FFE0BD; width: 400px; margin-right: auto; margin-left: auto; color:#404040}
    header { font-size: 18px; background-color: #D8EFDB; height: 50px; width: 100%; }
    nav { background-color: #CCC; float: left; width: 100px; }
    article { background-color: #FFFEE9; float: left; height: 150px; width: 300px; }
    footer { background-color: #E0C5C5; height: 30px; width:400px }
  • You should have a layout that looks like this...however look at the footer:


    All your stuff goes here
    Copyright stuff goes here

    *note how the layout is center aligned...look at the margin value for the #wrapper
    **also note that #nav and #article are side by side using the float value
  • Replace the html code with this:
    <div id="wrapper">
    <header>Website title and logo</header>
    <section>
    <nav>Menu goes here</nav>
    <article>All your stuff goes here</article>
    </section>
    <footer>Copyright stuff goes here</footer>
    </div>
  • Replace the CSS with this:
    #wrapper { background-color: #FFE0BD; width: 400px; margin-right: auto; margin-left: auto; color:#404040}
    header { font-size: 18px; background-color: #D8EFDB; height: 50px; width: 100%; }
    nav { background-color: #CCC; float: left; width: 100px; }
    article { background-color: #FFFEE9; float: left; height: 150px; width: 300px; }
    section { overflow: auto }
    footer { background-color: #E0C5C5; height: 30px; width:400px }
  • What just happened?

  • Now you can style the title with a compound style:
    • header h1 { font-size: 18px; color: #234; font-family: "Comic Sans MS", cursive; }