Solved

Changing vertical to horizontal

Posted on 2014-02-18
3
152 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 500 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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 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