Professor: This puts the second paragraph in the same block for matting context as the
first initial, which means that you can clear it past the initial. However, that will not
be necessary because the width of the paragraph is 100 percent of its containing block
width, which in any case moves the paragraph downwards to its own line.
Floated paragraphs will o f cou rse cause you new pro blems. For example, any head -
ing tha t will follow floated paragraphs will ignore the m. To solve that, you can use
sections but you’ll have to float them as well. Recall that a containing block does
not respect the heights of floated elements. However, if you float a containing ele-
ment, th en its heigh t au tomatically resizes so as to also acc ommodate all the floats it
contains. If you float sections, they will adjust their heights to hold all the paragraph s.
Mike: Things are starting to get complica te d.
5.9 Homework
Professor: Floats are not the easiest thing to comprehend, but when you know how
to use them they will become a powerful tool for laying out y our pages. I suggest
that you experiment with them some more at home. Do not forget to inspect content,
padding, and other area s in the DevTools, and think about why things tur n out as they
do.
Besides, I have a very intriguing and interesting project for you to do at home. I would
like you to build an attractive menu navigation bar for a web page. For starters, use
the following unordered list of links:
<header>
<nav id="top-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies & TV</a></li>
<li><a href="#">Books</a></li>
</ul>
</nav>
</header>
Your job is to ar range the list items horizontally and design them as you like. You ma y
also use the :hover pseudo-class to highlight the menu item over which the mouse
cursor moves. That’s the firs part of the homework.
For the second part, you must augment the above HTML list with an additional item
(named “More”), into which you insert another unordered list to function as a drop-
down sub-menu:
...
<li><a href="#">Books</a></li>
<li><a>More</a>
<ul>
<li><a href="#">E-Book Readers</a></li>
98 Meeting 5. Understanding CSS Boxes
<li><a href="#">Portable Media Players</a></li>
</ul>
</li>
...
Your task is to keep this sub-menu hidden until the visitor hovers the m ouse pointer
over the “More” menu item. When that happens, the sub-menu will show up.
Finally, for your further contemp la tion, a list of today’s topics:
In this meeting: CSS b ox model, co ntent, padding, border, margin, edge, collaps-
ing margins, DevTools, element display, element flow, position, visibility,
floated e le ments, float, clear, LVHA order, a ttribute selector, p seudo-class,
pseudo- element, child selector, adjacent siblin g selector, block formatting co ntext
5.9. Homework 99
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.