Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post

    Getting image icons on same line

    Hi, I am trying to get a load of small images and icons inline. At this moment in time, they are more spread over 2 lines. There is room to fit them all in if padding is removed, but I am not sure how to get this done. The html is
    Code:
    <div id="icons">
      		<img src="http://www.test.com/wp-content/themes/reponsive/images/specLogos.png" />
            Share
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social1.png" />
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social2.png" />
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social3.png" />
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social4.png" />
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social5.png" />
            <img src="http://www.test.com/wp-content/themes/reponsive/images/social6.png" />
            All major cards accepted
            <img src="http://www.test.com/wp-content/themes/reponsive/images/cards.png" />
         </div>
    The css for this div is not much at the moment
    Code:
    #icons{
    	margin:0px;
    }
    I was hoping it would just flow, which it has, but it goes onto a second line. I also tried having everything in a list, but this didnt work either. Any advise appreciated.

    Nick

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try something like

    Code:
    #icons img { margin:0; padding:0; float:left; }

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    MI
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    #icons {
            position:absolute;
            left:XXX;
            top:XXX;
            margin:0;
            width:XXX;
            height:XXX;
            float: left;
        }
    Could use absolute positioning.

  • Users who have thanked bundled for this post:

    nick2price (06-12-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •