====== Web Development Lesson 5 - Layout ====== ===== Forced Positioning ===== ==== Objective ==== This activity introduces some predefined HTML tags for structuring pages and looks at using 'position' to force your page into a particular layout. ==== Setup ==== * Create a new file called 'layout.html' in your personal directory. * In 'layout.html', set up the basic HTML code with a link to 'style'css'. ==== Predefined Layout Tags ==== * HTML includes some predefined tags to help you layout your document. Add this code to the of your 'layout.html' file.

    Header
    Navigation
    Main
    Footer

* Before we look too hard at these tags, let's add some CSS so you can see what their default layout looks like. Add the following code to your 'style.css' file.

header {
  background-color:indianred;
  border:darkred solid 2px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
}

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
}

* Now open 'layout.html' in Live Server and see how it looks. The colors and borders are purely there for your understanding of how the pieces fit on the screen. Usually they will have similar backgrounds. * All four elements fill the screen from left to right, wrapping their content tightly at left, top and bottom and they are stacked on top of each other in the order we've placed them. * You could use these for any content you like, but of course it's easier for you and anyone you might work with to follow if you use them as named. *

is usually for the banner at the top of the screen showing the site logo and name. *

is usually used for site navigation below the banner or to the side of the main content. *

is where you'd add your page content. *

is for anything you'd like at the bottom of the page, and often includes contact links, information about the organisation and even the page designer and copyright information. ==== Relative Positioning ==== * Add the following CSS code to your 'nav' element.

  position: relative;
  top: 50px;

* See how the

element is now lower down than it previously was? It's top is now positioned relative to the previous element. In fact, the top is 50 pixels below the bottom of the previous element. * Also notice that the

element is covering the