Simple thumbnail gallery

Question

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

<div class="listing-content">
    <div class="container"> 
        <div class="gallery-container">
            <div class="big-pic-box">
                <img class="default" src="http://placehold.it/400" alt="" />
            </div>
            <div class="thumb-set">
                <ul >
                    <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"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""></div></span></a></li>
                    <li><a href="#x"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""></div></span></a></li>
                </ul>
            </div>
        </div>

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 .thumb-set li a .big-pic {
    max-height: 400px;
    max-width: 400px;

}

.listing-template .listing-content .gallery-container .thumb-set li a:hover,
.listing-template .listing-content .gallery-container .thumb-set li a:active,
.listing-template .listing-content .gallery-container .thumb-set li a:focus {
    white-space:normal; 
    border-color:#2B596F; 
    outline:0;
}

.listing-template .listing-content .gallery-container .thumb-set li a span {
    position:absolute; left:-9999px; display:block; width:400px; height:400px; background:#2B596F; 
}

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

.listing-template .listing-content .gallery-container .thumb-set li a:hover span {
    position:absolute; left:2px; top:-427px; z-index:100;
}

.listing-template .listing-content .gallery-container .thumb-set li a:active span,
.listing-template .listing-content .gallery-container .thumb-set li a:focus span {
    position:absolute; left:2px; top:-427px; 
}

The entire file can be found in my Github here.

JS Fiddle

Your fiddle and the code you've posted here result in very different things. I'm voting to close as stub code as you've severely restricted the review by trimming down the code this way. — RubberDuck, Commented Feb 5, 2015 at 21:36
Sorry for any confusion @RubberDuck . I read in the help section to include the "relevant snippets" and "most important parts of the code" in the question, which is why I attempted (poorly I see now) to just extract the relevant thumb gallery that my overarching question was about from the full page. I see now, I should have just posted the full file. What is best practice? Should I revise the post with full code (help file says to leave intact)? or just take my lumps and chalk it up to learning? — Christopher Pearson, Commented Feb 6, 2015 at 1:23
Well, you've received answers and its best not to invalidate them by adding it now. I perhaps over reacted to the situation as well. It is okay to post just parts (but still functioning) of your code. If it was me, I might have posted the whole thing, but then quoted excerpts of it to highlight your concerns and areas you wanted focused on. It was just shocking to see such a great looking fiddle and not being able to reproduce those results with what you posted here. — RubberDuck, Commented Feb 6, 2015 at 1:49

Malachi · Accepted Answer · 2015-02-06 14:25:24Z

TL;DR;

To Answer the Question Check out this JSFiddle Without <div class="testing"> I removed them from inside the span elements and the only thing that changed, was the alignment of the big pictures, so small of a difference I didn't notice until just now.

It also changes the way the posted code looks.

Simple answer ▼▼▼▼:

Swap the span for a div and the div for a span, keep the class where it is

<div>
    <span class="testing">
    </span>
<div>

Make sure that you change the CSS accordingly other than that you won't need to change anything else.

And with that you have valid HTML and the site still functions

JSFiddle with valid HTML

First thing is that you need some Newlines and indentations in there so that you can see what is really going on.

I took out the Guts of the HTML Pictures, so instead of this

        <div class="thumb-set">
            <ul >
                <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"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""></div></span></a></li>
                <li><a href="#x"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""></div></span></a></li>
            </ul>
        </div>

it looks something like this

<div class="thumb-set">
    <ul >
        <li>
            <a href="#x">
                <img class="small-thumb" src="Picture1.jpg" alt="">
                <span>
                    <div class="testing">
                        <img class="big-pic" src="big-Picture1.jpg" alt="">
                    </div>
                </span>
            </a>
        </li>
        <li>
            <a href="#x">
                <img class="small-thumb" src="Picture2" alt="">
                <span>
                    <div class="testing">
                        <img class="big-pic" src="big-Picture2.jpg" alt="">
                    </div>
                </span>
            </a>
        </li>
    </ul>
</div>

Then because your spans are called in your CSS but those pesky DIVs aren't (not even their classes) we are going to get rid of some DIVs

I am also going to self close your IMGs as well otherwise I think I have something inside those tags(this is personal preference in some variants of HTML, but it is never wrong to self close them so in my opinion you should always self close tags) i.e. <img src="" />

It is a very good idea to put some sort of text in the alt attribute of your image tags, it is more than recommended.

