From 82433ef008f562b6bac121747a2dd168b2427ac1 Mon Sep 17 00:00:00 2001 From: Rachael Arnold Date: Thu, 20 Aug 2015 16:56:49 -0400 Subject: [PATCH] Class 4: content improvements, including adding slides on display --- class4.html | 358 ++++++++++++++++++++++++++++++-------------------- css/class.css | 2 + 2 files changed, 220 insertions(+), 140 deletions(-) diff --git a/class4.html b/class4.html index bb217bd..8e3651e 100644 --- a/class4.html +++ b/class4.html @@ -67,60 +67,60 @@

What we'll be making today

- + + +
+

Positioning

+
+
-

Static Positioning

-
-

HTML elements are positioned static by default.

-

Static elements are positioned in the normal flow of the page

-

Static elements ignore top, bottom, right or left property specifications.

-
-
+

Static Positioning

+

position: static;

+ + -
-

Static Positioning

-

In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

-

-<img src="images/cookie1.png"/>
-<img src="images/cookie2.png"/>
-<img src="images/cookie3.png"/>
-...
-<img src="images/cookie2.png"/>
-<img src="images/cookie3.png"/>
-
+        

+          
Static Positioning

+          
In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

+
  <img src="images/cookie1.png"/>
+  <img src="images/cookie2.png"/>
+  ...
+  <img src="images/cookie3.png"/>
 

-
-
-
-
-
-
-
-
-       

+          
+          
+          
+          
+          
+          
+

Static Positioning

In normal flow, block boxes flow from top to bottom, making a new line after every box.

-

- <p>Greetings</p>
- <p>Hello</p>
- <p>Hi there!</p>
+
  <p>Greetings</p>
+  <p>Hello</p>
+  <p>Hi there!</p>
 

         

-          
Greetings

-          
Hello

-          
Hi there!

+          
Greetings

+          
Hello

+          
Hi there!

Relative Positioning

+

position: relative;

    -
  • Takes the element out of the normal flow, allowing it to be moved to the top, left, right or bottom.
    • -
  • Does not affect the elements surrounding it.
    • +
  • Allows the element to be moved to the top, left, right or bottom.
    • +
  • This does not affect the elements surrounding it.
  • Makes an element a "positioning context" in which to position other elements relative to it.
  • Relative positioning and absolute positioning are used together.
@@ -129,105 +129,105 @@

Relative Positioning

Relative Positioning

-

The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.

+

Relative positioning keeps the element in the normal flow, but offsets it according to top/left/right/bottom CSS declarations.

-

-  .relative{
+
  .relative{
     position: relative; 
     left: 80px; 
-    top: 20px;
+    top: 30px;
     height: 100px; 
-    background-color: yellow;
+    background-color: gray;
   }
 

- 

- 

-   Hello, hi!
- 

- 

-
+
+

+ Hello, hi! +

+
+

How are you?

+
+

Absolute Positioning

+

position: absolute;

    -
  • Positions element outside of the normal flow.
    • -
  • An absolutely positioned element is offset from its container block, positioned relative.
    • -
  • Its container block is the first element that has a position other than static.
    • -
  • If no such element is found, the container block is <html>.
    • -
  • Other elements act as if it's not there.
    • -
  • Determined by its offset values in the properties top, bottom, right and left.
    • +
  • Positions the element outside of the normal flow, meaning other elements act as if it's not there.
    • +
  • It is offset from its container block, the first parent element that has a position other than static.
    • +
  • If no such element is found, the container block is <html>.
    • +
  • Offset using the properties top, left, right, & bottom.
-
-

Absolute Positioning

-

The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).

-

-  .top{
+       

+        
Absolute Positioning

+        
position: absolute; will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).

+        

+          

+            Up here
+          

+          

+          Down here
+          

+        

+
  .top{
     position: absolute; 
     top: -40px; 
     right: 10px; 
-    background-color: yellow
+    background-color: yellow;
   }
 

-

-  .bottom{
+
  .bottom{
     position: absolute; 
-    bottom: -40px; 
-    left:60px; 
-    background-color: green
+    bottom: 0; 
+    left:-10px; 
+    background-color: green;
   }
 

-         

-         

-          Up here
-         

-       

-          Down here
-         

-         

        

        

         
Example: Absolute Positioning

-        

-        
Here's an example of an image with a caption absolutely positioned over top of it.

-        

-        
The containing div has a position of relative, and the caption has a position of absolute.

-        

-        

-          
+        

+          

+          
Here's an example of an image with a caption absolutely positioned over top of it.

+          

+          
The containing div has a position of relative, and the caption has a position of absolute.

+          

+          

+            
+          

         

        

+
+        
+        

+          
Stacking

+        

+
        

        
Z-index

-         
When you use positioning to move elements out of the normal flow of content, elements can overlap. You can change the order of overlapping with z-index.

-         
The element with highest z-index goes on top.

-

-  .bottom{
+         
z-index: value;

+         
When you use positioning to move elements out of the normal flow of content, elements can overlap. You can change the order of overlapping with z-index.

+         
The element with highest z-index goes on top.

+
  .top{
     position: absolute; 
-    bottom: 10px; 
-    left:60px; 
-    background-color: yellow;
-  }
-

-

-  .top{
-    position: absolute; 
-    bottom: 15px; 
+    bottom: -10px; 
     left:60px; 
     background-color: green; 
     z-index: 2;
   }
+  .bottom{
+    position: absolute; 
+    bottom: -30px; 
+    left:40px; 
+    background-color: yellow;
+  }
 

-        
 Bottom 

-        
 Top 

+        
 Second: Top 

+        
 First: Bottom 

        

 
        

@@ -236,89 +236,167 @@ 
Develop It!

         
Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.

         
        

+
+        
+        

+          
Changing the Flow

+        

+
        
        

-         
Float

-         

-            
    
-            
  • "Floating" an element takes it in the normal flow, as far to the left or right of it's containing element as possible.
    • 
-            
  • Any other elements, such as paragraphs or lists, will wrap around the floated element.
    • 
-            
  • Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
    • 
-            
  • You can specify a) whether an element is floated or not, and b) which side it floats on.
    • 
