Home > Chapter Review and Exercises > Chapter 15 - Floating and Positioning > Chapter 15 Exercises

More modifications to the Black Goose Bakery CSS style sheet

1. Follow the instructions on pages 395, 404, 414, and 416 of the Class Text.

2. I have already created a folder in Ch15 with the necessary files you will need to edit.  

3. You will start by editing the bakery-styles.css file.

4. As reference, the Chapter 15 textbook slides are in the Class Textbook and Resources section.

Read pages 387-394 before starting Exercise 15-1.

Exercise 15-1 What you need to know for this exercise

• Floating allows you to move elements left or right and have text wrap around it.

• Positioning allows you to specify the location of an element anywhere on the page with pixel precision.

• Text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right.

• The is referred to as the Normal Flow.  Floating and positioning changes the relationship of elements to the normal flow in different ways.

• The float property allows you to move an element as far as possible to the left or right, allowing the following content to wrap around it.

• The clear property turns the text wrapping off (that was initiated by the float property), and returns to the normal flow for the element that you want to start below the float.

• Confused? The w3schools links below do live demonstrations of the float and the clear properties:

https://www.w3schools.com/css/css_float.asp 

https://www.w3schools.com/CSSref/pr_class_clear.asp 

Exercise 15-1 Walkthrough

Page 395

The Black Goose Bakery home page that you worked on in Chapter 14, Thinking Inside the Box, is going to be further modified here.

Step 1A

In your Ch15 folder, open the CSS file, bakery-styles.css, in your text editor and the HTML document, bakery.html, in your browser.  The HTML document should appear as shown here.

Step 1B

Using the float property, float the baked goods images (the bread and the muffin), to the far left.  Use a contextual selector to target only those images in the main section.

NOTE: To review contextual sectors, refer to the the Chapter 12 notes here.

Add the selector main img {  float: left; } to the bottom of the main "products" section as shown here:

/* main "products" styles */

main {

  font-family: 'Stint Ultra Expanded', Georgia, serif;

  background-color: white;

  line-height: 1.8em;

  color: #555;

  padding: 1em;

  border: double 4px #EADDC4;

  border-radius: 25px;

  margin: 2.5%;

}

h3 {

  text-transform: uppercase;

  letter-spacing: .2em;

  color: #7A0002;

  border-top: 1px solid;

  border-left: 3px solid;

  padding-left: 1em;

  margin-top: 2.5em;

}

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

}

main img {

  float: left;

}

Step 1C

Save the CSS file, bakery-styles.css, and refresh bakery.html in the browser.  Notice how the text has moved up, to the right of the baked goods images.

Step 2

The “Learn more” links need to be below the baked goods images on the far left side of the page.  

• • In bakery.html the paragraphs with those links are marked up with the class “more”, as shown here:

    <p class="more"><a href="">Learn more about our baking process...</a></p> 

And there already is a style rule for them, a class selector (p.more) in the CSS file, bakery-styles.css.  

Remember, p.more means to only apply the property declarations (in this case  clear: left;) to <p> elements that have class="more".

• • You will now return to the bakery-styles.css file (that came from your Ch15 folder), that's in your text editor.

  • To move the "Learn more" links you need to clear any floats on the left edge of the page.  To make the “Learn more” paragraphs clear any floats on their left edge, add the clear: left; property to the p.more selector:

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

}

Step 3

Adjust the spacing around the floated images.  Give both images a 1em margin on the right and bottom sides by using the shorthand margin: 0 1em 1em 0; property:

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

Step 4

 This is the paragraph in the bakery.html that has the muffin image :

<p><img src="images/muffin.png" alt="one chocolate chip muffin">

The muffin image needs extra space on the left side so that it lines up better with the bread image.  Use an attribute selector to grab any image whose src attribute contains the word muffin (there’s only one):

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="muffin"] {

  margin-left: 50px;

}

Step 5

Check your work by saving bakery-styles.css in the Ch15 folder and then open (or reload) bakery.html in the browser, and see if it matches the image below. 

