• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wdes105 day 1

Wdes105 day 1






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Wdes105 day 1 Wdes105 day 1 Presentation Transcript

    • WDES105Day 1 -- CSS about.me/babon
    • PositioningThe CSS position property lets you control howand where a web browser displays particularelements.Four types:● Absolute● Relative● Fixed● Static about.me/babon
    • 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
    • Positioning: AbsoluteExercise: Positioning a banner● Go to cosmofarmer.com● Copy banner image● Create a new page called absolute.html about.me/babon
    • 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
    • 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
    • Positioning: RelativeExercise: Positioning a banner inside a wrapper● Create a new page called relative.html about.me/babon
    • Positioning: FixedA fixed element is locked into place on thescreen.Similar to the fixed value for the background-attachment property. about.me/babon
    • 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
    • Positioning: FixedInspiration:22 Examples of Fixed Position Navigation inWeb Design about.me/babon
    • 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
    • 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
    • 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
    • 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