<section>
<?= t_head("Load Test Page", "5") ?>
<!-- <figure class="example">
<img src="aboutme_no_css.png" alt="About Victoria Kirst" />
<figcaption>This is a similar page describing former CSE 190 M TA and coauthor of our textbook, Victoria Kirst.</figcaption>
</figure>
-->
<p>Download the following skeleton HTML file:</p>
<p class="resource"><a href="skeleton.html">skeleton.html</a></p>
<p>Create a CSS file named <samp>minilab3.css</samp> in the same folder and ensure it’s properly linked to your HTML file by setting the background color of the page to something obvious. (Then you can remove the background color.)</p>
<p>The problems below will ask you to make some CSS adjustments and then describe what happens. Create a new text file (called, for example, <samp>minilab3.txt</samp>) and put your answers to each question in there. They need not be more than a sentence or two. Feel free to discuss each question with your neighbors!</p>
<p class="note">For many of these it’s helpful to use Firebug to toggle a particular property off and on to see the difference it makes. To activate Firebug, right-click on the element whose styles you want to toggle, and select <strong>Inspect Element with Firebug</strong>. Then find the applicable rule in the bottom-right <strong>Style</strong> pane, hover over the property you want to toggle, and click the red circle-slash to disable or enable it.</p>
</section>
<section>
<?= t_head("Positioning Practice", "20–25") ?>
<p>At the top of the skeleton file is a list called <code>a</code>. One of the elements inside it is called <code>b</code>. The remainder of the page is paragraphs of filler text.</p>
<ol>
<li>
<p>Make B be <strong>absolutely positioned</strong>, but do nothing else (i.e., don’t give it <code>left</code>, <code>right</code>, <code>top</code>, or <code>bottom</code> properties).</p>
<p class="question">What happens to B, and what happens to the list item after it?</p>
</li>
<li>
<p>Now give B <code>right</code> and <code>bottom</code> properties of <code>0px</code>.</p>
<p class="question">Where does it go? What tag do you think is its “bounding parent”?</p>
</li>
<li>
<p>Now make A be <strong>relatively positioned</strong>, but do nothing else.</p>
<p class="question">What happens to A? What happens to B?</p>
</li>
<li>
<p>Now give A <code>left</code> and <code>bottom</code> properties of <code>0px</code>.</p>
<p class="question">What happens?</p>
<p>Change the <code>left</code> and <code>bottom</code> properties to be <code>50px</code> instead.</p>
<p class="question">What happens now?</p>
</li>
<li>
<p>Change A to be <strong>fixed positioned</strong>, with the same <code>left</code> and <code>bottom</code> properties.</p>
<p class="question">Where does it go? What happens when you scroll the page text? Does B change location? Why not?</p>
</li>
</ol>
</section>
<section>
<?= t_head("Layout Practice", "25–30") ?>
<ol>
<li>Comment out your previous style rules for A and B.</li>
<li>
<p>Toward the end of lab 2, you added a left column to your Journal page. That column was fixed-width, and the remaining portion of the page took up whatever space was remaining.</p>
<p>Do the same thing here: make the list floated to the left with a fixed width, and make it so the paragraphs are in a column to the right, taking up whatever page width is remaining.</p>
<p class="important note">Make sure the paragraphs do not wrap beneath the list — they should remain in line with each other in a single column.</p>
<p><strong>Note:</strong> It’s useful to edit the HTML here to group the paragraphs together.</p>
</li>
<li>Add some horizontal space between the list and the paragraph column.</li>
<li>Now split the paragraph column in half, with two columns side-by-side in the same space. Put half the paragraphs into one column, and half into another.</li>
<li>Currently the two paragraph columns have no space between them. Add some horizontal space to separate the columns. Then add some space on the right side of the rightmost column, to keep it away from the edge of the page.</li>
<li>Put a restriction on the paragraph columns so that together they cannot be wider than 500 pixels wide (total), or narrower than 200 pixels total, even if the browser is resized larger or smaller than that.</li>
</ol>
</section>
<footer>
<p>If you’ve finished everything, good job! Start playing more with margins & padding on floated elements, inspecting the page with Firebug.</p>
</footer>