Results 1 to 9 of 9

Thread: responsive image grid?

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    659
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Question responsive image grid?

    I setup a grid design for a page that will get more photos eventually. http://ahepa215.org/photo-grid.html

    The design is responsive but the images on that page are not. How can I change this to make them responsive?
    thanks

    HTML
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="language" content="english">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
    <META NAME="description" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION Chapter 215. The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order. We are a part of the District Lodge 9 that encompasses the Maine, New Hampshire and Vermont AHEPA chapters.">
      <META NAME="keywords" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION, Chapter 215, Portsmouth NH, Portsmouth, NH, Maine, ME, New Hamptshire, Vermonth, VT, EVENTS, NEWS, PROGRAMS, ISSUES, EDUCATIONAL FOUNDATION, CONTACTS">
    <title>AHEPA 215 Portsmouth, NH</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
    <LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <!-- Start css3menu.com HEAD section -->
    	<link rel="stylesheet" href="ahepa_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
    	<!-- End css3menu.com HEAD section -->
    <style type="text/css">
    audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
    #pauseplay {float: right; width: 32px; height: 32px; overflow: hidden; cursor: pointer}
    </style>
    </head>
    <body>
    <div id="container">
    <img id="logo" src="images/Ahepa215-banner.jpg" alt="AHEPA 215 logo">
    <!-- Start css3menu.com BODY section -->
    <ul id="css3menu1" class="topmenu">
    <input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>	<li class="topfirst"><a href="index.html" title="Home" style="height:25px;line-height:25px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNklEQVRIie3TIU4DURSF4QpkBQKSOhCVLKAOVAOqmyAoGpYwBk/CBpBIXCtI2EQJoiQgkNi6JnyI3qGPR2k6MAQEJ7nJ5J17/5N5c6fRqCA00awyUwXexiiqXTf8ELfmusVhHeBNnGLioybhbX4V3sJ1Bn2MSnWNVlV4B08ZaIiNqGHmPaGzKvwY0wxQYK3congusp4pjpeBm7jMhp6xH/6O+RbtxNl+9KS6lK8yuhhkjVfYDb+PceKN0Q9vL3pTDdAt4Ue4S8wXnGHLbPfPfa7z6NmOmZfEu8NRIxt4wEkEHyx4q0Ua4CBmToLxpjTgBr3kSu5XgJe6N7+yXrDeBQyxbvahLyqAc10EYz2YGiiSjz36BrzUKOG9scuDWrTsX/i1gOKTqiegrv7/gL8RUCyquvp/RK9oMw1GwfTPzgAAAABJRU5ErkJggg==" alt=""/>&nbsp</a></li>
    	<li class="topmenu"><a href="#" style="height:25px;line-height:25px;"><span>About</span></a>
    	<ul>
    		<li><a href="chapter215.html" title="Chapter 215"><span>Chapter 215</span></a>
    		<ul>
    			<li><a href="brothers.html" title="Brothers">Brothers</a></li>
    		</ul></li>
    		<li><a href="ahepa.html" title="AHEPA">AHEPA</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="scholarships.html" title="Scholarships" style="height:25px;line-height:25px;">Scholarships</a></li>
    	<li class="topmenu"><a href="photo.html" title="Rates" style="height:25px;line-height:25px;">Photos</a></li>
    	<li class="topmenu"><a href="join.html" title="Join" style="height:25px;line-height:25px;">Join</a></li>
    	<li class="topmenu"><a href="calendar.html" title="Calendar" style="height:25px;line-height:25px;">Calendar</a></li>
    	<li class="toplast"><a href="contact.html" title="Contact" style="height:25px;line-height:25px;">Contact</a></li>
    </ul>
    <!-- End css3menu.com BODY section -->
    <div id="content">
    <h1>Photos</h1>
      <div id="ctr-img">  
        <img src="images/leadership-sm.jpg" alt="leadership conference" />  
        <img src="images/MSD-sm.jpg" alt="Market Square Day" />
     </div>
    <p>Click the above images to see a slideshow with more images from the above events.</p>
    <div style="clear:both;"></div>
    </div></div></div></div>
    <div id="footer">Copyright  AHEPA 215 &nbsp;&nbsp; <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></div>
    </body></html>

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    659
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Default

    the css part in question is id="ctr-img"

    Code:
    body {
    
        margin:0;
    
        background-image:url(images/greekkey.gif);
    
        font-family:'Open Sans',sans-serif;
    
        font-size:100%;
    
        color:#036;
    
     }
    
    ul {
    
        padding:0;
    
        margin:0;
    
        list-style-type:none;
    
     }
    
    a {
    
        text-decoration:none;
    
     }
    
    #container {
    
        width:90%;
    
        margin:auto;
    
        background-color:#fff;    
    
     }
    
    #logo {
    
        display:block;
    
        width:100%;
    
     }
    
    
    
    #content {
    
        clear:both;
    
        position:relative;
    
        padding:1.5em 5%;
    
     }
    
    #ctr-img {
    
        display:block;
    
        width:100%;
    
        text-align:center;
    
    }
    
    .arrow-down {
    
    	width: 0; 
    
    	height: 0; 
    
    	border-left: 20px solid transparent;
    
    	border-right: 20px solid transparent;
    
    	
    
    	border-top: 20px solid #000;
    
    }
    
    h2 {
    
        clear:both;
    
        text-align:center;
    
     }
    
    audio {
    
        visibility:hidden; 
    
        height:0; 
    
        width:0;
    
     }
    
    #pauseplay {
    
        float:right; 
    
        width:32px; 
    
        height:32px; 
    
        cursor:pointer;
    
     }
    
    @media screen and (max-width:920px) {
    
    body {
    
        font-size:90%;
    
     }
    
    #nav li {
    
        height:90%;
    
     }
    
    }
    
    @media screen and (max-width:820px) {
    
    body {
    
        font-size:80%;
    
     }
    
    #nav li {
    
        height:80%;
    
     }
    
    }
    
    @media screen and (max-width:740px) {
    
    body {
    
        font-size:70%;
    
     }
    
    #nav li{
    
        height:70%;
    
     }
    
    }
    
    @media screen and (max-width:660px) {
    
    body {
    
        font-size:60%;
    
     }
    
    #nav li {
    
        height:60%;
    
     }
    
    }
    
    @media screen and (max-width:570px) {
    
    #nav ul {
    
        position:static;
    
        border:0;
    
        box-shadow:none;
    
     }
    
    #nav li {
    
        float:none;
    
        width:100%;
    
     }
    
    #nav a,#nav ul a{
    
        text-align:left;
    
        padding:0 0 0 1em;
    
     }
    
    }
    
    
    
    .innerBox {
    
      background-color : #ffffff;
    
      background-repeat : repeat-y;
    
      padding-top: 1em;
    
      padding-left: 1em;
    
      padding-right: 1em;
    
      padding-bottom : 1em;
    
    }
    
    #img-ctr {
    
        text-align: center;
    
    }
    
    #left {
    
        float: left;
    
        width: 32%;
    
        padding:5px;
    
    }
    
    
    
    #middle { 
    
        float: left;
    
        width: 32%;
    
        padding:5px;
    
    }
    
    
    
    #right {
    
        float:left;
    
        width:32%;
    
        padding:5px;
    
    }
    
    
    
    .columns {
    
        width:100%;
    
    }
    
    .left{
    
        float:left;
    
        width:45%;    
    
     }
    
    .right {
    
        margin-left:45%;
    
     }
    
    .clear {
    
        clear:both;
    
     }
    
    .google-maps {
    
        position: relative;
    
        padding-bottom: 75%; // This is the aspect ratio
    
        height: 0;
    
        overflow: hidden;
    
    }
    
    .google-maps iframe {
    
        position: absolute;
    
        top: 0;
    
        left: 0;
    
        width: 100% !important;
    
        height: 100% !important;
    
    }
    
    #map {
    
        height: 100%;
    
     }
    
    #brothers {
    
        margin:auto;
    
        text-align:center;
    
    }
    
    #social {
    
        margin:auto;
    
        text-align:center;
    
    }
    
    
    
    #footer {
    
        background:#7DA3E4;
    
        width:90%;
    
        margin:auto;
    
        text-align:center;
    
        font-family:sans-serif;
    
        font-size:80%;
    
        color:#fff;
    
        padding:0.5em 0;
    
     }
    
    #footer a {
    
        color:#fff;
    
     }
    
    /* Smartphones (portrait and landscape) ----------- */
    
    @media only screen 
    
    and (min-device-width : 320px) 
    
    and (max-device-width : 480px) {
    
    /* Styles */
    
    }
    
    
    
    /* Smartphones (landscape) ----------- */
    
    @media only screen 
    
    and (min-width : 321px) {
    
    /* Styles */
    
    }
    
    
    
    /* Smartphones (portrait) ----------- */
    
    @media only screen 
    
    and (max-width : 320px) {
    
    /* Styles */
    
    }
    
    
    
    /* iPads (portrait and landscape) ----------- */
    
    @media only screen 
    
    and (min-device-width : 768px) 
    
    and (max-device-width : 1024px) {
    
    /* Styles */
    
    }
    
    
    
    /* iPads (landscape) ----------- */
    
    @media only screen 
    
    and (min-device-width : 768px) 
    
    and (max-device-width : 1024px) 
    
    and (orientation : landscape) {
    
    /* Styles */
    
    }
    
    
    
    /* iPads (portrait) ----------- */
    
    @media only screen 
    
    and (min-device-width : 768px) 
    
    and (max-device-width : 1024px) 
    
    and (orientation : portrait) {
    
    /* Styles */
    
    }
    
    
    
    /* Desktops and laptops ----------- */
    
    @media only screen 
    
    and (min-width : 1224px) {
    
    /* Styles */
    
    }
    
    
    
    /* Large screens ----------- */
    
    @media only screen 
    
    and (min-width : 1824px) {
    
    /* Styles */
    
    }
    
    
    
    /* iPhone 4 ----------- */
    
    @media
    
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    
    only screen and (min-device-pixel-ratio : 1.5) {
    
    /* Styles */
    
    }

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (09-23-2014)

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    659
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Default

    Thanks Beverly. I used the 1st option. Now, how can I get the margin space to the left, in between the images and to the right to be equal?

    oop, the new page is here http://ahepa215.org/photos.html

    the css is here http://ahepa215.org/styles.css

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'm on mobile at the moment but the easiest way to get the margins the same is to set an equal value on each of the 4 sides - if you want the distance to be 10px between, set it to 5px so that when 2 images are sat up against each other, the combined margin between each image will total 10px.

    This will give you a 5px margin on the outermost images in the grid, which might be acceptable to you, but if not, you can put the images inside a container div and put a (-5px) negative margin on it. This has the effect of making the container div 5px bigger in all directions so that it can accommodate the extra 5px margin of the outermost images, allowing the right and left edges of the actual images to sit flush with the rest of your content.

    Hope that makes sense.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'm at a desk now so I've knocked together a demo http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

    (It's using method 2 from my 3 fave go-to responsive image techniques: http://www.dynamicdrive.com/forums/e...ponsive-Design)

    Reduce the browser window;

    - the wider the screen, the more images appear in a row
    - images scale fluidly within width boundaries (i.e. media query breakpoints)

    There are calculations in the CSS that make the images evenly occupy a full row; All measures are in percentages so for a perfect result, the combined image widths (of all the images on a row), plus their left and right margins, need to equal 100. Here's the calculation for that;
    width = (100 / images per row) - ( margin x 2 )

    This demo uses squares, but you can easily use rectangles by changing the padding-bottom:100%; value;
    75% = 4:3 aspect ratio
    56.25% = 16:9 aspect ratio

    Hope it helps
    Last edited by Beverleyh; 09-24-2014 at 10:33 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (09-24-2014)

  9. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    If you're anything like me, you probably hate calculations, right? (you spend hours working something out only to forget it again when you next change your layout)

    So, to be kind to our brains, I've just added a simple calculator to the bottom of the demo page
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,820
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Can't we obtain the same thing by just doing something like this:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>&nbsp;</title>
    <style>
    .test_div {position: relative; float: left; width: 15%; min-width: 100px; margin: 15px; }
    .test_img {width: 100%; }
    </style>
    </head>
    <body>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <div class="test_div" >
    <img alt=""  class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
    </div>
    
    <!-- etc. -->
    
    </body>
    </html>
    I know the collection is not centered, but everything scales well.

  11. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Yes, it's an option, but I think I prefer the completely fluid scaling effect more;

    Arie's demo: http://fofwebdesign.co.uk/template/_...g/grid-img.htm

    Beverley's demo: http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

    I think it just comes down to the degree of predictability you want over the final look in an unknown environment ("unknown environment" referring to the plethora of browser/screen widths rather than website layout)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Resolved Multizoom - Image sizing in responsive design
    By ozinder in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-14-2014, 01:14 PM
  2. Centered, wrapping grid - help
    By jimctierney in forum CSS
    Replies: 0
    Last Post: 08-05-2011, 02:46 PM
  3. dynamic grid | collapse
    By ggalan in forum CSS
    Replies: 0
    Last Post: 12-21-2010, 09:13 PM
  4. Flash Data Grid Help
    By Rockonmetal in forum Flash
    Replies: 1
    Last Post: 02-18-2008, 06:13 PM
  5. AJAX Grid like EBA Grid V3?
    By EZboy in forum JavaScript
    Replies: 4
    Last Post: 08-22-2006, 03:49 PM

Bookmarks

Posting Permissions

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