patternhtmlMinor

Simple thumbnail gallery

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

gallerysimplethumbnail

Problem

I have built a simple thumbnail gallery using HTML and CSS with the purpose of inserting this into an auction listing. The code seems to work fine, but I know it is sloppy and most definitely improper syntax as I have DIV's inside of SPAN's. I know I am close, but what would the proper implementation be?

HTML

CSS

` .listing-template .listing-content .gallery-container {
height: 600px;
width:420px;
border: 1px solid #D7E3E9;
float:left;
}

.listing-template .listing-content .gallery-container .big-pic-box {
height: 404px;
width:404px;
position:relative;
left:5px;
top:5px;
background-color:#2B596F;
border: 1px solid #D7E3E9;
}

.listing-template .listing-content .gallery-container .default {
position:relative;
left:0px;
top:0px;
border:1px solid #D7E3E9;
opacity: 0.25;
z-index:0;
max-height: 402px;
max-width: 402px;
}

.listing-template .listing-content .gallery-container .thumb-set {
position:relative;
height:150px;
width:404px;
left:5px;
top:30px;
/*background-color:#2B596F;
border: 1px solid #D7E3E9;*/
}

.listing-template .listing-content .gallery-container .thumb-set ul {
list-style:none;
padding:5px;
margin:0;
float:left;
}

.listing-template .listing-content .gallery-container .thumb-set li {
display:inline; width:65px; height:65px; float:left; padding-left:5px;
}

.listing-template .listing-content .gallery-container .thumb-set li a {
display:block; width:55px; height:55px; text-decoration:none; padding:0px; border:1px solid #fff;
}

.listing-template .listing-content .gallery-container .thumb-set li a .small-thumb {
width:53px; height:53px; border:0;
}

.listing-template .listing-content .gallery-container .thum

Solution

First, let me say this is a nice looking storefront and good usage of the Bootstrap CSS libraries. Design is clean. However, as you have pointed out, there are some problems with it. Not sure if you have done this, but an HTML validator is a good way to find smaller and bigger problems with your code.

` inside



All of the lines like this one give the same error:



  
Error: Element div not allowed as child of element span in this context. 
  
  
Contexts in which element div may be used:

  - Where flow content is expected.

  Content model for element span:

  - Phrasing content.

Let's try to break it down into smaller pieces to make it easier (comments mine)


           
     
                  
         
           
                  
                 
                    


So, it works, it looks OK. But it smells. Your

actually doesn't add anything, because your

 already has the same CSS attributes (line breaks added for readability):

.listing-template 
.listing-content 
.gallery-container 
.thumb-set 
li 
a 
span            /* here */
.testing {      /* and here */
  display:block; 
  width:400px; 
  height:400px; 
  text-align:center; 
  display:table-cell; 
  vertical-align:middle;
}


So you can safely remove the div like this:


           
     
                  
           
                 
                    


Or inline like you have it:



Based on your whole page on github...

CSS styles

You have a pretty massive CSS block of boilerplate code within your HTML file. It would make more sense to separate it into a separate CSS file like

doboyo.css

 and then in your header just add:



Then you can get rid of your whole

 section within your HTML, as well as modify CSS for multiple pages at once. 

It's also better for readability to use line breaks between attributes to make it easier to read.

Obsolete HTML styling

This way of formatting images is obsolete:



You should instead use CSS:



Same goes for this table element:



Using CSS (auto margins for centering non-text elements)



Minor things

This div:



Does not have a closing tag

 before the end of your body. 

Your images all appear to have

alt="" which defeats the purpose of alt. Better to use something even slightly relevant, like alt="doboyo item"`.

Code Snippets

<li><a href="#x"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""></div></span></a></li>

<li>
  <a href="#x">         <!-- JavaScript link -->
    <img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""> <!-- small thumbnail -->
      <span>            <!-- Inline phrasing content?? -->
        <div class="testing"> <!-- Flow content?? -->
          <img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""> <!-- Big image that displays when mouse-over the thumbnail -->
        </div>          <!-- end flow content -->
      </span>           <!-- end inline content -->
    </a>                <!-- end JS link -->
</li>

.listing-template 
.listing-content 
.gallery-container 
.thumb-set 
li 
a 
span            /* here */
.testing {      /* and here */
  display:block; 
  width:400px; 
  height:400px; 
  text-align:center; 
  display:table-cell; 
  vertical-align:middle;
}

<li>
  <a href="#x">         <!-- JavaScript link -->
    <img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""> <!-- small thumbnail -->
      <span>            <!-- Inline phrasing content?? -->
          <img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""> <!-- Big image that displays when mouse-over the thumbnail -->
      </span>           <!-- end inline content -->
    </a>                <!-- end JS link -->
</li>

<li><a href="#x"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""><span><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt=""></span></a></li>

Context

StackExchange Code Review Q#79719, answer score: 6

Revisions (0)

No revisions yet.