Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
w that we have the grid set up for the Breads of the World page, we ce items into the correct grid areas by using line numbers and nam going to go through them quickly, but feel free to save the file and page in a grid-supporting browser at any step along the way. Refer ished layout in FIGURE 18-41 for the final item positions and line num its. 1- 2. main-start in-start Introducing Bread

w that we have the grid set up for the Breads of the World page, we ce items into the correct grid areas by using line numbers and nam going to go through them quickly, but feel free to save the file and page in a grid-supporting browser at any step along the way. Refer ished layout in FIGURE 18-41 for the final item positions and line num its. 1- 2. main-start in-start Introducing Bread

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question
EXERCISE 16-5. Placing items on a grid Now that we have the grid set up for the Breads of the World page, we can place items into the correct grid areas by using line numbers and names. I'm going to go through them quickly, but feel free to save the file and look at the page in a grid-supporting browser at any step along the way. Refer to the finished layout in FIGURE 18-41 for the final item positions and line number hints. 1- 2. main-start main-start Introducing Breads of the World! main-end -end 3 FIGURE 16-41. The final Breads of the World grid layout. 1. Open grid.html in your text editor if it isn't open already. We'll start by placing the nav element into the first row of the grid, using the four grid line properties: nav { grid-row-start: 1; grid-row-end: 2; grid-column-sta 2. Now place the figures in their positions on the grid. Start by putting the third figure (#figc) in its place in the far-right column by using the shorthand grid-row and grid-column properties. It goes between the 3rd and 4th row grid lines and extends from the 7th to 8th column lines. For columns, instead of 7 and 8, use the negative value for the last line and span it one space to the left to get to the starting point: #figc { grid-row: 3 / 4; grid-column: span 1 / -1;} Now position the #figA and #fige elements by using the grid-area prop- erty with line values. Remember that the values go in the order top, left, bottom, right (counterclockwise around the area). #figA { grid-area: 3 / 3 / 4 / 4; } #fige { grid-area: 3 / 5
Transcribed Image Text:EXERCISE 16-5. Placing items on a grid Now that we have the grid set up for the Breads of the World page, we can place items into the correct grid areas by using line numbers and names. I'm going to go through them quickly, but feel free to save the file and look at the page in a grid-supporting browser at any step along the way. Refer to the finished layout in FIGURE 18-41 for the final item positions and line number hints. 1- 2. main-start main-start Introducing Breads of the World! main-end -end 3 FIGURE 16-41. The final Breads of the World grid layout. 1. Open grid.html in your text editor if it isn't open already. We'll start by placing the nav element into the first row of the grid, using the four grid line properties: nav { grid-row-start: 1; grid-row-end: 2; grid-column-sta 2. Now place the figures in their positions on the grid. Start by putting the third figure (#figc) in its place in the far-right column by using the shorthand grid-row and grid-column properties. It goes between the 3rd and 4th row grid lines and extends from the 7th to 8th column lines. For columns, instead of 7 and 8, use the negative value for the last line and span it one space to the left to get to the starting point: #figc { grid-row: 3 / 4; grid-column: span 1 / -1;} Now position the #figA and #fige elements by using the grid-area prop- erty with line values. Remember that the values go in the order top, left, bottom, right (counterclockwise around the area). #figA { grid-area: 3 / 3 / 4 / 4; } #fige { grid-area: 3 / 5
Expert Solution
steps

Step by step

Solved in 4 steps with 4 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS