README.md

Week 4 - Intro To CSS Positioning & IR

There are multiple ways to position HTML elements using CSS. This week we will go over some of the popular techniques and best practices, in addition to an intro to two effective image replacement techniques.

Company Name 1 - Step #2: Image Techniques

Intro to CSS Positioning

Floats

• Float usage test

  • All About Floats

  • The float property specifies whether or not a box (an element) should float

    float: none|left|right|initial|inherit;
    

• Clear property

  • What does clear both do

  • The clear property specifies on which sides of an element floating elements are not allowed to float.

    clear: none|left|right|both|initial|inherit;
    

• Grid Systems

  • Understanding Grid Systems
  • Skeleton
  • Bootstrap
  • Foundation

Containing Floats

.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row {
  clear: both;
  *zoom: 1;
}

Positioning

The position property specifies the type of positioning method used for an element.

Four different position types:

• Static
  • Elements are positioned static by default.
  • Static positioned elements are not affected by top, bottom, left, and right properties.
• Relative
  • An element with position: relative; is positioned relative to its normal position; offset an element from it's position.
• Absolute
  • The element is positioned relative to its first positioned (not static) ancestor element.
  • Position an element at a specified position relative to its closest positioned ancestor or to the containing block.
• Fixed
  • An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Inserting Images (2 techniques):

HTML IMG Tag:

<img src="images/myimage.jpg" alt="My Image">

CSS Background Image:

background-image:url('images/myimage.jpg');

Image Replacement techniques (2 techniques):

Image Replacement techniques

Rundle "Phark" Technique (for non-links):

.phark {
  width: 300px;
  height: 75px;
  background: url('myimage.png');
  text-indent: -9999px;
}

Leahy/Langridge Technique (for links):

.leahy {
  width: 300px;
  height: 0;
  padding: 75px 0 0 0;
  background: url('myimage.png');
  overflow: hidden;
}

Homework:

• Continue to Step 2 of coding Company Name 1. Be sure to work in a new (separate) folder, such as "companyname1_step2."

Reference

• CSS Layout - float and clear
• All About Floats
• CSS Layout - The position Property
• Image Replacement techniques