Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WDES105Day 1 -- CSS               about.me/babon
PositioningThe CSS position property lets you control howand where a web browser displays particularelements.Four types:● ...
Positioning: AbsoluteAbsolute positioning lets you determine anelements location by specifying one of thefollowing positio...
Positioning: AbsoluteExercise: Positioning a banner● Go to cosmofarmer.com● Copy banner image● Create a new page called ab...
Positioning: AbsoluteNotes:● The float property does not play well with the  following positions:   ○ absolute   ○ fixedSo...
Positioning: RelativeA relatively positioned element is placedrelative to its current position in the HTML flow.The main b...
Positioning: RelativeExercise: Positioning a banner inside a wrapper● Create a new page called relative.html              ...
Positioning: FixedA fixed element is locked into place on thescreen.Similar to the fixed value for the background-attachme...
Positioning: FixedExercise: Positioning a banner in a fixedposition● Create a new page called fixed.Assignment: Position t...
Positioning: FixedInspiration:22 Examples of Fixed Position Navigation inWeb Design                                  about...
Positioning: StaticStatic positioning simply means that the contentfollows the normal top-down flow of HTML.Static is the ...
Top | Bottom | Left | RightTypically use Top or Left with absolute or fixedpositioning. Can also use Bottom or Right.Can a...
Z-indexz-index is used to position an element in thethird dimension -- out and away from the page.The higher the number, t...
Z-indexz-index will only work on an element whoseposition property has been explicitly set toabsolute, fixed or relative.●...
Upcoming SlideShare
Loading in …5
×

Wdes105 day 1

232 views

Published on

  • Be the first to comment

  • Be the first to like this

Wdes105 day 1

  1. 1. WDES105Day 1 -- CSS about.me/babon
  2. 2. PositioningThe CSS position property lets you control howand where a web browser displays particularelements.Four types:● Absolute● Relative● Fixed● Static about.me/babon
  3. 3. Positioning: AbsoluteAbsolute positioning lets you determine anelements location by specifying one of thefollowing positions:● left, right, top or bottom... using one of the following measurements:● pixels, ems or percentages about.me/babon
  4. 4. Positioning: AbsoluteExercise: Positioning a banner● Go to cosmofarmer.com● Copy banner image● Create a new page called absolute.html about.me/babon
  5. 5. Positioning: AbsoluteNotes:● The float property does not play well with the following positions: ○ absolute ○ fixedSo, avoid using floats and absolute or fixedposition on the same elements. about.me/babon
  6. 6. Positioning: RelativeA relatively positioned element is placedrelative to its current position in the HTML flow.The main benefit of relative positioning isnt tomove an element, but to set a new point ofreference for absolutely positioned elementsthat are nested inside it. about.me/babon
  7. 7. Positioning: RelativeExercise: Positioning a banner inside a wrapper● Create a new page called relative.html about.me/babon
  8. 8. Positioning: FixedA fixed element is locked into place on thescreen.Similar to the fixed value for the background-attachment property. about.me/babon
  9. 9. Positioning: FixedExercise: Positioning a banner in a fixedposition● Create a new page called fixed.Assignment: Position the banner in a fixedposition at the top center of page so that it sitson top of the wrapper. about.me/babon
  10. 10. Positioning: FixedInspiration:22 Examples of Fixed Position Navigation inWeb Design about.me/babon
  11. 11. Positioning: StaticStatic positioning simply means that the contentfollows the normal top-down flow of HTML.Static is the normal positioning method.Probably never use this attribute. about.me/babon
  12. 12. Top | Bottom | Left | RightTypically use Top or Left with absolute or fixedpositioning. Can also use Bottom or Right.Can also use negative values to positionelements "away from the middle."Experiment with absolute.html and fixed.html. about.me/babon
  13. 13. Z-indexz-index is used to position an element in thethird dimension -- out and away from the page.The higher the number, the further away fromthe page. about.me/babon
  14. 14. Z-indexz-index will only work on an element whoseposition property has been explicitly set toabsolute, fixed or relative.● Create a new page called z-index.html. about.me/babon

×