- 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:
Menu goes here
All your 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; }
-