www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 32

Thread: Making Photos appear side by side AND with links to other pages.

  1. #16
    Join Date
    Nov 2013
    Posts
    18
    Coothead, quick update before heading off for the night - have edited the HTML to include my website's choice of images (plain white just now for placement, will be replacing the filenames with better images soon! Have customised the heights of the row of 2 and the row of 3, and changed the outer container border to black.

    Now, just the margin/padding between the images. I'm guessing "padding:5px;" but have no idea where to put it. Tried it in a couple of places, just kept messing up the formatting!

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Magz Boutique - Glasgow's best shopping secret</title>
    
    <style>
    body {
        background-color:#000;
     }
    #container {
        border:1px solid #000;
     }
    .two {
        height:356px;
     }
     .three {
        height:296px;
     }
    .two {
        margin-bottom:10px;
     }
    .two img {
        float:left;
        width:50%;
        height:100%;
     }
    .three img {
        float:left;
        width:33.33%;
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div class="two">
      <a href="http://www.magzboutique.com/"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop1_zpsc7c1f06e.jpg" alt=""></a>
      <a href="http://www.magzboutique.com/glasgow-local-delivery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop2_zps2fed01cc.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="http://www.magzboutique.com/category/Bags"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm1_zps17c84416.jpg" alt=""></a>
      <a href="http://www.magzboutique.com/category/Jewellery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm2_zpse0342426.jpg" alt=""></a>
      <a href="http://www.magzboutique.com/category/Scarves"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm3_zps8eaae283.jpg" alt=""></a>
    </div>
    
    </div><!-- end #container -->
    <hr color="#000000">
    </body>
    </html>

  2. #17
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there iamdelboy,

    here is an example of borders and margins...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta charset="utf-8">
    
    <title>two then three then two then...</title>
    
    <style>
    body {
        margin:0;
        background-color:#000;
     }
    #container {
        padding:10px 5px;
        border:1px solid #fff;
     }
    .two,.three {
        height:200px;
     }
    .two {
        margin-bottom:10px;
     }
    .two img {
        float:left;
        width:calc(50% - 12px);
        height:100%;
        border:1px solid #fff;
        margin:0 5px;
     }
    .three img {
        float:left;
        width:calc(33.33% - 12px);
        height:100%;
        border:1px solid #fff;
        margin:0 5px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div class="two">
      <a href="#"><img src="blood.jpg" alt=""></a>
      <a href="#"><img src="buddha.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="autumn.jpg" alt=""></a>
      <a href="#"><img src="leaves.png" alt=""></a>
      <a href="#"><img src="col.jpg" alt=""></a>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    For simplicities sake I have given the images the same
    border color, but individual image borders can be coded.

    coothead

  3. #18
    Join Date
    Nov 2013
    Posts
    18
    Thank you so much!

  4. #19
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459

    No problem, you're very welcome.


    coothead

  5. #20
    Join Date
    Nov 2013
    Posts
    18
    Coothead, when I do your options there it makes the images push out of the space and not sit side by side, not sure why its happening?

  6. #21
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there iamdelboy,

    in which browser(s) does this occur?

    coothead

  7. #22
    Join Date
    Nov 2013
    Posts
    18
    To be fair i'm in work using an old version of internet explorer - 6 i think - (they don't trust us with modern browsers!). I could see later when at home (have safari and firefox for mac), do you think its just my work's browser?

  8. #23
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there iamdelboy,

    even Derek Trotter would never use IE6.
    What sort of cheapskate company do you work for?


    coothead

  9. #24
    Join Date
    Nov 2013
    Posts
    18
    Coothead, I work for a billion-pound spanish/uk telecom firm - the periodic table for oxygen - they have systems made 15-20 years ago that still work and see no need to upgrade. we do everything web-based apps from a thin client setup. If it works, they see no point in fixing it. So, ie6 / thin client / outlook 2007.

  10. #25
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there iamdelboy,

    does your billion-pound spanish/uk telecom firm want to
    display two images above three images in this manner...

    I want to display 2 rows of images, top one with 2 images and bottom with 3 images.
    I want the overall areas to be the same.
    So, in the space with 3 photos they will be smaller, in the space with 2 they will be bigger.
    I want them to take up the full width of my page and for each row of images to be equal to each other in height.
    The images must have borders and margins between them.
    If they do, then, I am sorry to say, they will have to use IE9 at least.

    coothead

  11. #26
    Join Date
    Nov 2013
    Posts
    18
    he-he, well testing on my mac - results varied. worked well on firefox, not so well on safari. similar result to old ie6. any ideas how that would be fixed?

  12. #27
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there iamdelboy,

    CSS "calc()" works in Safari6+.

    Source:-

    Unfortunately, as an o.a.p, I do not have the the
    financial resources to own and test code in a "Mac".

    coothead

  13. #28
    Join Date
    Nov 2013
    Posts
    18
    Ah, no worries. Will bugger about with it until it works. Or my brain melts. Probably both.

  14. #29
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    An old fashioned method for an old fashioned browser

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Making Photos appear side by side AND with links to other pages.</title>
    
    		<style type="text/css">
    
    			TABLE {
    				margin-bottom: 5px;
    			}
    			TD {
    				padding-bottom: 0;
    			}
    			TD IMG {
    				width: 100%;
    				height: 200px;
    				vertical-align: top;
    				border: 1px solid #000;
    			}
    
    		</style>
    
    	</head>
    	<body>
    
    		<table style="width: 100%; table-layout: fixed;" border="0" cellspacing="0" cellpadding="5">
    			<tr class="FirstRow">
    				<td colspan="3"><a href="http://www.magzboutique.com/"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop1_zpsc7c1f06e.jpg" alt="" /></a></td>
    				<td colspan="3"><a href="http://www.magzboutique.com/glasgow-local-delivery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop2_zps2fed01cc.jpg" alt="" /></a></td>
    			</tr>
    			<tr>
    				<td colspan="2"><a href="http://www.magzboutique.com/category/Bags"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm1_zps17c84416.jpg" alt="" /></a></td>
    				<td colspan="2"><a href="http://www.magzboutique.com/category/Jewellery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm2_zpse0342426.jpg" alt="" /></a></td>
    				<td colspan="2"><a href="http://www.magzboutique.com/category/Scarves"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm3_zps8eaae283.jpg" alt="" /></a></td>
    			</tr>
    		</table>
    
    	</body>
    </html>
    I used the images from code above, but they don't seem to work?
    JavaScript: Learn | Validate | Compact | bionoid

  15. #30
    Join Date
    Nov 2013
    Posts
    18
    Bionoid - works well, even on old ie6! Thanks so much for this. The images are meant to be plain white just now, theyre just placeholder images. I'm going to do some proper images over the weekend then when I'm happy will launch it up.

    Thanks!
    Del

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles