dougwatson
Forum Replies Created
-
Forum: Plugins
In reply to: [Simple Staff List] Horizontal list produces 'orphan' between linesHi Brett:
Thanks for your reply, I really appreciate your help with this!
Here’s the code . . .
____________________________________________________
Template:
[staff_loop]
<div class=”col-xs-6 col-md-4 col-lg-3″>
<img class=”staff-member-photo” src=”[staff-photo-url]” alt=”[staff-name] : [staff-position]”>
<div class=”staff-member-info-wrap”>
[staff-name-formatted]
[staff-position-formatted]
</div>
[/staff_loop]____________________________________________________
CSS:
/* div wrapped around entire staff list */
div.staff-member-listing {
}
/* div wrapped around each staff member */
div.staff-member {
padding-bottom: 4em;
}
/* “Even” staff member */
div.staff-member.even {
}
/* “Odd” staff member */
div.staff-member.odd {
}
/* Last staff member */
div.staff-member.last {
}
/* Wrap around staff info */
.staff-member-info-wrap {
float: left;
width: 80%;
margin-left: 3%;
}
/* [staff-bio-formatted] */
div.staff-member-bio {
}
/* p tags within [staff-bio-formatted] */
div.staff-member-bio p {
}
/* [staff-photo] */
img.staff-member-photo {
float: left;
}
/* [staff-email-link] */
.staff-member-email {
}
/* [staff-name-formatted] */
div.staff-member-listing h3.staff-member-name {
margin: 0;
}
/* [staff-position-formatted] */
div.staff-member-listing h4.staff-member-position {
margin: 0;
font-style: italic;
}
/* Clearfix for div.staff-member */
div.staff-member:after {
content: “”;
display: block;
clear: both;
}
/* Clearfix for <= IE7 */
* html div.staff-member { height: 1%; }
div.staff-member { display: block; }