Read pages 396-403 before starting Exercise 15-2.

Exercise 15-2 What you need to know for this exercise

1. The shape-outside property allows the text that is normally wrapped around an image in a rectangular shape, to do so in a circle, ellipse, polygon, or any image shape (p. 399).

2. Using the webkit property you can make the text wrap around an invisible image (page 400).

3. The shape-margin property specifies an amount of space to hold between the shape and the wrapped text.

4. Instead of using an image to wrap text, generic shapes using the keywords circle(), ellipse(), and polygon(), can be used (page 401).

Be sure to check the additional CSS shapes resources on page 403.

Exercise 15-2 Walkthrough

Page 403

Step 1A

We are going to wrap the text around the baked goods images.  The image wrap styles for the bread and the muffin images will go in the /* main "products" styles */ section to keep the style sheet organized.  Make the text wrap around a circle.  Set the radius of the circle to 125px for the bread image and 110px for the muffin.  Target each image individually using an attribute selector (the attribute selector for the muffin image is there already):

img[src*="muffin"] {  

margin-left: 50px; 

} 

Step 1B

Create an attribute selector for bread, img[src*="bread"] , and give it the properties, 

-webkit-shape-outside: circle(125px); shape-outside: circle(125px);

and insert it in the main section as shown below:

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="bread"] {

  -webkit-shape-outside: circle(125px);

  shape-outside: circle(125px);

}

img[src*="muffin"] {

  margin-left: 50px;

}

Step 1C

Add the properties -webkit-shape-outside: circle(110px); shape-outside: circle(110px); to the attribute selector for the muffin image img[src*="muffin"] :

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="bread"] {

  -webkit-shape-outside: circle(125px);

  shape-outside: circle(125px);

}

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(110px);

  shape-outside: circle(110px);

}

Step 1D

IMPORTANT: Before continuing, check your work by saving bakery-styles.css and then open (or reload) the bakery.html document in the browser, and see if it matches the image below.

Step 2

The text wrapping around the bread image needs to be improved by making the text follow an ellipse shape.  Replace the circle declarations with this ellipse notation ellipse(130px 95px at 50% 50%); by changing this,

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="bread"] {

  -webkit-shape-outside: circle(125px);

  shape-outside: circle(125px);

}

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(110px);

  shape-outside: circle(110px);

}

to this,

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="bread"] {

  -webkit-shape-outside: ellipse(130px 95px at 50% 50%);

  shape-outside: ellipse(130px 95px at 50% 50%);

}

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(110px);

  shape-outside: circle(110px);

}

Step 3

Add a polygon wrap shape around the muffin image instead of the circle.  Use these coordinates:

-webkit-shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);

 shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px); 

These polygon wrap shape coordinates need to be placed below the four lines of the attribute selector for muffin, img[src*="muffin"] as shown here.

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(125px);  

  shape-outside: circle(125px);

The following shows the new polygon properties added to the attribute selector for the muffin image img[src*="muffin"] :

p.more {

  font-family: verdana, sans-serif;

  text-transform: uppercase; 

  font-size: .8em;

  clear: left;

}

main img {

  float: left;

  margin: 0 1em 1em 0;

}

img[src*="bread"] {

  -webkit-shape-outside: ellipse(130px 95px at 50% 50%);

  shape-outside: ellipse(130px 95px at 50% 50%);

}

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(125px);  

  shape-outside: circle(125px);

  -webkit-shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);

  shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);  

}

Notice that you didn't have to delete the notation,

-webkit-shape-outside: circle(125px);  

shape-outside: circle(125px);

because the notation you just put in after that overrides it.

Step 4

Check your work by saving bakery-styles.css and then open (or reload) bakery.html in the browser, and see if it matches the image below.

Read pages 405-413 before starting Exercise 15-3.

Exercise 15-3 What you need to know for this exercise

1. So far the floating property has been discussed.  Now the position property is going to be used.

