A gap between list-items

I made a list containing several players but there are gaps between the list-items where there shouldn't be gaps. Here's the link: http://www.ostameerbeke.be/spelerskernB.html .

HTML:

        <ul id="beloften">           
            <li><a href="B1.jpg" rel="shadowbox[spelers]"><img src="B11.jpg" width="180px" alt="speler"/></a><p><strong>BUGDAYCI</strong> </p><p>Taner</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>CIRPI</strong> </p><p>Umit</p></li>
            <li><a href="B3.jpg" rel="shadowbox[spelers]"><img src="B31.jpg" width="180px" alt="speler"/></a><p><strong>DE BEULE</strong> </p><p>Bram</p></li>
            <li><a href="B4.jpg" rel="shadowbox[spelers]"><img src="B41.jpg" width="180px" alt="speler"/></a><p><strong>DE CONINCK</strong> </p><p>Toon</p></li>
            <li><a href="B5.jpg" rel="shadowbox[spelers]"><img src="B51.jpg" width="180px" alt="speler"/></a><p><strong>DE COOMAN</strong> </p><p>Rik</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE COOMAN</strong> </p><p>Wim</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE KEGEL</strong> </p><p>Gregory</p></li>
            <li><a href="B8.jpg" rel="shadowbox[spelers]"><img src="B81.jpg" width="180px" alt="speler"/></a><p><strong>DE NUTTE</strong> </p><p>Bram</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>DE REUSE</strong> </p><p>Laurens</p></li>
            <li><a href="B10.jpg" rel="shadowbox[spelers]"><img src="B101.jpg" width="180px" alt="speler"/></a><p><strong>DE SMET</strong> </p><p>Sigi</p></li>
            <li><a href="B11.jpg" rel="shadowbox[spelers]"><img src="B111.jpg" width="180px" alt="speler"/></a><p><strong>HAJIOUI</strong> </p><p>Yassin</p></li>
            <li><a href="B12.jpg" rel="shadowbox[spelers]"><img src="B121.jpg" width="180px" alt="speler"/></a><p><strong>LETTENS</strong> </p><p>Daan</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>LEYSSENS</strong> </p><p>Bedner</p></li>
            <li><a href="B15.jpg" rel="shadowbox[spelers]"><img src="B151.jpg" width="180px" alt="speler"/></a><p><strong>MOYSON</strong> </p><p>Pieter</p></li>
            <li><a href="B16.jpg" rel="shadowbox[spelers]"><img src="B161.jpg" width="180px" alt="speler"/></a><p><strong>NOTAERTS</strong> </p><p>Kevin</p></li>
            <li><a href="B17.jpg" rel="shadowbox[spelers]"><img src="B171.jpg" width="180px" alt="speler"/></a><p><strong>PAPPAERT</strong> </p><p>Pieter</p></li>
            <li><img src="spelerklein.jpg" width="180px" alt="speler"/><p><strong>ROBLEDO GONZALEZ</strong> </p><p>Adrian</p></li>
       </ul>

And Css:

    #beloften {
  list-style-type: none;
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px;
  text-align: center;
}

What am i doing wrong?

Here is the working Jsfiddle of this code: Working example

Answers


Having looked at your page i can see what your problem is.

You player images are 180x180 but your holder image is 180x182 the extra height on the holder images is causing it to display wrong.

Try:

  1. Recreating the holder images as 180x180

  2. Adding on a max-height: 180px; to your img element


Remove the padding

#beloften li {
  margin: 0px auto;
  float: left;
  width: 170px;
  padding: 12px; /* here */
  text-align: center;
}

Alternatively, have the padding be included in the width calculations by using box-sizing.

#beloften li {
    margin: 0px auto;
    float: left;
    width: 170px;
    padding: 12px;
    text-align: center;
    box-sizing: border-box; /* add this */
}

You could do text-align: center on the parent:

 #beloften {
    text-align: center; /* add this */
    list-style-type: none;
    width: 1000px;
    margin: 0px auto;
    padding: 0px;
}

then remove the float from the list items and display them inline-block:

#beloften li {
    display: inline-block; /*add this */
    margin: 0px auto;
    /* float: left; */  /* remove this */
    width: 170px;
    padding: 12px;
    text-align: center;
}

Which results in what I think you're after:

http://imgur.com/ESovzet


Remove the float from the list items and display them inline-block:

#beloften li {
display: inline-block;
margin: 0px auto;
width: 170px;
padding: 12px;
text-align: center;

}


Remove the float from the list items and display them inline-block:

Css Code:

#beloften li {
    display: inline-block;
    margin: 0px auto;
    /* float: left; */ Remove
    width: 170px;
    padding: 12px;
    text-align: center;
}

DEMO

#beloften li p {
    line-height: 0px;
}

Need Your Help

JSON Issue with API HREF

javascript jquery json jsonp

So i'm trying to get the href code to be a clickable button. So far i'm just trying to make it as a link!

How do you convert a string to a node in XQuery?

xml xquery marklogic

I would like to convert a string into a node. I have a method that is defined to take a node, but the value I have is a string (it is hard coded). How do I turn that string into a node?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.