0

I created a row of buttons that enlarge on hover on a Sharepoint 2013 webpage , here is the code:

​​​<style type="text/css">

.thumbnail {
position:relative;
width:100px;
height:100px;
display:block;
}

.thumbnail:hover {
top:-25px;
width:130px;
height:130px;
z-index: 999;
}

a img{
float: right;
}

</style>​​​​​​​​​​​​​​​​ 

<a href="site.aspx"> 
<img src="image.png" class="thumbnail"      alt="" style="margin: 5px;"/>​​ </a>
<a href="site1.aspx">
<img src="image1.png" class="thumbnail" alt="" style="margin: 5px;"/> </a>
<a href="site2.aspx">
<img src="image2.png" class="thumbnail" alt="" style="margin: 5px;"/></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<a href="sites3.aspx">
<img src="image3.png" class="thumbnail" alt=""  style="margin: 5px;"/> </a>
<a href="site4.aspx">
<img src="image4.png" class="thumbnail" alt="" style="margin: 5px;"/></a>

Now, with the following command I made those buttons aligned horizontally instead of vertically.

    a img{
    float: right;
    }

Problem is, this way they are aligned right (or left, if I switch the command to "left"), but I need to have them centered. At first I solved the problem by using CSS and setting the margins (margin-left and margin-right), but this solution causes troubles when I resize the browser windows or when I change the screen resolution. Any ideas on how have them at the center of the screen?

4
  • Place them all in the div container like <div id="imgContainer">YOUR IMAGES</div> and then add css: #imgContainer { width: 100%; text-align: center; }
    – Gintas K
    Nov 29, 2016 at 17:00
  • I doesn't work, unfortunately I cannot edit the master page and I can only work by adding scripts to CEWPs in specific pages. Nov 29, 2016 at 17:08
  • Add margin: 0 auto; to your images. jsFiddle
    – Gintas K
    Nov 29, 2016 at 17:21
  • I tried to put margin: 0 auto; everywhere, still no luck Nov 29, 2016 at 17:31

1 Answer 1

0

position:relative means an element is positioned relative to its container

Since you haven't defined a container yourself, the element will be positioned relative to the first parentelement with positioning defined (probably the WebPart here)

When that WebPart gets wider, your 5 buttons are floating to the left or right inside the webpart.

So you need to create a container IN the webpart, center that container, then evenly space your objects inside.

<div class='thumbnails'>
  <a href="site.aspx"><img src="https://365csi.nl/3.png" /></a>
  <a href="site1.aspx"><img src="https://365csi.nl/6.png" /> </a>
  <a href="site2.aspx"><img src="https://365csi.nl/5.png" /></a>
  <a href="sites3.aspx"><img src="https://365csi.nl/c.png" /></a>
  <a href="site4.aspx"><img src="https://365csi.nl/s.png" /></a>
  <a href="site4.aspx"><img src="https://365csi.nl/i.png" /></a>
</div>

But.. when resizing the window.. with squares you will then run into the problem you can't calculate the height off the width. So you need to add some trickery to make an element always be square on resizing.

Now, I am no CSS wizard, we usually wack in loads of DIVs to get things working,
it became a personal challenge to get it working with your minimal HTML code

It took me some hours to get it right, and minimize the CSS to the core: (I had fun, always good to learn)

see JSFiddle: https://jsfiddle.net/dannye/5x1hunsh/

iCSS

3
  • Danny, you're solution works like a charm! Thank you so much for your help! If you will ever come to Rome, I will HAPPILY offer you a beer :) One last question: I noticed that the more I resize the width of the buttons, the more space is created between the images. Do you know of any quick solution for this? (It's not important by the way) :) Nov 30, 2016 at 9:08
  • Beer is always nice. I reworked the code a bit, so its all based on percentages, and added JavaScript code to allow for multiple containers on the same page with a different number of elements (CSS can't calculate element width of unknown number of childelements) Unless you switch to flex-box CSS which only IE 11 supports Nov 30, 2016 at 9:38
  • Blank space between images is gone! Thanks a lot :) Nov 30, 2016 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.