www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 32

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

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    18

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

    Hi folks. I'm trying to make this home page - http://magzboutique.bigcaretel.com - look a bit more like http://growler.bigcaretel.com, specifically the two rows of images with photos side by side.

    As you can guess, I'm quite new to this, its my wife's fledgling business and the e-commerce host doesn't give much support for customisation of the basic templates. However, the alternative site example shows it can be done!.

    Anyways, I've been reading up as much as I can. What I want is two rows of images, with the images fitting in size-wise. One row of 2 images, and a lower row of 3 images (with maybe a further row of 3). The images in the bottom 1/or 2 rows should link to other parts of the site. Think "shop bags" / "shop jewellery" etc.

    So far I've had two conflicting html ideas, neither of which seem to work:

    Idea 1:
    Code:
    <div style="width:410px; height:105px; border:1px black; padding:5px;">
    
    <img alt="this is image #1" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    <img alt="this is image #2" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    <img alt="this is image #3" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    <img alt="this is image #4" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    <img alt="this is image #5" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    <img alt="this is image #6" src="#" style="width:100px; height:100px; border:1px black; float:left;" />
    
    </div>
    Idea 2:

    Code:
    <div>
    <center>
      
    <a href="http://www.cavitycolors.com/blog" title="News updates on current releases, shows, and more fun stuff!"><img src="http://farm8.staticflickr.com/7454/10748613415_ca435c2df2_o.png" width="190" height="144" alt=""></a>
    <a href="http://www.cavitycolors.com/category/clothing" title="Shirts, Tanktops, Hoodies, and more!"><img src="http://farm6.staticflickr.com/5488/10748503165_8dbf8f0d60_o.png" width="211" height="144" alt=""></a>
    <a href="http://www.cavitycolors.com/category/prints" title="Large and Small Giclee Prints!"><img src="http://farm6.staticflickr.com/5541/10748571766_12c663c2ab_o.png" width="211" height="144" alt=""></a>
    <a href="http://www.cavitycolors.com/category/originals" title="Original Drawings, Paintings, and Sketches for sale!"><img src="http://farm4.staticflickr.com/3782/10748503075_4eaf311962_o.png" width="211" height="144" alt=""></a>  
    <a href="http://www.cavitycolors.com/category/accessories" title="Stickers, Buttons, Toys, Books, and more!"><img src="http://farm8.staticflickr.com/7315/10748571926_4eaf311962_o.png" width="211" height="144" alt=""></a>
     
     
    <br>
    <br>
    </div>
    Naturally, I'm borrowing ideas from other places, and while one seems to have the links code it doesnt seem to have images sitting side by side. The top one does, but doesn't seem to have any linking anywhere.

    Any ideas?
    Thanks
    Delboy

  2. #2
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    165
    idea 1 doesn't have any hyperlinks; idea 2 does. Place a div around the first two pics and then another div around the last three pics. Use a css display: block to keep the the two sets of pics apart from one another.

  3. #3
    Join Date
    Nov 2013
    Posts
    18
    I literally have no idea how to use CSS. Is there another way just involving html?

  4. #4
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    165
    I used CodePen so you can see the code and how it looks. http://codepen.io/kralcx/pen/FqGJj

    Call your external stylesheet default.css
    then placed this code

    <head>
    <link rel="stylesheet" type="text/css" href="default.css">
    </head>

    in your html and you're done

  5. #5
    Join Date
    Nov 2013
    Posts
    18
    Hi there, thanks for this

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

    you asked this question four days here....


    ...and were also given the solution.

    coothead

  7. #7
    Join Date
    Nov 2013
    Posts
    18
    @coothead, sorry had no idea it had posted there, seemed to have gone astray

    @kralcx - I really appreciate your advice, thank you so much - the html is absolutely perfect, but for some reason the css isn't working. that said, it might be me. I didn't have any idea where in the CSS it should go, so I guessed. And my guess didn't seem to work. I codepen'd the css code from my shop's host in hope that you'd know better than me where it should go? http://codepen.io/iamdelboy/pen/insFE

  8. #8
    Join Date
    Nov 2013
    Posts
    18
    Quick update - so I made the css file, called it 'home' as i realised i'd need another css file later for something else and didnt want to get confused, and then saved it to a folder on my webspace.
    Code:
    #toprow, #bottomrow {
      text-align:center;
      display:block;
      margin-top:10px;
    }
    I then edited the HTML code kralcx gave me

    Code:
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="http://www.magzboutique.com/css/home.css" />
    </head>
    
    <div id="toprow">
      
    <a href="http://www.magzboutique.com" title="Magz Boutique"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop1_zpsc7c1f06e.jpg" 
    
    width="396" height="356" alt=""></a>
    <a href="http://www.magzboutique.com/products" title="Shop"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop2_zps2fed01cc.jpg" 
    
    width="594" height="356" alt=""></a>
    </div><!-- #toprow -->
    
    <hr>
    
    <div id="bottomrow">
      
      <a href="http://www.magzboutique.com/category/Bags" title="Shop Bags!"><img 
    
    src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm1_zps17c84416.jpg" width="324" height="296" alt=""></a>
    <a href="http://www.magzboutique.com/category/purses" title="Shop Purses!"><img 
    
    src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm2_zpse0342426.jpg" width="324" height="296" alt=""></a>  
    <a href="http://www.magzboutique.com/category/jewellery" title="Shop Jewellery!"><img 
    
    src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm3_zps8eaae283.jpg" width="324" height="296" alt=""></a>
      
    </div><!-- #bottomrow -->
      
    <br>
    <br>
    <hr>
    Posted the html onto my e-commerce provider's template editing section and then.....nothing. The HTML code takes over and white images (cos I've not created proper ones yet) are showing, but not side by side. Its like its completely ignoring the CSS code. Any ideas where I'm going wrong as I really thought I'd cracked it this time!!?!

  9. #9
    Join Date
    Nov 2013
    Posts
    18
    Ok, update 2. I thought it might be that my .com address has a redirect to my e-commerce provider. I spoke to my webhost and they moved the file to a subdomain. Changed the HTML to the subdomain's link (which works in a normal browser) and still nothing!. Could it be that my e-commerce provider's templating system is ignoring the custom CSS? Or have I done something incorrect?

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

    why are you still messing around with this.

    I gave you the solution at another forum.

    I will post the extremely simple code from that forum here...
    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 {
        background-color:#000;
     }
    #container {
        border:1px solid #fff;
     }
    .two,.three {
        height:200px;
     }
    .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="#"><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 class="two">
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
      <a href="#"><img src="leaves.png" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="leaves.png" alt=""></a>
      <a href="#"><img src="col.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="blood.jpg" alt=""></a>
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="autumn.jpg" alt=""></a>
      <a href="#"><img src="leaves.png" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
      <a href="#"><img src="buddha.jpg" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="leaves.png" alt=""></a>
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    Job done.


    coothead

  11. #11
    Join Date
    Nov 2013
    Posts
    18
    Quote Originally Posted by coothead View Post
    Hi there iamdelboy,

    why are you still messing around with this.

    I gave you the solution at another forum.

    I will post the extremely simple code from that forum here...
    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 {
        background-color:#000;
     }
    #container {
        border:1px solid #fff;
     }
    .two,.three {
        height:200px;
     }
    .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="#"><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 class="two">
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
      <a href="#"><img src="leaves.png" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="leaves.png" alt=""></a>
      <a href="#"><img src="col.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="blood.jpg" alt=""></a>
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="autumn.jpg" alt=""></a>
      <a href="#"><img src="leaves.png" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
      <a href="#"><img src="buddha.jpg" alt=""></a>
    </div>
    
    <div class="two">
      <a href="#"><img src="buddha.jpg" alt=""></a>
      <a href="#"><img src="autumn.jpg" alt=""></a>
    </div>
    <div class="three">
      <a href="#"><img src="leaves.png" alt=""></a>
      <a href="#"><img src="col.jpg" alt=""></a>
      <a href="#"><img src="blood.jpg" alt=""></a>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    Job done.


    coothead
    Coothead, top man! Ok, a little too many two,threes etc. But I took out the ones that I didn't need. Quick Question, how do I put a little distance between #two and #three? I'm not sure because of the container, would I then have to have 2 containers, almost identical and then a <ul> in between?

  12. #12
    Join Date
    Nov 2013
    Posts
    18
    Hi coothead, thanks for the advice. Reason i was going with the other code is it was almost working perfectly apart from the placement. Again, really new to all of this stuff and learning as i go! I'l give it a bash and see what happens

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

    see my next post.

    coothead
    Last edited by coothead; 11-27-2013 at 05:04 PM.

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

    tryit like this...
    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 {
        background-color:#000;
     }
    #container {
        border:1px solid #fff;
     }
    .two,.three {
        height:200px;
     }
    .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="#"><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>
    coothead

  15. #15
    Join Date
    Nov 2013
    Posts
    18
    coothead, thankyou! Feel like its getting somewhere!

    So, I guess changing the border of the container from #fff to #000 would make the outside border black? And is there a code to put maybe 1-2px between the 2 and 3 images, just to space them out?

    Finally (for now, you're probably sick of me asking q's..) is there a good/free online resource for learning this stuff and how was it accomplished without a seperate css? i'd like to learn this stuff to enable me to make bigger and better changes in time...next step after this is a better header/footer (my e-commerce company seperates code and the header/footer appears in a section called 'layout'.

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