Positioning Exercise

There are four different position values will be used:

  • Relative
  • Absolute
  • Fixed
  • Z-index (property)

File to download
Position text

Requirements

  • Folder: lastname_firstname-positioning
  • XHTML documents: 
    • example1.html
    • example2.html
    • example3.html
    • example4.html
  • Embedded style sheet

All example require a default:
Width: 750px
Font: Arial and Verdana
Font color: #665544

Background-color #efefef


relative-ex

Example 1 (example1.html)

Box offset
Top 10px and left 100px
width 450px

 


absolute-ex

Example 2 (example2.html)

Box offset
Top 0px and left 500px
width 250px and 450px


fixed-ex

Example 3 (example3.html)

Box offset
Top 0px and left 0px

padding 10px
margin-top 100px
width 100%
margin 0px


z-index-ex

Example 4 (example4.html)
Box offset
Top 0px and left 0px
Top 70px and left 70px
z-index 10

width 100%
margin 0px
padding 10px


Place files in a folder and name: lastname_firstname-positioning.
Share folder link at the end of class to the Google Classroom > Positioning.

Upload at the end of the class.
DUE: Thursday, February 16, 2017

Advertisements