Monday, April 7, 2014

CSS Cross Country Course - Level 3

Notes from Codeschool CSS Cross Country Course - Level 3

The Box Model

Every element on the page is outlined by an imaginary things called the box model that looks like this:
css box model properties
css box model
The area surrounding the content is called the content area. Padding is defined outside the content area. The border surrounds the padding, and the margin surrounds the border. Using CSS, you can manipulate each of these properties.

The total width of an item is dependent on each of the box model properties.

How to Calculate Width Using Box Model: 


total calculated box width = content width + padding width + border width

how to calculate box model
box model example
For example:
.downhill {
  border: 5px solid #2E3192;
  padding-left: 10px;
  padding-right: 5px;
  width: 100px;
}

To get total item width:

          border-right:  5px
    border-left:   5px
    padding-left:  10px
    padding-right: 5px
+        width:         100px
----------------------
125px

When adapting a design, you can calculate the content width area by doing:
total box width (design) - (padding width*2) - (border width*2) = content area

Example:
.uphill {
  border: 1px solid #fff;
  padding: 14px;
  width: ?
}

To calculate do:
340px (let's say this is your design area) - 28px - 2px = 310px (this is the size of your content area)

The Overflow Property

When setting boundaries on containers, you'll need to know how to deal with content that does not fit inside that container. This is where setting the overflow property comes into play.

overflow: visible / auto / hidden / scroll

overflow: visible

Visible is the default value and allows content to flow outside container boundaries.
overflow: visible example
content overflows the boundaries of parent container

overflow: auto

Auto adds a scrollbar as needed when content overflows. This allows our container to stay the size we set and you can see all content by scrolling.
overflow: auto example
scrollbars appear when needed

overflow: hidden

Hidden hides content that extends beyond the container. Content inside the container that doesn't fit will be cut-off, but the container will stay the same size.

overflow: auto example
overflow content is hidden

overflow: scroll

Scrollbars will be added to the container whether or not they need to be there.
overflow: scroll example
scrollbars are present, whether or not they are needed

Positioning

The four main values of positioning are:
position: static / relative / absolute / fixed

Anything on the page within the normal flow is considered static. Using a value other than static gives that element a value of positioned. We'll go into why this is important later.

Positioned items can use the top, right, bottom, and left properties for placement.

Relative Positioning

Relative positioning renders and element within the normal flow of the document, then is shifted via positioning properties. 

In the below example we want to make the 2 look like an exponent. This is using an html boilerplate, don't worry too much about the first 3 css items, but know that the last two cause it to be positioned relatively then moved off the top by one half em. To learn more about boilerplates read: http://html5boilerplate.com/.

<!-- index.html -->
<article>
  <h2>Sven's SnowshowX<sup>2</sup></h2>
</article>

/* styles.css */
sup {
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
}

Absolute Positioning

Absolute positioning takes an item out of the normal document flow for manual positioning. 

e.g.
<!-- index.html -->
<article>
  <h2>New Snowshoes</h2>
  <h3>by: Sven</h3>
  <p>Some interesting text.</p>
</article>

/* styles.css */
h3 {
  position: absolute;
  right: 10px;
  top: 10px;
}

In this example, we want the <h3> byline to be positioned to the right. BUT, this will position it next to the window, unless it is within an item that is positioned. In this case, you can give <article> a position of relative so that the byline will stick to the edge of the article container, not the window. 

If you have something that you need positioned for another element but don't intend to actually position it, use position: relative.

how to position: absolute
position parent container relatively to position child element absolutely

Once we give the article a position of relative, regardless of the window width, the byline will stick to the article side rather than the window.

Fixed Positioning

Fixed positioning affixes an element to a specific place in the window, where it will stay regardless of scrolling. Unlike absolute positioning, you cannot scope fixed positioned items to a specific container.
how to position: absolute
element stays visible no matter where on the page you scroll

Z-Index

When dealing with multiple positioned items, it is a common occurrence that they will begin to overlap one another, you can determine the stacking order by using the z-index. The z-index only applies to items that have a positioned value other than static. 

If two images have no z-index or the same z-index, the item that appears second in the HTML will appear on top. Imagine the second item being laid down after (and thus on top) of the first item.

e.g.
<!-- index.html -->
<article>
  <img class="ski" src="ski.jpg" alt="Ski!" />
  <img class="sled" src="sled.jpg" alt="Sled!" />
</article>
No z-index or same z-index example
sled! appears on top of ski! because it was placed second in the HTML

/* styles.css */
.ski, .sled {
  z-index: 1;
}

In this example, .ski and .sled have the same z-index, but since .sled comes second on the HTML document, it will appear to be on top of .ski.

If you set the z-index of one item, but not the other, it will make the z-indexed item appear on top.
e.g.
<!-- index.html -->
<article>
  <img class="ski" src="ski.jpg" alt="Ski!" />
  <img class="sled" src="sled.jpg" alt="Sled!" />
</article>
adding z-index example
adding a z-index value to ski! allows it to stack on top of sled!

/* styles.css */
.ski {
  z-index: 1;
}

Z-index only applies to items that have a positioned value other than static. Use position: relative if you want an item to have a z-index but you're not interested in moving it.  To learn more about the z-index as it pertains to floats and positioning, read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index.





No comments:

Post a Comment