HELLO

1) Please download Class 06 Starter Code

2) Move the following into your class-work directory:

⇒ horizontal-nav

3) fashion-blog-solution is included

4) Move the following into your homework directory:

⇒ fashion-blog-part2

Class #06

10/03/2018

Page Layout: Floats

Annoucements

• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ Project proposal/ideas

⇒ Wirefames if possible!

Questions

Questions

Q: If you link multiple CSS files, which one takes precedence if there are conflicts?

A: The last style sheet loaded will take precedence.


	<link rel="stylesheet" href="css/boostrap.css">
	<link rel="stylesheet" href="css/style.css">

Q: What are the benefits of Semantic HTML?

A: Beyond SEO, semantic HTML is also used for:

• Accessibility (screen readers)

• Internationalization

• Interoperability (help other programmers understand the code)

Agenda

• Horizontal navigation

• display: inline-block

• CSS float property

• CSS clear property

Horizontal Navigation

How did you build Fashion Blog's nav?

Horizontal Navigation: <ul>
Horizontal Navigation: <a>
Horizontal Navigation: <a>

• Cons of the <a> approach:

⇒ <a> tags are INLINE elements

⇒ Cannot set margin-top or margin-bottom

⇒ Cannot set height or width

⇒ CodePen exercise

• Can set display: block...but would have to use CSS floats

display: inline-block

Display: inline-block

• Display block elements...inline

• Can still set box model properties:

• height / width

• margin

• padding

• Note: IE6 and IE7 do not support display: inline-block

Exercise: Horizontal-Nav

1) Open horizontal-nav in SublimeText

2) Use spec.png and readme.txt

3) Do not worry about pixel perfection

Floats

Floats

• CSS positioning property

• Another tool for rendering block elements inline

• Enables more robust web layouts

Floats

• Applied as follows:


	.sidebar {
	  float: right;
	}

• Valid values: left, right, none

• Original purpose: allow text "wrap" around images

• Now: technique for advanced web layouts

Floats + Layout

CodePen Example

Clearing Floats

Clearing Floats

• Floated elements do not give their parent any height:

1) Objects further down the page will render incorrectly

2) If there are only floated objects within an object, it will collapse

• To prevent rendering issues, we must handle, or clear, floats

• Three methods:

1) overflow: hidden;

2) The clear CSS property

3) The "clearfix"

Handling Floats: The Overflow Method

• Add the following to the collapsed element:

overflow: hidden;

• Tells browser to recognize height of the content

• Technically isn't clearing - parent cannot clear child's floats

• Establishes a new block formatting context

• Elements that create new BFC's acknowledge child's floats

Clearing Floats: The Clear Class

1) Define the following in your CSS:


	.clear {
	  clear: both;
	}

2) Place empty div AFTER the floated elements


    <div id="floated-right"></div>
    <div id="floated-left"></div>
    <div class="clear"></div>
Clearing Floats: The Clearfix Class

• Define the following in your CSS:


	.clearfix:after {
	  content:"";
	  display:table;
	  clear:both;
	}

• Add the class to the element that has collapsed

• Source

Lab/HW: Fashion Blog (pt. 2)

1) Open fashion-blog-part2 in SublimeText

2) Build what you see in design.png

3) Copy found in copy.txt

4) Will have to look up :first-letter

On Deck: #07 - Page Layout Lab

• Floats/Clear review

• Layout lab

Exit Tickets!