<div class="thumb-set">
    <ul >
        <li>
            <a href="#x">
                <img class="small-thumb" src="Picture1.jpg" alt="Picture 1" />
                <span>
                    <img class="big-pic" src="big-Picture1.jpg" alt="Big Picture 1" />
                </span>
            </a>
        </li>
        <li>
            <a href="#x">
                <img class="small-thumb" src="Picture2" alt="Picture 2" />
                <span>
                    <img class="big-pic" src="big-Picture2.jpg" alt="Big Picture 2" />
                </span>
            </a>
            <a href="#x">
                <img class="small-thumb" src="Picture3" alt="Picture 2" />
                <span>
                    <img class="big-pic" src="big-Picture3.jpg" alt="Big Picture 2" />
                </span>
            </a>
        </li>
    </ul>
</div>

        .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 .thumb-set li a .big-pic {
        max-height: 400px;
        max-width: 400px;
    
    }
    
    .listing-template .listing-content .gallery-container .thumb-set li a:hover,
    .listing-template .listing-content .gallery-container .thumb-set li a:active,
    .listing-template .listing-content .gallery-container .thumb-set li a:focus {
        white-space:normal; 
        border-color:#2B596F; 
        outline:0;
    }
    
    .listing-template .listing-content .gallery-container .thumb-set li a span {
        position:absolute; left:-9999px; display:block; width:400px; height:400px; background:#2B596F; 
    }
    
    .listing-template .listing-content .gallery-container .thumb-set li a span .testing {display:block; width:400px; height:400px; text-align:center; display:table-cell; vertical-align:middle;
    }
    
    .listing-template .listing-content .gallery-container .thumb-set li a:hover span {
        position:absolute; left:2px; top:-427px; z-index:100;
    }
    
    .listing-template .listing-content .gallery-container .thumb-set li a:active span,
    .listing-template .listing-content .gallery-container .thumb-set li a:focus span {
        position:absolute; left:2px; top:-427px; 
    }

   <div class="listing-content">
        <div class="container"> 
            <div class="gallery-container">
                <div class="big-pic-box">
                    <img class="default" src="http://placehold.it/400" alt="" />
                </div>
                <div class="thumb-set">
                    <ul >
                        <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"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt=""></div></span></a></li>
                        <li><a href="#x"><img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""><span><div class="testing"><img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt=""></div></span></a></li>
                    </ul>
                </div>
            </div>

This shows that your code doesn't function as intended, if you post your real code in the next question then we can review your real code.

My code after removing stuff that didn't need to be there.

You can see that this still doesn't do what your code on Github does, so it is important that you post the actual code that you want reviewed.

in your next question, you should ask what you really want to ask and not what the general rule is.

  .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 .thumb-set li a .big-pic {
    max-height: 400px;
    max-width: 400px;

}

.listing-template .listing-content .gallery-container .thumb-set li a:hover,
.listing-template .listing-content .gallery-container .thumb-set li a:active,
.listing-template .listing-content .gallery-container .thumb-set li a:focus {
    white-space:normal; 
    border-color:#2B596F; 
    outline:0;
}

.listing-template .listing-content .gallery-container .thumb-set li a span {
    position:absolute; left:-9999px; display:block; width:400px; height:400px; background:#2B596F; 
}

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

.listing-template .listing-content .gallery-container .thumb-set li a:hover span {
    position:absolute; left:2px; top:-427px; z-index:100;
}

.listing-template .listing-content .gallery-container .thumb-set li a:active span,
.listing-template .listing-content .gallery-container .thumb-set li a:focus span {
    position:absolute; left:2px; top:-427px; 
}

<div class="listing-content">
    <div class="container"> 
        <div class="gallery-container">
            <div class="big-pic-box">
                <img class="default" src="http://placehold.it/400" alt="" />
            </div>
			<div class="thumb-set">
				<ul >
					<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="Picture 1" />
							<span>
								<img class="big-pic" src="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt="Big Picture 1" />
							</span>
						</a>
					</li>
					<li>
						<a href="#x">
							<img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt="Picture 2" />
							<span>
								<img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt="Big Picture 2" />
							</span>
						</a>
						<a href="#x">
							<img class="small-thumb" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt="Picture 2" />
							<span>
								<img class="big-pic" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt="Big Picture 2" />
							</span>
						</a>
					</li>
				</ul>
			</div>  
        </div>
	</div>
