HTML and CSS Reference
In-Depth Information
When we add these new styles to our existing Speakers page styles (using the
speaker-info class as a qualifying selector for the <img> elements), our CSS
will look like this:
Click here to view code image
1. .speaker-info img {
2. border-radius: 50%;
3. height: 130px;
4. margin: -66px 0 22px 0;
5. vertical-align: top;
6. }
5. Since we are using an aggressive negative margin on the <img> element within
the <div> element with a class attribute value of speaker-info , we need to
remove the padding on the top of that <div> element.
Previously we were using the padding property with a value of 22px 0 , thus
placing 22 pixels of padding on the top and bottom and 0 pixels of padding
on the left and right of the <div> element. Let's swap this property and value out
for the padding-bottom property, as that's the only padding we need to
identify, and use a value of 22 pixels.
The new speaker-info class rule set looks like this:
Click here to view code image
1. .speaker-info {
2. border: 1px solid #dfe2e5;
3. border-radius: 5px;
4. margin-top: 88px;
5. padding-bottom: 22px;
6. text-align: center;
7. }
Now both our home and Speaker pages are looking pretty sharp, as shown in Figures 9.7
and 9.8 , respectively.
Search WWH ::

Custom Search