Invisible border on images

I'm trying to separate my 10 random images a little bit so they're not squished and all together. I tried using a border, I'm not getting any errors, it's just that it's not working. I'm trying to use the border as padding, so it must be invisible and only on the left and right. Any help?

<html>
  <head>
    <title>Cards</title>
    <script type="text/css">
     .cardPad{
      border-top:none;
      border-bottom:none;
      border-left:10px;
      border-right:10px;
      }
    </script>
  </head>
  <body>
    <p>
     <?php 
      $cards = array("Messi", "Ronaldo", "Ibrahimovic", "Ribery", "Robben", "Neymar", "Rooney", "Casillas", "Falcao", "Van Persie", "Hazard", "Iniesta", "Xavi", "Schweinsteiger", "Silva", "Fabregas", "Lahm", "Aguero", "Cavani", "Vidic", "Ozil", "Mata", "Bale", "ThiagoSilva", "Kompany", "Tevez", "Toure", "Ramos", "Suarez", "Pirlo", "DiMaria", "Neuer", "Pique", "Buffon", "Lewandowski", "Gomez", "Chiellini", "Cole", "Pedro", "Busquets", "Cech", "Muller", "Hummels", "Alonso", "Navas", "Modric", "Cazorla", "Gotze", "Benzema", "Vidal", "Lavezzi");

shuffle($cards);

$cards = array_slice($cards, 0, 10);

foreach ($cards as $card) {
    echo "<img class='cardPad' src='http://d2bm3ljpacyxu8.cloudfront.net/fit/105x97/http://clearpkz.webs.com/webstore/$card.png'>";
}
?>
    </p>
  </body>
</html>

Answers


First, enclose the stylesheet in <style> tag and not <script> tag.

<style>
     .cardPad {
       border:10px solid #00f;
       border-bottom:0;
       border-top:0;
      }
</style>

And you need to specify a border style for it to apply. Like "solid", "dashed" etc. The color by default would be #000. I have changed it to blue for clarity.

For padding purposes, use the padding/margin property and not border. For an img, both would give the same effect however actually the two are different. Which would look like this

<style>
     .cardPad{
        padding: 0 10px;
      }
</style>

You can see the fiddle here. http://jsfiddle.net/Ukp6z/2/

If you are hell bent on using border, though not the correct way-

Then use

<style>
     .cardPad{
       border:10px solid transparent;
       border-bottom:0;
       border-top:0;

      }
</style>

This would give the same effect as seen here http://jsfiddle.net/Ukp6z/3/


I created a jsfiddle for this, is this what you want?

Actually, you can use margin or padding to separate these <img>s. I don't get why you can't get it work.

You may need to post your modified code so that we can help.


Maybe this:

 .cardPad{
    ...
    padding: 10px;
 }

Cheers


Like Rahul wrote, you need to set the style for the class "cardPad" in your head.

<style type="text/css">
    .cardPad{
    padding-right: 10px;
    }
</style>

I copied your code and uploaded to my server, and I believe this change would give you the effect you desire.


Can you use one (or more) the following CSS properties on your item?

margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left 

e.g.

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

This page has more info -> http://www.htmldog.com/guides/css/beginner/margins/


The code's wrong (needs style instead of script tag) and overall spacing should be defined by padding or margin instead of border, but replace that <script type="text/css"></script> tag with this and it should work:

<style>
.cardPad {
    border-left:10px solid rgba(0,0,0,0);
    border-right:10px solid rgba(0,0,0,0);
}
</style>

Need Your Help

"Hierarchical" rowsets in Zend Framework?

database zend-framework model

I have two tables - let's call them Customers and Orders. It's a 1:n relationship, where each Order is placed by one Customer, and one Customer can have many orders.

Issue with multidimensional list python

python-3.x

python 3.3.5. faced strange issue while working with List. In line 6th and 8th I am printing same variable but not sure why it is getting converted into uppercase