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:
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:
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
Search WWH ::
Custom Search