From 34bd0afdd1676237e13b5eca1e36b595e1146fe4 Mon Sep 17 00:00:00 2001 From: dpammyb Date: Tue, 26 Sep 2017 14:15:36 -0400 Subject: [PATCH 1/2] initial changes --- README.md | 54 ++++++++++++++++++++++++++++++++++++---------------- tutorial.css | 4 ++-- 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 6f4b0d5..588e86e 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,54 @@ -# Understanding `a` tags in HTML +# Understanding `float` property in CSS -The `a` tag is a fundamental HTML element responsible for much of the linking goodn ess that makes HTML great! +The `float` property in CSS lets you wrap text around an image. CSS makes this wonderful thing happen by allowing elements following a floated element in HTML markup to surround the element so it stays where you need it! + + ## Components -Let's take a quick look at how the tag works: +Let's take a quick look at how the float element works: + +Begin with a simple HTML, floating some text around an image, add to HTML a header, image, and some text: -``` html -Displayed Text ``` +

Simple float example

+Khangchendzonga National Park This is one of many pictures available online of the Khangchendzonga National Park. This picture was found on the unesco website.

+

This is the national park we will be using as the subject of our class project. Stay tuned for all the interesting things we will discover as a class while working on this project.

+``` + +As with any element, there's a basic structure of ```img { + float: left;}```. The fantastic, amazing float element instructs the image where to float, either left or right or none. Let's try it out: + +```Add this CSS to the HTML suggested above. Use a + +

Understanding float property in CSS

+

The float property in CSS lets you wrap text around an image. CSS makes this wonderful thing happen by allowing elements following a floated element in HTML markup to surround the element so it stays where you need it!

+

Note: you can not center an object using the float element! Float values are: left, right or none.

+

Components

+

Let's take a quick look at how the float element works:

+

Begin with a simple HTML, floating some text around an image, add to HTML a header, image, and some text:

+

Simple float example

+ + +

Khangchendzonga National Park

+

This is one of many pictures available online of the Khangchendzonga National Park. This picture was found on the unesco website.

+

This is the national park we will be using as the subject of our class project. Stay tuned for all the interesting things we will discover as a class while working on this project.

+ + +

As with any element, there's a basic structure of

+
 img {  
      float: left;
  }

The fantastic, amazing float element instructs the image where to float, either left or right or none. Let's try it out:

+

Add this CSS to the HTML suggested above:

+
img {
 
  float: right;
  width: 500px;
}

With the help of the float element the image is no longer confined to a position above or below the text!

+

Try floating the image to the right then the left. What happens when you float: none? Now adjust the width and play around with the height until you are satisfied with the presentation of the page. +Start with the following, then get creative!

+
image {
  float: left;
  width: 500px;
  height: 250px;
}

You can use more than one floating element but it is important to understand how multiple floating elements interact if you are to use them properly. Let us imagine there are five images inside a div that is 500px wide, and has 10px of margin (5px on the right and 5px on the left). If you multiply 5 (images) by 50px and then multiply 5 by 10px (margin) and add the two together you will discover a div with the total width of 300px will be adequate to hold your images neatly.

+

After you learn all about margins try this advanced challenge: search for 4 images related to Khangchendzonga National Park. Float 2 of those images to the left of the image in the above example and 2 to the right of the example image. You have now created a photo gallery that can be used on a website, congratulations!!!

+

Try it yourself

+

You can clone this repository and load a local copy of the tutorial page in your browser to see the float element in action. Then make some changes to the file to learn this yourself!

+

Learn More

+

The Mozilla Developer Network has lots more detail about this float element!

+ diff --git a/a-tag-tutorial.html b/a-tag-tutorial.html deleted file mode 100644 index 7a4e2a1..0000000 --- a/a-tag-tutorial.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - a tag tutorial - - - - - -

The simplest possible HTML page

- -

Try editing the link and the content in this a tag. It's the miracle of HTML!

- - - - diff --git a/float-property-tutorial.html b/float-property-tutorial.html new file mode 100644 index 0000000..ea39c7f --- /dev/null +++ b/float-property-tutorial.html @@ -0,0 +1,34 @@ + + + + + + + + a float tutorial + + + + + + + + + + +

The simplest float element page

+ + +

Simple float example

+ Khangchendzonga National Park +

This is one of many pictures available online of the Khangchendzonga National Park. This picture was found on the unesco website.

+

This is the national park we will be using as the subject of our class project. Stay tuned for all the interesting things we will discover as a class while working on this project.

+ +
+ + + diff --git a/tutorial.css b/tutorial.css index 8f20747..477f02e 100644 --- a/tutorial.css +++ b/tutorial.css @@ -3,4 +3,9 @@ body { font-weight: 300; font-size: 15px; line-height: 25px; + +} +div#imagecontainer { + float: left; + width: 500px }