H153 - Exam Week 6

  1. Assume the following styles:

    div#aside {
    width: 350px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    }

    What will be the distance from the right outer margin edge to the left outer margin edge in a CSS-conformant browser? [10 points]

    414px

  2. Write a rule that will (in theory) take a div with an id of navigate and place it in the top right corner of the browser window, so that it will not move when the document is scrolled, and so that it is no more than a quarter of the screen wide. [10 points]

    div#navigate {position: fixed; top: 0; right: 0; max-width: 25%;}

  3. Consider the following:

    Cards

    <div class="card" id="card3">3</div>
    <div class="card" id="card1">1</div>
    <div class="card" id="card5">5</div>
    <div class="card" id="card2">2</div>
    <div class="card" id="card4">4</div>

    Write a set of rules that will place the "cards" in an offset stack, sorted along the z axis so that card 1 is at the bottom of the stack and card 5 is at the top, as shown in the accompanying figure. The top left corner of each card should be one em below and to the right of the previous card's top left corner. You don't have to write styles for a container, but it may be useful to use one while working on the problem. [20 points]

    div {height: 75px; width: 75px; border: 1px solid black;}
    #card1 {background-color: red; z-index: 0; position: absolute; top: 0; left: 0;}
    #card2 {background-color: orange; z-index: 2; position: absolute; top: 1em; left: 1em;}
    #card3 {background-color: yellow; z-index: 3; position: absolute; top: 2em; left: 2em;}
    #card4 {background-color: green; z-index: 4; position: absolute; top: 3em; left: 3em;}
    #card5 {background-color: blue; z-index: 5; position: absolute; top: 4em; left: 4em;}

  4. Consider the following:

    Quarters

    <div id="container">
    This is the container element.
    <div id="bottom-right">bottom right quarter</div>
    <div id="bottom-left">bottom left quarter</div>
    <div id="top-left">top left quarter</div>
    <div id="top-right">top right quarter</div>
    </div>

    Write a set of rules that will place the four inner div elements within the container as described and so that the elements do not overlap each other, as shown in the accompanying figure. (You do not have to write styles to create the border and backgrounds, although you may if you wish.) [20 points]

    #container {border: 1px solid black; height: 400px; width: 400px}
    #container div {height: 50%; width: 50%;}
    #bottom-right {background-color: #999999; position: relative; top: 50%; left: 50%;}
    #bottom-left {background-color: #9999ff; position: relative; top: 0; left: 0;}
    #top-left {background-color: #ff9999; position: relative; top: -100%; left: 0;}
    #top-right {background-color: #99ff99; position: relative; top: -150%; left: 50%;}

Jennifer Griner