[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Changing vertical to horizontal

Posted on 2014-02-18
3
Medium Priority
?
154 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 54

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 54

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

656 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