HTML and CSS Reference
In-Depth Information
Figure 7.1
Establishing new
containing blocks
for individual
content items
and positioning
the profile icon.
.badge {
position: relative;
width: 155px;
padding: 5px 5px 5px 72px; /* create gutter */
font-size: 12px;
background: #eee;
.badge .photo {
position: absolute;
top: 5px; /* match padding on .badge */
left: 5px; /* match padding on .badge */
border: 1px solid rgb(94,94,94);
.badge ul {
padding-left: 0;
list-style: none;
<div class="badge vcard">
<a href="/users/JohnDough" class="fn">John Dough</a>
<img class="photo" src="images/profile_icon.png">
<ul class="meta">
<li>Status: Offline</li>
(continues on next page)
Search WWH ::

Custom Search