CSS Layout

Thu, Mar 09, 2017
Readings
Chapters 15 and 16 in Jon Duckett book. Mozilla Developer Network guide on CSS
Assignment
Build a basic web page layout incorporating all of the design concepts mentioned above.

Positioning

At some point, you’re going to want to place elements on a page in a more free-form way that doesn’t require stacking boxes. This is where positioning comes into play.

The positioning property allows you to place elements anywhere on the page, and in any manner you would like. However, you shouldn’t rely on the positioning property for your entire page layout. While it might seem useful at first, it can cause lots of issues down the line, particularly when dealing with dynamic content. It’s better to do rely on the natural document flow for general page layout and use the positioning property for special cases like multimedia elements, embeds, fixed content, or when you need to layer elements over each other.

Four Type of positioning

  • Static - This is the default positioning. Elements are arranged according to the normal document flow.
  • Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.
  • Absolute - Elements are positioned separate from the document flow. Items will be located relative to the first parent element that has any positioning other than static.
  • Fixed - Position elements separate from the document flow, but relative to the browser. Stays in the same spot even when scrolled.

Example of natural document flow

Below is an example of a two <div> boxes, one inside another, with their default position:static;.

<div class="outerBox">
    <div class="innerBox">
    </div>
</div>

The default document flow

There is one <div> box inside another. They both stack from the top down, and justify to the left.

Example when the inner box is set to position:absolute

Below is an example when we set position:absolute on the inner box, and give it coordinates using top: and left:.

Inner box with position absolute

As we can see from the image above, it’s as if the inner box doesn’t respect the outer containing box. This is because of the rule for absolute boxes:

Absolute - Elements are positioned separate from the document flow. Items will be located relative to the first parent element that has any positioning other than static.

Example when the outer box is given position:relative

In this example below, we set the outer box to have position:relative. While there are no effects on the outer box itself (it will operate exactly like the default static) it does affect any elements inside the box to use it as a frame of reference.

Outer box with position relative

Relative is only used to affect elements inside this box. It doesn’t affect the box itself because of the rules of relative positioning.

Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.

Example when both boxes are set to position:absolute

In this example, we can set both boxes to position:absolute. The inner box’s left and right coordinates are based on the outer box, just like in the previous example.

Box boxes with position absolute

Position Fixed

Position fixed completely removes the element from the flow and bases its position on the viewport, not the document. This means an element will stay on the screen even when the user scrolls.

Z-index

Z-index determines the stacking order of elements that have a positioning property applied to them (other than static).

  • A z-index property is an arbitrary number that determines the stacking order.
  • A higher z-index number will indicate those elements should be on top. A lower number means they should appear underneath other elements.
  • Z-index properties can only be applied to elements that are positioned with relative, absolute or fixed, but not the default static.
.redbox{
  position:absolute;
  top: 100px; 
  left:300px;
  z-index: 20000;
}
.bluebox{
  position:absolute;
  top: 10px; 
  left: 200px;
  z-index: 20001;
}
.greenbox{
  position:absolute;
  top:110px; 
  left: 50px;
  z-index: 10;
}

Color boxes example

Transforms

Transforms are a relatively new property in CSS. They allow you to adjust the position of an element based on its current position. So if you told it to go 10px to the left, it would move to the left based on where it currently sits. This makes it a useful tool in conjunction with positioning properties.

  • Transforms are based on an element’s current position.
  • Transforms are x value first (horizontal) and y value second (vertical)
div{
  transform: translate(10px,5px);
  transform: translateX(10px);
  transform: translateY(5px);
}

Other Transforms

You can also rotate, skew and scale elements with transforms. Just note, to apply multiple transform functions, you need to pair them up as a single value to the transform property.

div{
  transform: translateX(5px) rotate(9deg) scale(1.5);
}

More information about transforms are on the MDN website.

Floats

Floats are a way to change the stacking order of elements to either the left or right of the page.

Normal stacking order

Normal document flow is to stack from the top down. But by applying a float property, you can change this order.

.orangeBox{
  float: left;
}
.purpleBox{
  float: left;
}
.blueBox{
  float: left;
}

Float left

Text wrapping

Another useful part of floats is when you apply them to images or blockquotes within text. This will cause the text to wrap around the element automatically.

Image flow without a float

Then, when a float:left; is added to the image, the text wraps around the image like so:

Applying a float:left to the image

Clearing Floats

When you float an element, the container its in no longer sees it as content in some senses. Typically, an inner element will push open a containing box. But once the element is floated, the parent element will act as if it wasn’t there.

The solution to this is a simple hack called a clearfix. The clearfix is a snippet of CSS which places an invisible element inside the parent that pushes open the box, so it can “see” the floated element.

.clearfix,
.clearfix:after {
    content: " ";    
display: table;
}

.clearfix:after {
    clear: both;
}

Then you would apply the clearfix class to the containers of floated elements.

Exercise on Positioning

