HomeWork #7: Using CSS for Positioning
Assignment:
The purpose of this assignment is to experiment with fixed (or absolute) positioning versus Relative positioning via CSS. A website can be enhanced with the use of both Fixed (aka Absolute) positioning and Relative Positioning.
Non-Fixed or Relative Positioning:
- By selecting the "Non-Fixed Positioning" menu selection, and scrolling around the page, you can see the effects of a Non-Fixed (or relative) positioining.
- The Header and Navigation/Menu Bar will scroll off the screen, making the user have to scroll backwards or the web designer to utilize a "Back To Top..." type anchor.
- Both WebPages in this example use Relative positioning to format the webpage into essentially a two (2) column layout, using CSS and Classes defined as .left and .right This reserves an area for the menu bar on the left hand side, and a content area on the right hand side.
Fixed (or Absolute) Positioning:
- By incorporating "Fixed" (aka Absolute) positioning - you can make web page elements stationary in their position.
- A very good use of this is to fix the Header and navigation bar on the webpage, which then can help from disorienting the end user- especially with long webpages.
- Note: One thing that I had to do with Fixed positioning was to force the banner/header to the very top of the page. This was done on purpose - as the text was seen scrolling past the top of the banner.
Additional Notes:
You could accomplish this task in two ways that I'm aware of:
- By incorporating One (1) Cascading Style Sheet and Different ID and selectors - so different HTML, but same CSS (I did not do this).
- Or by incorporating Two (2) Cascading Style Sheets - and the Same HTML. (This is the method that I used).
