DOCTYPE html>                 Part 4 - Positions

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...
icon
Related questions
Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Part 4 - Positions</title>
    <style>

        /*  element selector */
        replace-me {
            font-size: 10px;
            margin: 0;
            background-color:#414046;
        }

        /*  class selector */
        .replace-me {
            position: fixed;
            left: 4em;
            top: 0;
            background-color: white;
            width: 4em;
            height: 100vh;
        }

        /*  class selector */
        .replace-me {
            position: fixed;
            right: 4em;
            top: 0;
            background-color: white;
            width: 4em;
            height: 100vh;
        }

        /*  class selector */
        .replace-me {
            position: fixed;
            right: 0;
            top: 0;
            background-color: green;
            width: 4em;
            height: 100vh;
        }

        /*  class selector */
        .replace-me {
            position: fixed;
            left: 0;
            top: 0;
            background-color: green;
            width: 4em;
            height: 100vh;
        }

        /*  class selector */
        .replace-me {
            background: url('./images/white-car.png');
            background-repeat: no-repeat;
            background-size: cover;
            transform: rotate(180deg);
            position: sticky;
            margin-top: 50em;
            top: 0;
            left: 20%;
            width: 20em;
            height: 40em;
            float: left;
        }

        /*  General sibling combinator */
        .replace-me ~ .replace-me {
            position: relative;
            background: url('./images/red-car.png');
            background-repeat: no-repeat;
            background-size: cover;
            margin-top: 5em;
            top: 0;
            right: 20%;
            width: 20em;
            height: 40em;
            float: right;
        }

        /* General sibling combinator */
        .replace-me ~ replace-me {
            background-color: #EFB700;
            border-radius: 2px;
            margin: 4em auto;
            width: 4em;
            height: 10em;
        }

    </style>
</head>
<body>
    <div class="left-grass"></div>
    <div class="left-side"></div>
    <div class="right-side"></div>
    <div class="right-grass"></div>
    <div class="car-left">
    </div>
    <div class="car-right">
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div class="car-right">
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div class="car-right">
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</body>
</html>

**Part 4 – Positions (positions.html)**

At the end of this section, you will have a webpage that looks and functions like the one shown in the video below. In this setup, the white and green lines are fixed, and the white car sticks to the top of the viewport rather than moving out of view when scrolling.

*Image Description:*
The image shows a top-down view of a road with two lanes separated by dashed yellow lines. A red car is positioned in the right lane, and a white car is in the left lane. The side of the road on the left has a green line, while the right side has a white line.

To achieve this effect, a combination of sticky, relative, and absolute positions was used. Your task is to replace the default selectors in `sticky.html` with the correct selectors. You need to explore the HTML and prewritten style rules to accomplish this.

**Hint:**

- **Use process of elimination:**
  - Example: The line on the left side is green.
    - Look in the stylesheet for a rule that could create a green line on the left side.
    - Check the HTML to find an element that matches the rule.
    - Modify that rule’s selector and refresh your browser to ensure the CSS rule applies to the element.
Transcribed Image Text:**Part 4 – Positions (positions.html)** At the end of this section, you will have a webpage that looks and functions like the one shown in the video below. In this setup, the white and green lines are fixed, and the white car sticks to the top of the viewport rather than moving out of view when scrolling. *Image Description:* The image shows a top-down view of a road with two lanes separated by dashed yellow lines. A red car is positioned in the right lane, and a white car is in the left lane. The side of the road on the left has a green line, while the right side has a white line. To achieve this effect, a combination of sticky, relative, and absolute positions was used. Your task is to replace the default selectors in `sticky.html` with the correct selectors. You need to explore the HTML and prewritten style rules to accomplish this. **Hint:** - **Use process of elimination:** - Example: The line on the left side is green. - Look in the stylesheet for a rule that could create a green line on the left side. - Check the HTML to find an element that matches the rule. - Modify that rule’s selector and refresh your browser to ensure the CSS rule applies to the element.
Expert Solution
steps

Step by step

Solved in 2 steps

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