?
Solved

Changing vertical to horizontal

Posted on 2014-02-18
3
Medium Priority
?
153 Views
Last Modified: 2014-02-18
Hi Guys,

I was wondering how you can change the order of the plugin i am using for the staff here http://www.thedancingsoul.ie/this-is-a-test-1/ so its horizontal instead of vertical?

/*  div wrapped around entire staff list  */
div.staff-member-listing {

}

/*  div wrapped around each staff member  */
div.staff-member {
	padding-bottom: 2em;
	border-bottom: thin dotted #aaa;
}

/*  "Even" staff member  */
div.staff-member.even {

}

/*  "Odd" staff member  */
div.staff-member.odd {
	margin-top: 2em;
}

/*  Last staff member  */
div.staff-member.last {
	padding-bottom: 0;
	border: none;
}

/*  Wrap around staff info  */
.staff-member-info-wrap {
	float: left;
	width: 70%;
	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; }

Open in new window


i dont know if it can be done
0
Comment
Question by:jonathanduane2010
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39867416
Try floating .staff-member and give it some width and margin.

.staff-member {
float: left;
margin-right: 10px;
width: 130px;
}
0
 

Author Comment

by:jonathanduane2010
ID: 39867436
Thats great thank you so much...

Is there anyway to keep it in line? see if you look at it now, you will see what i mean
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39867499
Take out the .odd class.  That is adding margin top 2em.

Change

class="staff-member odd "

to

class="staff-member"
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question