HTML and CSS Reference
In-Depth Information
3.
Our navigation menus aren't the only places we'll be using lists. We'll also use
them on some of our internal pages, including the Speakers page. Let's add some
speakers to our conference.
Within our
speakers.html
file just below our lead section, let's create a new
section where we'll present all of our speakers. Reusing some existing styles, we'll
use a
<section>
element with a
class
attribute value of
row
to wrap all of
our speakers and apply a white background and padding behind them. Inside the
<section>
element, we'll add a
<div>
element with a
class
attribute value
of
grid
to center our speakers on the page and allow us to use multiple columns
in doing so.
So far our HTML below the lead section looks like this:
1.
<section class="row">
2.
<div class="grid">
3.
4.
</div>
5.
</section>
4.
Inside the grid every speaker will be marked up with his or her own
<section>
element, which will include two columns. The first column will span two-thirds of
the
<section>
element and will be marked up using a
<div>
element. The
second column will span the remaining one-third of the
<section>
element and
will be marked up using an
<aside>
element, as its content is secondary to the
speaker and his or her specific talk.
Using our existing
col-2-3
and
col-1-3
classes, the outline for a speaker sec-
tion will look like this:
1.
<section id="shay-howe">
2.
3.
<div class="col-2-3">
4.
...
5.
</div><!--
6.
7.
--><aside class="col-1-3">
8.
...
9.
</aside>
10.
11.
</section>
There are a few items to notice here. First, each
<section>
element for each
speaker includes an ID attribute with the speaker's name as the attribute value.
Search WWH ::
Custom Search