Go to the Award Styles section. In this section, you will create styles for the

Question

Go to the Award Styles section.

In this section, you will create styles for the list of awards won by Pandaisia Chocolates. Information boxes for the awards are placed within the divelement with ID #awardList. Create a style rule for this element that places it using relative positioning, sets its height to 650 pixels, and automatically displays scrollbars for any overflow content.

Every information box in the #awardListelement is stored in a divelement belonging to the awardsclass. Create a style rule that places these elements with absolute positioning and sets their width to 30%.

Position the individual awards within the #awardListbox by creating style rules for the divelements with id values ranging from #award1to #award5at the following (top, left) coordinates:

Explanation / Answer

SOLUTION:

The HTML layout defined is like this:
<div id='awardList'>
<div class='awards' id = 'award1' >Award 1</div>
<div class='awards' id = 'award2' >Award 2</div>
<div class='awards' id = 'award3'>Award 3</div>
</div>
So the style for this will be:
Notice the position relative here, this was missing in your code.
Relative position works as static unless you add some extra properties
like top, left, bottom, right
div#awardList {
position: relative;
overflow: scroll;
}
div.awards {
position: absolute;
width: 30%;
}
Rest of your style rules are correct according to your question.

Related Questions

Navigate

• Browse (All)
• Browse G
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.