</div>

Thanks for your thoughtful response. Could you take a closer look at the CSS? The testing DIV does have several attributes called out there to contain the larger pic. See the line .listing-template .listing-content .gallery-container .thumb-set li a span .testing { Without this, I get the same results as you. Thanks again! — Christopher Pearson, Commented Feb 6, 2015 at 7:18
it's simple, don't put divs inside of spans. switch them around, you can add a class to a span. — Malachi, Commented Feb 6, 2015 at 13:57
OK, so I am a BONE HEAD I simply changed the <span> to a <div> and assigned a class to it. It works like a charm. Thanks @Malachi and @phrancis for the great help. The completed file is in my Github repo or fiddle if you are interested. — Christopher Pearson, Commented Feb 6, 2015 at 18:09

Phrancis · Accepted Answer · 2015-02-05 22:50:43Z

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.

`<div>` inside `<span>`

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

<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>

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)

<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>

So, it works, it looks OK. But it smells. Your <div class="testing"> actually doesn't add anything, because your <span> 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:

<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>

Or inline like you have it:

<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>

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:

<link rel="stylesheet" href="doboyo.css">

Then you can get rid of your whole <style> 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:

<img class="top-logo center-block" src="http://i76.photobucket.com/albums/j39/christopherepearson1/Web%20Graphics/logo3_zpsa8816cd3.png" border="0" alt="logo"/>

You should instead use CSS:

<img class="top-logo center-block" src="http://i76.photobucket.com/albums/j39/christopherepearson1/Web%20Graphics/logo3_zpsa8816cd3.png" style="border: 0;" alt="logo"/>

Same goes for this table element:

<table border="0" cellpadding="10" cellspacing="0" align="center">

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

<table style="border: 0; padding: 10px; border-spacing: 0px; margin-left: auto; margin-right: auto;">

Minor things

This div:

<div class="listing-template">

Does not have a closing tag </div> 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".

Late edit, I added the solution to your div inside span problem. — Phrancis, Commented Feb 5, 2015 at 22:51
Thanks @phrancis for your encouragement. This is literally my first piece of HTML in 16 years. I am still digesting the main part of your answer, but let me respond to some easy points. I have been using Sublime Text so I did run it through the W3C HTML5 validator which is what led me to seek some guidance in the first place. CSS Styles: I started this way because I was told that ebay would not allow link calls in their listings (which I have since found to be wrong). I am building a .css file now. **Obsolete HTML: **Did I say my first piece of HTML in 16 years? Guess it shows. — Christopher Pearson, Commented Feb 6, 2015 at 2:02
I feel you man. Just got back into HTML/CSS recently, things have changed drastically since 2000-ish since I last wrote HTML! — Phrancis, Commented Feb 6, 2015 at 2:27
funny, one of the obsolete stylings came from a snippit direct from Paypal which was supposed to be updated to most recent HTML release... That's what I get for not fully reading what I am pasting! — Christopher Pearson, Commented Feb 6, 2015 at 5:47
OK @phrancis, I tried to take out the DIV as you suggested and it breaks the gallery because there is nothing to contain the larger images. Take a closer look at the CSS. The span has CSS for cases ....thumb-set li a span {, ....thumb-set li a:hover span {, and ....thumb-set li a:active span, ....thumb-set li a:focus span { whereas the testing DIV has its own, very different CSS ....thumb-set li a span .testing {. — Christopher Pearson, Commented Feb 6, 2015 at 7:13

Stack Exchange Network

Simple thumbnail gallery

2 Answers 2

TL;DR;

This shows that your code doesn't function as intended, if you post your real code in the next question then we can review your real code.

`<div>` inside `<span>`

Based on your whole page on github...

CSS styles

Obsolete HTML styling

Minor things

Your Answer

Not the answer you're looking for? Browse other questions tagged
html
css
or ask your own question.

Hot Network Questions

Simple thumbnail gallery

2 Answers 2

TL;DR;

This shows that your code doesn't function as intended, if you post your real code in the next question then we can review your real code.

<div> inside <span>

Based on your whole page on github...

CSS styles

Obsolete HTML styling

Minor things

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged htmlcss or ask your own question.

Related

Hot Network Questions

`<div>` inside `<span>`

Not the answer you're looking for? Browse other questions tagged
html
css
or ask your own question.