HTML and CSS Reference
In-Depth Information
1.
/*
2.
========================================
3.
Speakers
4.
========================================
5.
*/
6.
7.
.speaker-info {
8.
border: 1px solid #dfe2e5;
9.
border-radius: 5px;
10.
margin-top: 88px;
11.
padding: 22px 0;
12.
text-align: center;
13.
}
Let's take a minute to review why we're using a
<div>
element here and the cor-
responding styles.
We're placing a
<div>
element inside the
<aside>
element with the class attrib-
ute value of
col-1-3
because we'll want the
padding
inherited from the
col-1-3
class to be outside of the
border
on the
<div>
element. Before long
we'll be including an image within the
<div>
element, alongside the unordered
list; therefore we created a
<div>
element as opposed to applying these styles dir-
ectly to the
<ul>
element.
8.
As we add more and more speakers to the page, we'll want to ensure that they re-
main an equal distance apart vertically. To do so, we'll create a
speaker
class
rule set which includes a bottom
margin
of
44
pixels, like this:
1.
.speaker {
2.
margin-bottom: 44px;
3.
}
We can then apply this class to the
<section>
element for each speaker,
provided it isn't the last speaker. We'll omit this class on the last speaker, as we
don't want to create any unnecessary margins before our
<footer>
element.
With more than one speaker, our layout will look like this:
1.
<section class="row">
2.
<div class="grid">
3.
4.
<section
class="speaker"
id="chris-mills">
5.
6.
<div class="col-2-3">
7.
...
Search WWH ::
Custom Search