You will be constructing the following image using CSS positioning properties.

Example house

You can download the various pieces from this .zip file.

Here is a starter template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Intro to Coding Interactives</title>
    <style>
        html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, ol, ul, li, form, label, legend, caption {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}

        .container{
            width: 500px;
            height: 400px;
            margin: 20px auto;
        }
        
        #sky{

        }
        
        #grass{

        }
        
        #tree-trunk{

        }
        
        #tree-top{

        }

        #house{

        }
    </style>
</head>
<body>
    
    <div class="container">
        <img src="grass.png" alt="grass" id="grass" />
        <img src="house.png" alt="house" id="house" />
        <img src="sky.png" alt="sky" id="sky" />
        <img src="tree-top.png" alt="tree top" id="tree-top" />
        <img src="tree-trunk.png" alt="tree trunk" id="tree-trunk" />
    </div>
    
</body>
</html>

Second In-class Exercise

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Intro to Coding Interactives</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <style>
      html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, ol, ul, li, form, figure, figcaption,label, legend, caption {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
      }
      
      body{
        font-family: 'Open Sans', sans-serif;
      }

        
    </style>
</head>
<body>
    <header>
        <div class="hgroup">
          <h1>Upward Mobility</h1>
          <h2>How mobile is shaping the lives of Latinos in the U.S.</h2>
        </div>
    </header>
  
  
    <div class="container">
      
      <p>Today in the United States, Latinos are adopting and using mobile devices faster than any other demographic. Data usage is higher among Latinos compared to the national average. Nearly three in four Latinos in the U.S. own smartphones—10 percent higher than the national average. By 2017, one out of five smartphones and tablets will be purchased by Latinos. Every month, they spend 8-plus hours watching videos on their small-screen devices—90 minutes longer than the national average.</p>

      <p>Latino digital consumers are "poised to continue expanding [their] digital influence in the next few years," according to Nielsen's Digital Consumer Report, released last year.</p>

      <p>This project explores how mobile technology is shaping the lives of Latinos in the U.S.: from empowering migrant workers, whose phones improve access to information about their rights in the workplace, to the rise of Latino entrepreneurs who are using mobile to create their businesses, and to social activists who use social networks to expand their cause across national borders.</p>

      <p>Mobile is empowering Latino migrants in the U.S.</p>

      <p>Mobile technology is increasingly being used to lend a helping hand to the migrant community in the U.S. A migrant shelter outside Mexico City uses smartphone apps to collect donations for clothes for U.S.-bound migrants. A Yelp-like website offers reviews that warn migrant workers about abusive U.S. employers. Another website pinpoints locations in the U.S. where Latinos are frequently asked about their papers, while another, tagged the "Mexican ACLU," informs migrants of their legal rights in the country.</p>


      <h2>Collecting donations, one tweet at a time</h2>

      <p>Organizations like Vía Migrante have seized on Latinos' growing use of mobile phones in the U.S. and Mexico, using mobile technology and social media to help migrants.</p>

      <p>On a January 2015 afternoon in the Mexico City suburb of Tultitlán, volunteers sorted through boxes and bags of donated clothes inside a migrant shelter whose green-lacquered walls glowed like key lime pie.</p>

      <p>"This one is for a girl, right?" asked Gabriel Fermen in Spanish. The 22-year-old fled gang violence in El Salvador and now volunteers for Vía Migrante.</p>

      <p>"Let me see," said Berfilio Hernandez in Spanish. Holding up the striped shirt in front of him, the 21-year-old says, "Look, the design is for a girl," before carefully folding and placing it with others.</p>

      <p>Shoes, sweaters, jeans, even underwear are stacked on shelves that rise to the ceiling.</p>

      <p>"When I arrived here, I had nothing," said Hernandez, who traveled for 15 days on a large train infamously dubbed "La Bestia" after leaving Peten, Guatemala to find work to support his family back home.</p>

      <p>"I am grateful to the organization because I have a roof over my head, food and I'm able to help other migrants in my position," he said, hoping to meet up with a cousin in Nashville, Tennessee.</p>

      <p>For his part, Fermen, who wears a Lakers NBA hat, plans to join his aunt in Los Angeles to support a dozen family members in El Salvador.</p>

      <p>In 2013, there were a little over 70 million mobile phones users in Mexico, according to IAB Mexico, an advertising firm that studies mobile data. In just two years, that number increased by 10 million users.</p>

      <p>And of the roughly 57 million U.S. Latino population, 45.3 million—or about 80 percent—are mobile phone users, according to IAB.</p>
      
    </div>

    
</body>
</html>

You can use the following media urls:

https://multimedia.report/images/classes/intro-to-interactives/mobility/intro-loop.mp4

https://multimedia.report/images/classes/intro-to-interactives/mobility/berfilio-shelter.jpg

https://multimedia.report/images/classes/intro-to-interactives/mobility/gabriel-bridge.jpg