1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

White box border creation around multiple images

Discussion in 'Web Design' started by makrant, Nov 29, 2014.

  1. makrant

    makrant New Member

    I wanted to create a list of clients logos with similar web structure. Not really sure how there is a white border created around the each food item such as croissants, favorites. Code is present in index.html
     

    Attached Files:

    makrant, Nov 29, 2014
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    look in the css file for the line of code in red below. the 4px is the width, it's a solid line with a hex color of #d3d1d2 which is a grey tone
    edit it in notepad++ or any Basic text editor, then save it. reload the page, see the change.

    .content div ul li a:first-child img{
    border: 4px solid #d3d1d2;
    }
     
    ishkey, Nov 30, 2014
    #2
  3. makrant

    makrant New Member

    Hi,

    I understood your explanation. I had difficulty understanding concept of "first-child" img. Shouldnt this impact only the first picture "Traditional" rather than all other 5 images. Do advise.
     
    makrant, Nov 30, 2014
    #3
  4. paul.g

    paul.g New Member

    look in css file edit in the code

    .content div ul li a:first-child img
    {
    border:5px ,solid,#color;
    border-radius:2px;
    }

    Hope So it help you ,All the best:)
     
    paul.g, Dec 7, 2014
    #4