-            

-         

+        
Float

+        
float: left | right | none;

+        
    
+          
  • "Floating" an element moves it in the flow, as far to the left or right of its containing element as possible.
    • 
+          
  • Any other elements will wrap around the floated element.
    • 
+          
  • You must specify a width, or it is likely to take up the whole page and not appear floated.
    • 
+        

        

        
        

        
Float: Example

-       
Below a <blockquote> is floated to the left, allowing text to wrap around it on the right

+       
Below a <blockquote> is floated to the left, allowing text to wrap around it on the right

        example float
        

        

          
Float

-

-  .float{
+
  .pull-quote{
     float:left;
     width:200px;
     background:yellow;
   }
 

-        

+        

           Hi, I'm a yellow box with black text.

           I like to hang out on the left side.

         

-        
Not floating element

-        
Not floating element

-         
Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

+        
Not floating element

+        
Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

        

        
        

-       
Using floats to place elements side by side
 
-       
If you want two block level elements to be side by side, you need to float both elements. One left, and one right.

-       
+         
Placing Elements Side by Side
 
+         
If you want two block-level elements to be side by side, you need to float both elements. One left, and one right.

+         
        

+
        
        

          
Clear

+         
clear: left | right | both;

          
    
-         
  • Clearing tells the element on which side (right, left, both) other elements cannot appear. 
    • 
-         
  • If you had an image floated left, and you did not want the paragraph to appear next to it, you would add clear: left; to the paragraph.
    • 
-         
  • Clearing both sides makes sure floats don’t flow past the clear element.
    • 
+          
  • Clearing tells the element on which side (right, left, both) other elements cannot appear. 
    • 
+          
  • Clearing both sides makes sure floats don’t flow past the clear element.
    • 
+          
  • clear is applied to the non-floating element. 
    
+            Ex: If you had an image floated left, and you did not want the heading to appear next to it, you would add clear: left; to the heading.
    • 
          

-

-  clear: right;
-  clear: left;
-  clear: both;
-

        
 
        
        

           
Clear

- 

-   .float{
+ 
   .pull-quote{
      float:left;
-     width:50px;
+     width:100px;
      background:yellow;
    }
    .clear-left{
-     clear:left
-   }
- 

-         

+     clear:left;
+   }

+         

            hi

            hi

            hi

          

-         
Not floating element

-         
Not floating element

-         
Non-floating element with a class of .clear-left

+         
Not floating element

+         
Not floating element

+         
Heading with a class of .clear-left

+         
Not floating element

         

         
         
-       

+        

          
Develop It!

-         
Let's float our side bar and content areas.

-       

+         
Let's float our sidebar and content areas to create two columns.

+        

+
+        
+        

+          
Changing Display

+        

+
+        

+          
Display

+
+          
What if your inline element needs a margin 
(Ex: a floating image)?

+          
What if your block-level list items need to be in a row 
(Ex: a menu)?

+          

+          
You can change the way an element is displayed.

+          
display: 
block | inline | inline-block;

+        

+
+        

+          
Display: Navigation Using Lists

+          

+            

+
  <ul id="menu">
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Slides</a></li>
+  </ul>

+              
Would normally look like:

+
+                
+            

+            

+
  #menu {
+    border: 1px solid #888888;
+  }
+  #menu li {
+    display: inline-block;
+  }
+  #menu li:hover {
+    background-color: #aaaaaa;
+  }
+  #menu a {
+    display: block;
+    padding: 5px 20px;
+  }

+            

+          

+          

+          
Now looks like:

+          
+          
+
+        

+
+        
+        

+         
Develop It!

+         
Let’s make a menu bar with some favorite links.

+        

 
         
         

diff --git a/css/class.css b/css/class.css
index 9ee626e..269074a 100644
--- a/css/class.css
+++ b/css/class.css
@@ -58,6 +58,8 @@
 
 .reveal .slides section .fragment.visible.muted { opacity: .35;}
 
+.reveal .show-outline { outline: 1px solid #000; }
+
 /*=== Class 1 */
 
 .reveal .character-table {