2. The four types of position properties are static, relative, absolute, and fixed.

3. The actual position for the four positioning methods is specified by the offset properties.

4. The four offset properties are top, right, bottom, and left (p. 406).

5. Relative positioning moves an element relative to its original spot in the flow. The space it would have occupied is preserved and continues to influence the layout of surrounding content (p. 407).

6. With Absolute positioning an element is positioned relative to its nearest containing block (p. 409-411).

Further explanations of the containing block concept, along with excellent examples, is found here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block 

7. Positions can be specified with the em, pixel, and percent values (p. 411-413)

8. Further examples, and a live demonstration, of the various types of position properties is here:

https://www.w3schools.com/cssref/pr_class_position.asp 

Exercise 15-3 Walkthrough

Page 414

Step 1

Use absolute positioning to add an award graphic to the home page.  In the bakery.html document, put these lines of code,

  <div id="award"> 

    <img src="images/award.png" alt="Farmers' Market Award">

  </div> 

inside footer element under the p element.  That will change this,

<footer>

  <p>All content copyright &copy; 2017, Black Goose Bistro.</p>

</footer>

</body>

</html>

to this,

<footer>

  <p>All content copyright &copy; 2017, Black Goose Bistro.</p>

  <div id="award"> 

    <img src="images/award.png" alt="Farmers' Market Award"> 

  </div> 

</footer>

</body>

</html>

Before proceeding be sure to save the bakery.html document.

Step 2

Now use absolute positioning to place the award in the top left corner.  In the /* misc styles */ section of the CSS file, bakery-styles.css, add a new rule to the stylesheet that positions the div, as follows:

#award {

  position: absolute;

  top: 30px;

  left: 50px;

}

Insert that rule into the /* misc styles */ as follows:

/* misc styles */

footer {

  color: #EADDC4;

  text-align: center;

  font-size: .8em;

  padding: 1em;

}

#award {   

  position: absolute;  

  top: 30px;  

  left: 50px;

}

h2 {

  font-family: 'Stint Ultra Expanded', Georgia, serif;

}

Step 3

IMPORTANT: Before continuing, save the CSS file, bakery-styles.css, and take a look at the bakery.html document in your web browser.  

• Resize the browser window to make it very narrow, and you will see that the positioned award image overlaps the header content.  

• Notice also that when you scroll the document, the image scrolls with the rest of the page. 

Step 4  (Optional)

Try playing around with other offset properties to get a feel for positioning in the viewport (or the “initial containing block” to be precise).  The offset properties now are top: 30px; and left: 50px; as shown here:

#award {   

  position: absolute;  

  top: 30px;  

  left: 50px;

}

Read pages 414-416 before starting Exercise 15-4.

Exercise 15-4 What you need to know for this exercise

1. Absolute positioned elements can stack up on each other.

2. When that happens, the elements stack up on each other in the order in which they appear in the document.

3. To change the stacking order use the z-index property (p. 414-415).

4. The final positioning property is Fixed positioning.

5. With Fixed positioning, the offset values for fixed elements are always relative to the viewport, which means the positioned element stays put even when the rest of the page scrolls.

6. Fixed elements are often used for content that needs to stay in the same place, either at the top, bottom, or side of a screen, so it's always available, even when the content scrolls.

Exercise 15-4 Walkthrough

Page 416

Step 1

The award image needs to always be in the upper left corner when the page is scrolled.  Fixed positioning will allow that to happen.

Step 2

Change the style rule for the #award div to make it fixed rather than absolute.  Change this,

#award {   

  position: absolute;  

  top: 30px;  

  left: 50px;

}

to this,

#award {   

  position: fixed;  

  top: 30px;  

  left: 50px;

}

Step 3

Save the bakery-styles.css style sheet, and open the bakery.html document in a browser. When you scroll the page, you will see that the award now stays put where you positioned it in the browser window.

Step 4

NOTE: Fixed positioning has the potential to to hide content as the page scrolls.