CSS Layouts: Positioning and Navbars

Position: Normal The position property is used to specify a positioning scheme for an element. The default is "static" which puts the element in the "normal" flow. In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

Position: Normal In normal flow, block boxes flow from top to bottom, making a new line after every box.

Position: Relative The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.

Position: Absolute The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).

z-Index: The z-index property specifies the stack order of positioned elements, in the case that they are overlapping. The element with highest z-index goes on top.

Float: The float property is used to float boxes on the sides of other boxes, allowing other content to flow around it. First used to wrap text around images. Image

Float: The float property can also be used to float non-IMG elements, but make sure to specify a width for the floated element.

Clear: The clear property can be used to specify that an element should *not* wrap around floated elements above it.

Optional Page Layout Exercise: Copy the style of the webpage to the right Add a div for all of the content. Add styles to that div so it is centered on the page and has appropriate border and padding. Add a div for the header (the logo). Add styles to that div so the image is centered. Add a div for the footer links. Add styles to that div so that the links are centered and it has appropriate border, padding, and margin. Add a div for the locations list. Add styles to that div so that it floats to the right and has appropriate border, padding, and color.

Navigation Bars: Using CSS we can create Navigation Bars using Unordered lists. List items are block items naturally. If we switch the list items to inline elements then all the items will be lined up next to each other Also you must make the attribute “list-type-style:none” so the bullets don’t appear for you <li> elements. You must also make each list item a hyperlink so when you click the item it will go the desired webpage or site.

Example Navigation Bar HTML:

Example Navigation Bar CSS: Link this CSS code with the HTML on the previous page and you will have a simple navigation bar. Try understanding the different CSS attributes combination that make up this simple navigation bar. You can look at more examples of navigation bars on w3schools. You will use a navigation bar on your final project!

Final Project: Over the next couple of classes we will be creating a multi-page website. Think of an idea/topic you that you would like to be the basis of your website. You are going to create 4 separate HTML files that will be linked its own specific CSS files. Think about the features and design elements that you would like to have on each webpage when designing each webpage. Think of features you would like to have but not have learned yet. You may have to compromise but that’s okay. You will choose a theme for your website and all of your webpages must be centered around the theme you chose.

Final Project Requirements: The main requirement is that you have a navigation bar on each page of your website. My advice to you is to male the 4 HTML pages immediately and set up the navigation bars on each page. Add the content to each individual page after that. You will be mainly graded on effort and creativity put into this project. Try to impress me! When you believe you are finished your website I will grade it and that will be the grade for your final.