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.


You will be mainly graded on effort and creativity put into this project.


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.
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.