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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to flexibly align 8 images?

    I have 8 images that I want to line up so the positioning flexes with the width of the page. When one line of the images fills a new line should start until all the images appear. Further, all images on each line are to be centered within that line.

    This is where they appear now. The Silver Peddler & Gift Accessories Home page If you reduce the width of the page the 8 images stack up badly leaving an image hanging to the right.

    Since the code on that page is very hard to read (Magento site), I also put just that same code for the images alone on this page. Untitled Document

    Any advice?

    Thank you.

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Your code works if you make all the images the same size. I just changed the sizes in the html to 150 height and width, which gives you some distortion but if you take the trouble to just add white space around some of the of the images and scale up or down the others you should get a more pleasing effect.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    swbouton (06-14-2014)

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Perfect! Thank you very much.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    How to flexibly align 8 images?-thesilverped.jpg

    Check the above attached image. Will this solve your problem?
    Own a Professional Website with stylish look at just 895$ Only! Visit: http://www.sanctify.in/

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Edited codes are as follows:

    <div style="width: 92%; margin-left: auto; margin-right: auto; margin-bottom: 6.5cm" id="hotlinks">
    <div style="float: left; margin: 15px;" id="stationery"><a href="http://thesilverpeddler.com/index.php/buy-online/stationery-gifts.html"> <img title="Stationer &amp; Gifts" src="/media/custom/frontpage/fp_stationery.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="handbags"><a href="http://thesilverpeddler.com/index.php/buy-online/handbags-apparel.html"> <img title="Handbags &amp; Apparel" src="/media/custom/frontpage/fp_handbags.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="pewter"><a href="http://thesilverpeddler.com/index.php/buy-online/home-decor-pewter.html"> <img title="Home Decor &amp; Pewter" src="/media/custom/frontpage/fp_pewter.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="sterling"><a href="http://thesilverpeddler.com/index.php/buy-online/sterling-silver-jewelry.html"> <img title="Sterling Silver Jewelry" src="/media/custom/frontpage/fp_silver.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="byers"><a href="http://thesilverpeddler.com/index.php/buy-online/byers-choice-carolers.html"> <img title="Byers' Choice Carolers" src="/media/custom/frontpage/fp_byerschoice.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="sunhats"><a href="http://thesilverpeddler.com/index.php/buy-online/childrens-sun-hats.html"> <img title="Children's Sun Hats" src="/media/custom/frontpage/fp_sunhats.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="pillows"><a href="http://thesilverpeddler.com/index.php/buy-online/pillows-throws-rugs.html"> <img title="Pillows, Throws and Rugs" src="/media/custom/frontpage/fp_pillows.png" alt="" height="120" width="120"> </a></div>
    <div style="float: left; margin: 15px;" id="bathbody"><a href="http://thesilverpeddler.com/index.php/buy-online/bhi-bath-body.html"> <img title="BHI Bath and Body" src="/media/custom/frontpage/fp_bathbody.png" alt="" height="130" width="130"> </a></div>

    Quote Originally Posted by punitsahay View Post
    Click image for larger version. 

Name:	thesilverped.jpg 
Views:	11 
Size:	50.4 KB 
ID:	12916

    Check the above attached image. Will this solve your problem?
    Own a Professional Website with stylish look at just 895$ Only! Visit: http://www.sanctify.in/

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Note: last image is small (i.e; fp_bathbody.png). So to adjust the look, I have used different height & width (i.e; 130/130px)
    Own a Professional Website with stylish look at just 895$ Only! Visit: http://www.sanctify.in/


  •  

    Tags for this Thread

    Posting Permissions

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