HTML and CSS Reference
In-Depth Information
Click here to view code image
1. /*
2. ========================================
3. Speakers
4. ========================================
5. */
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:
Click here to view code image
1. <section class="row">
2. <div class="grid">
4. <section class="speaker" id="chris-mills">
6. <div class="col-2-3">
7. ...
Search WWH ::

Custom Search