Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Align thumbnails with equal spacing

Posted on 2012-09-03
12
Medium Priority
?
695 Views
Last Modified: 2012-09-03
Hi guys,

Im trying to horizontally align three thumbnail images with an equal line space between each thumb. The three images are contained with a 'thumbnail-container' class that is 760px wide.

The first thumbnail image aligns perfectly to the left of the container but the final image still has about 10px of blank space to the right of it. I've tried all different padding: and margin variations but I can get the images to align pefectly inside the container.

Please help me out guys!?!?!

See image...

The third thumb isn't aligned to the right of the container
 .thumbnails-container {
  width:760px;
 }

.thumbnails {
  margin-left: -20px;
  list-style: none;
  padding-right: 10px;
  *zoom: 1;
}

.thumbnails:before, .thumbnails:after {
  display: table;
  content: "";
}
.thumbnails:after {
  clear: both;
}
.thumbnails > li {
  float: left;
  margin: 0 0 18px 20px;
}
.thumbnails > li:last-child{
  padding-left: none;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.thumbnail .caption {
  padding: 9px;
}

Open in new window

0
Comment
Question by:rafique12
  • 4
  • 3
  • 3
  • +1
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38361008
Add a right margin to the images
.thumbnail > img {
margin-right:50px;
....
}
after which target the last image to remove the margin

.thumbnail > img:last-child {
margin-right:0;
}

You should now have a 50px space between the images.
0
 

Author Comment

by:rafique12
ID: 38361038
Sorry no joy :-(

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right:50px;
}
.thumbnail > img:last-child {
margin-right:0;
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38361041
Can you post your html
0
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.

 

Author Comment

by:rafique12
ID: 38361054
Here:

<div class="thumbnails-container">
<ul class="thumbnails">
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
</ul>
</div>

Open in new window

0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38361116
You are not taking into account padding and borders

Try this (i have substituted spans for images so replace those with your image)
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.thumbnails-container {
  width:760px;

}
.thumbnails {
  margin-left: -20px;
  list-style: none;
  padding-right: 10px;
  *zoom: 1;
}
.thumbnails > li {
  float: left;
}
.thumbnails li.middle {
   margin: 0 22px;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
span {
	display: block;
	width: 220px;
	height: 220px;
	background: red;
}
</style>
</head>
<body>
<div class="thumbnails-container">
	<ul class="thumbnails">
		<li><a class="thumbnail"><span></span></a></li>
		<li class="middle"><a class="thumbnail"><span></span></a></li>
		<li><a class="thumbnail"><span></span></a></li>
	</ul>
</div>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38361117
I've amended the code slight since you had markup that you don't need - they can be targetted by the container.

<div class="thumbnails-container">
<ul class="thumbnails">
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
</ul>
</div>

<style>
 .thumbnails-container {
  width:760px;
 }
.thumbnails {
  list-style: none;
  margin:0;
  padding:0;
}
.thumbnails > li {
  display:inline-block;
  margin: 0 43px 18px 0;
  padding:0;
}
.thumbnails > li:last-child{
  margin-right:0;
}
.thumbnails li img {
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.thumbnails li img:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail .caption {
  padding: 9px;
}
</style>
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38361126
To expand on my earlier post.

You also did not disable the ul padding and margins - updated code below
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.thumbnails-container {
  width:760px;
}
.thumbnails {
  list-style: none;
  *zoom: 1;
  magin: 0;
  padding: 0;
}
.thumbnails > li {
  float: left;
}
.thumbnails li.middle {
   margin: 0 41px;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
span {
	display: block;
	width: 220px;
	height: 220px;
	background: red;
}
</style>
</head>
<body>
<div class="thumbnails-container">
	<ul class="thumbnails">
		<li><a class="thumbnail"><span></span></a></li>
		<li class="middle"><a class="thumbnail"><span></span></a></li>
		<li><a class="thumbnail"><span></span></a></li>
	</ul>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:rafique12
ID: 38361213
Sorry dude I should have mentioned that I am doing this in Magento!
0
 
LVL 58

Expert Comment

by:Gary
ID: 38361219
Shouldn't make any difference, is this the More Views on the product detail page under the main image?
0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1332 total points
ID: 38361386
Just do this with this with the img, unless you absolutely need the extra DIVs and ULs

//HTML
<div class=".thumbnails-container">
   <img src="http://placehold.it/220x220" alt="" class="first" />
   <img src="http://placehold.it/220x220" alt="" />
   <img src="http://placehold.it/220x220" alt="" class="last" />
</div>

//CSS
.thumbnails-container { width:760px; overflow:hidden; }
.thumbnails-container img { display:block; width:220px; margin:0px 25px; float:left; }
.thumbnails-container img.first { margin-left: 0px; }
.thumbnails-container img.last { margin-right:0px; }

Open in new window

0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1332 total points
ID: 38361394
PS: My styling above doesn't take into account any padding or borders on the img - recalculate if needed :)
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 668 total points
ID: 38361596
Sorry dude I should have mentioned that I am doing this in Magento!

Not sure what that has to do with it - the solution remains the same - either you overwride the styles with a custom stylesheet or do it inline but basically you need to make provision for the padding and margins in the UL and the padding and borders around the images which is why a 50px margin won't work.

However, use it or not as you will - the code works as posted according to the requirement.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…
Suggested Courses
Course of the Month21 days, 1 hour left to enroll

810 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