Thumbnail gallery for a newb

Hi Guys,

I’m a 50 yr old kitchen fitter looking to build a website, I’ve been interested in learning to program for a while & figured a website would be a good place to start, a tangible experience…learn & build at the same time so to speak.
I picked up a sitepoint book ‘Build Your Own Website The Right Way Using HTML & CSS’, a great book & going along nicely.
I have reached a point though where we’ve been adding pictures but not an actual gallery, the book suggests alternative sources for a gallery so my question is; given my experience, or rather the lack of can i build a gallery or am i better off using dedicated gallery creating software & linking when the website is live?.

I tried to implement this within my markup but couldn’t get the ‘overflow:’ to function correctly:

Any advice greatly appreciated.

Daz

1 Like

Welcome to the forums, @Daz1966.

It shouldn’t be too difficult to set up a gallery. There are any number of free scripts or tutorials around. As you’ve already made a try with this one, you could post the code you have (or a link to a live page, if there is one) and let us take a look. Sometimes, the problem can be as simple as a typo. (Running your pages through the HTML validator https://validator.w3.org/ and CSS validator http://jigsaw.w3.org/css-validator/ is always a good move, as it helps to spot such errors.)

1 Like

Hi @TechnoBear & thank you :smile:

Those validators are great tools, thanks for the heads up…unfortunately my HTML is showing 36 errors, mostly ‘Illegal character in path segment: space is not allowed’ and a couple of un-closed element tags.

I’ll clean it up & if I’m still having no joy I’ll let you take a look if that’s OK!

Cheers

1 Like

If you want can post a link to the site you are having a problem with and it will make it easier for us to help debug or advise.:slight_smile:

1 Like

Hi PaulOB,
My pages only exist on my computer at the moment, it says new users cannot upload attachments so presumably i would copy & paste my markup?

cheers

Yes. To format your code so that it displays correctly, you can either highlight it and use the </> button on the editor, or type three back ticks ``` ( top left corner of a UK or US keyboard) on a line above your code, and three more on a line below it.

1 Like

After cleaning up my pages a few bugs disappeared, well impressed with those validator tools. The only problem i feel i have at this stage now is, the more text i add in the paragraphs under each gallery item it pushes the thumbnail below it down the page. Should the overflow: scroll deal with this?

Thanks in advance.

Daz

HTML for my thumbnail test page.

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Fitted Kitchen Specialist </title>
    <meta charset="utf-8" />
    <link href="kitchen1.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header">
        <div id="sitebranding">
            <h1> FittedkitchenSpecialist.com</h1>
        </div>
        <!--end of sitebranding div-->
        <div id="tagline">
            <p> Fitted kitchen specialist in the Nottingham area. </p>
        </div>
        <!--end of tagline div-->
    </div>
    <!--end of header div-->
    <div id="navigation">
        <ul>
            <li><a href="kitchen.html">Home</a></li>
            <li><a href="kitchen%20about.html">About</a></li>
            <li><a href="Kitchen%20gallery.html">Image Gallery</a></li>
            <li><a href="Kitchen%20thumbs.html">Thumbs Gallery</a></li>
            <li><a href="Kitchen%20test.html">Test</a></li>
            <li><a href="kitchen%20contact.html">Contact</a></li>
            <li><a href="Kitchen%20quotes.html">Words On Life</a></li>
        </ul>
    </div>
    <!-- end of navigation div -->
    <div class="container">
        <h2>Welcome to my virtual showroom</h2>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Ebony%20tundra.jpg">"><img src="kitchen%20thumbs/Avant%20Ebony%20tundra%20Small.jpg" alt="High gloss door in Ebony colour."/></a>
            <h3>Avant Ebony</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Ebony%20tundra.jpg">"><img src="kitchen%20thumbs/Avant%20Ebony%20tundra%20Small.jpg" alt="High gloss door in Ebony colour."/></a>
            <h3>Avant Ebony</h3>
            <p>High gloss vinyl 18mm MDF..</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <div class="galleryItem">
            <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
        </div>
        <!--end of gallery item div-->
    </div>
    <!--end of container div-->
</body>

</html>

CSS:

body {
            font-family: Verdana, Helvetica, Arial, sans-serif;
            background-color: #E4EEFF;
            line-height: 125%;
            padding: 0;
            border: 0;
        }
        
        h1,
        h2,
        h3 {
            font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
        }
        
        h1 {
            font-size: x-large;
            background-color: #6d92d8;
            color: white;
            font-weight: bold;
            padding-top: 2em;
            padding-bottom: .9em;
            padding-left: .4em;
            margin: 0;
            background: #6d92d8 url(backgrounds/worktop-small.jpg) repeat-y right;
        }
        
        h2 {
            color: navy;
            font-size: 130%;
            font-weight: normal;
            padding-top: 15px;
        }
        
        li {
            font-size: small;
            list-style-type: square;
        }
        /* circle, disc, square and none options,
     read CSS anthology by Rachael Andrew for more detail on button styling*/
        
        p {
            font-size: small;
            color: navy;
        }
        /* Hashtag denotes an ID */
        
        #tagline P {
            font-style: italic;
            font-family: Georgia, Times, serif;
            background-color: #bed8f3;
            border-top: 3px solid #7da5d8;
            border-bottom: 3px solid #7da5d8;
            padding-top: .2em;
            padding-bottom: .4em;
            padding-left: .8em;
            margin: 0;
            background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
        }
        
        #navigation {
            width: 180px;
            height: 484px;
            background: #7da5d8 url(backgrounds/drawer2.jpg) no-repeat;
            /*must use backgrounds as source folder*/
            background-color: #bed8f3;
            color: #6d92d8;
            /* colours bullet points only as visited/hover/active are controlled lower down*/
        }
        
        #header {
            border-top: 3px solid #7da5d8;
        }
        
        em {
            text-transform: uppercase;
        }
        
        a {
            font-weight: bolder;
            color: black;
        }
        
        a:link {
            color: orange;
            /* colours email address  only*/
        }
        
        a:visited {
            color: white;
        }
        
        a:hover {
            text-decoration: none;
            color: white;
            background-color: navy;
        }
        
        a:active {
            color: green;
            background-color: navy;
        }
        
        .fun {
            color: #339999;
            font-family: Georgia, Times, serif;
            letter-spacing: 0.05em;
        }
        
        .fun p {
            color: green;
        }
        
        cite {
            color: navy;
            font-weight: bold;
        }
        
        h2,
        ul {
            margin-top: 15px;
        }
        /*This section deals with the position of items on the screen.
         It uses absolute positioning - fixed x and y coordinates measured
         from the top-left corner of the browser's content display.*/
        
        #navigation,
        #bodycontent,
        #header {
            position: absolute;
        }
        
        #navigation,
        #bodycontent {
            top: 115px;
            /* 104% will show border across top of navigation box 101% will merge*/
        }
        
        #bodycontent {
            left: 200px;
        }
        
        #header,
        #tagline {
            width: 100%;
        }
        /*#navigation {
         position: relative;
          left: 1300px;
         }
         An example of how to move navigation across to right*/
        
        .feature {
            float: right;
            margin: 10px;
        }
        
        .galleryphoto img {
            border: 15px solid white;
        }
        
        .galleryphoto p {
            font-size: 65%;
            font-weight: bold;
            margin-top: 0;
            width: 430px;
            line-height: 1.4em;
        }
        
        .galleryphoto p span {
            font-weight: normal;
            color: gray;
        }
        /*Alternative to the above
.photocredit {
    font-weight: normal;
    color: gray;
}*/
        
        .galleryphoto {
            padding-bottom: 10px;
            border-bottom: 1px solid navy;
            margin-bottom: 10px;
        }
        /* test for thumbnails gallery*/
        
        .container {
            position: absolute;
            width: 80%;
            margin: 150px;
            overflow: auto;
            float: right;
        }
        
        .container {
            left: 80px;
        }
        
        .galleryItem {
            color: grey;
            font: 10px/1.5 Verdana, Helvetica, sans-serif;
            float: left;
            width: 16%;
            margin: 2% 2% 50px 2%;
        }
        
        .galleryItem h3 {
            text-transform: uppercase;
            text-align: center;
        }
        
        .galleryItem img {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            max-width: 100%;
        }
        
        .galleryItem p {
            text-align: left;
        }
        /*.galleryItem 
    border: 5px solid white;
    */
        /* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p {font-size: 18px;}
}

Spaces are best replaced with hyphens for numerous reasons which I forget and no doubt some knowledgeable poster can enlighten me with the reasons. I am surprised the validation did not show errors or warnings,

2 Likes

Thanks for the reply john_Betong,
Originally i wasn’t aware you couldn’t have spaces in a link, the validation picked it up but the %20 was all i could find on google, the validator showed no errors or warnings…hyphens would make it easier to read i suppose!

Cheers

1 Like

There are also unnecessary characters in your image links:

 <a href="kitchen%20thumbs/Avant%20Alabaster.jpg">
   ">
    <img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/>
</a>

Try this:

<a href="kitchen-thumbs/Avant-Alabaster.jpg">
   <img 
         src="kitchen-thumbs/Avant-Alabaster-Small.jpg" 
        alt="High gloss door in Alabaster colour." />
</a>

No doubt you will be hosting your site on an Apache Server which unlike Windows is case-sensitive. Apache will refuse point-blank to display any images, links, etc which do not match exactly.

I tried your web-page locally and made some adjustments which was not easy because of your use of position:absolute;. It is far easier to let the page flow naturally especially when trying to make the page conform to

Google’s Mobile Friendly Test

Is your site Online?

Thanks for the tips, I’ll make some changes later after work & let you know. Site is not online.

1 Like

Hello again,
Things are looking a lot tidier, thanks for all my tips so far :wink:

The problem i am having is highlighted in the snip I’ve uploaded, am i correct in thinking the ‘overflow’ property should stop this from happening or am i barking up the wrong tree?

Wrong tree.

The gallery items appear to be floated. The left item in row two is being stopped by the bottom of the left item in the top row. The item on the third row has wrapped from the right end of row 2. That’s how floats behave. Try using inline-block instead of floats.

2 Likes

On it, thanks…may be a while.

I have an inline-block example here.

It gives a neater grid than using floats.

2 Likes

Thanks @SamA74,
Having a play & I’ll let you guys know how it works out.

1 Like

Hi all,

This works a treat, looks better…it just works, i can go ahead & build my gallery properly. I can see also the possibilities from SamA74’s example above, exciting stuff.
Thanks for everyone’s input, really grateful…next chapter is tables.:slight_smile:

Daz

<div class="floating-box">
            <a href="kitchen-thumbs/Avant-Alabaster.jpg"><img src="kitchen-thumbs/Avant-Alabaster-Small.jpg" alt="High gloss door in Alabaster colour." /></a>
            <h3>Avant Alabaster</h3>
            <p>High gloss vinyl 18mm MDF.</p>
  </div>

.floating-box {
        display: inline-block;
        width: 175px;
        height: 105px;
        margin: 10px;
        border: 3px solid #7da5d8;
    }
    
    .floating-box h3 {
        text-align: center;
    }
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.