Image gallery

HTML & CSS
1

I am working on an image gallery for my site, so far, my images show up, but I would like to have three rows, right now I have one column. I’ve tried pasting my image code underneath my current images, but I just get one column and with each photo having a bullet next to it. I’ve made an image gallery using <ul></ul> before, but its been a while since I’ve made an image gallery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>

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

</head>
<body>

<div id="templatemo_wrapper"> 

	<div id="templatemo_header">

  <ul id="social_box">
            <li><a href="http://www.facebook.com/"><img src="images/facebook.png" alt="facebook" /></a></li>
            <li><a href="http://www.twitter.com/"><img src="images/twitter.png" alt="twitter" /></a></li>
                        
        </ul>
        

    	<div id="site_title">
            <h1><a href="index.html"><img src="images/logo2.png" alt="logo" /><span></span></a></h1>
        </div> <!-- end of site_title -->
        
      
    </div> <!-- end of templatemo_header -->
    
       <div id="templatemo_menu">
    	<div class="home"><a href="index.html"></a></div>
        <ul>
          <li><a href="index.htm"><span>Home</span></a></li>
            <li><a href="portfolio.htm"><span>Portfoilo</span></a></li>
            <li><a href="gallerya.htm"><span>Gallery</span></a></li>
            <li><a href="galleryb.htm"><span>Gallery 2</span></a></li>
	    <li><a href="galleryc.htm"><span>Gallery 3</span></a></li>
            <li><a href="comments.htm">Have A Comment?<span>Comments</span></a></li>
        </ul>    	
    </div> 
<!-- end of templatemo_menu -->
    
    <div id="templatemo_content_wrapper">
    	<div id="templatemo_content_top"></div>
        <div id="templatemo_content">
        
            <h2>Portfolio</h2>
            
		<div id="gallery">
			<li><a href="images/gallery_thumbnail_1.gif"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
			</ul>


          </div>
        	
        	<div class="cleaner"></div>
         
            
        </div>
        <div id="templatemo_content_bottom"></div>
	</div>
</body>
</html>
    

/*
Credit: [Free CSS Templates (330 free templates)](http://www.templatemo.com)
*/

body {
	margin: 0px;
	padding: 0px;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5em; 
	background-color: #0097d6;
	background-image: url(images/templatemo_body.jpg);
	background-repeat: repeat-y;
	background-position: center;
}

a, a:link, a:visited { color: #0066CC; text-decoration: none; }
a:hover { color: #CC3300; text-decoration: underline; }

p { margin: 0px; padding: 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #FFFFFF; }
h1 { font-size: 40px; font-weight: normal; margin: 0 0 30px 0; padding: 5px 0; }
h2 { font-size: 28px; font-weight: normal; margin: 0 0 20px 0; padding: 0; }
h3 { font-size: 21px; margin: 0 0 15px 0; padding: 0; padding: 0; color: #000; font-weight: normal; }
h4 { font-size: 18px; margin: 0 0 20px 0; padding: 0; color: #333; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color: #333; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; color: #333; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }


.float_l { float: left; }
.float_r { float: right; }

.image_wrapper { display: inline-block; padding: 4px; border: 1px solid #fff; background: none; margin-bottom: 10px; }
.image_fl { float: left; margin: 3px 15px 0 0; }
.image_fr { float: right; margin: 3px 0 0 15px; }

blockquote { font-style: italic; margin-left: 10px;}
cite { font-weight: bold; color:#3b3823; }
cite span { color: #696443; }
em { color: #000; }

.tmo_list { margin: 20px 0; padding: 0; list-style: none; }
.tmo_list li { background: transparent url(images/templatemo_list.png) no-repeat scroll 0 0px; margin:0 0 20px; padding:0 0 0 25px; 	line-height: 1em; }
.tmo_list li a { color: #fff; }
.tmo_list li a:hover { color: #ff4301; }


.button a { color: #333; font-weight: bold; }

.button a span { color: #de3f00; font-size: 18px; }

.button a:hover { color: #de3f00; text-decoration: none; }

#templatemo_wrapper { 
	width: 970px;
	margin: 0 auto;
}

#templatemo_header {
	width: 740px;
	height: 66px;
	padding: 0 100px 0 130px;
	background: url(images/templatemo_header.png) top no-repeat ;
}

#templatemo_header  #site_title {
	float: left;
	margin: 60px 0 0 60px;
}

#templatemo_header  #site_title a {
	margin: 0px;
	padding: 0px;
	font-size: 40px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_header  #site_title a span {
	display: block;
	text-align: right;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	margin-left: 5px;
}

#social_box {
	float: right;
	display: inline-block;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

#social_box li {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#social_box li a {
	width: 46px;
	height: 46px;
	margin-right: 5px;
}


/* menu */

#templatemo_menu {
	clear: both;
	width: 950px;
	height: 122px;
	padding: 0 10px;
	margin-bottom: 20px;
	background: url(images/templatemo_menu.png) no-repeat top;
}

#templatemo_menu .home a {
	float: left;
	width: 52px;
	height: 52px;
	margin: 9px 19px;
	background: url(images/templatemo_home.png) no-repeat center;
}

#templatemo_menu .home a:hover {
	background: url(images/templatemo_home_hover.png) no-repeat center;
}


#templatemo_menu ul {
	float: left;
	display: inline-block;
	height: 50px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0;
	margin: 0;
	display: inline-block;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	height: 45px;
	width: 140px;
	padding: 5px 0 0 0;
	font-size: 11px;
	color: #666;	

	text-align: center;
	text-decoration: none;
	font-weight: normal;
	outline: none;
	border: none;
	background: url(images/templatemo_menu_divider.gif) repeat-y right;
}

#templatemo_menu ul li a span {
	display: block;
	font-size: 20px;
	font-weight: normal;
	color: #333;
}

#templatemo_menu ul li .last {
	background: none;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
	color: #a13c03;
}

 #templatemo_menu ul li a:hover span, #templatemo_menu ul .current span {
	 color: #a13c03;
 }

#templatemo_menu ul li a span:hover {
	color: #a13c03;
}
/* end of menu */

/* content */

#templatemo_content_wrapper {
	width: 802px;
	padding: 0 68px 0 100px;
}

#templatemo_content_top {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_top.png) no-repeat;
}

#templatemo_content_bottom {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_bottom.png) no-repeat;
}
	
#templatemo_content {
	padding: 20px 30px;
	background: url(images/templatemo_content.png) repeat-y;
}


#templatemo_content p {
	margin-bottom: 10px;
}

#templatemo_content h2 {
	margin-left: -46px;
	height: 36px;
	padding: 12px 0 0 46px;
	text-shadow: 1px 1px 1px #555;
	margin-bottom: 10px;
	font-weight: bold;
	background: url(images/templatemo_h2.png) no-repeat;
}

.col_w340 {
	width: 340px;
}

.col_w220 {
	width: 220px;
}

.news_box {
	clear: both;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dashed #fff;
}

.news_box .news_meta {
	margin-bottom: 10px;
}

.news_box img {
	float: left;
	width: 240px;
	height: 180px;
	margin-right: 30px;
	border: 1px solid #fff;
	padding: 4px;
}

.news_box_last {
	margin: 0;
	padding: 0;
	border: none;
}


.service_box {
	width: 340px;
	margin-bottom: 40px;
}

.service_box img {
	float: left;
	width: 48px;
	height: 48px;
}

.service_box .sb_right {
	float: right;
	width: 260px;
}

.comment{
	font-weight: bold;
}

/* end of content */

/* sp_box */

#templatemo_sp_box {
	width: 740px;
	height: 140px;
	margin: 20px 70px 0 100px;
	padding: 30px;
	color: #eac5b8;
	background: url(images/templatemo_sp_box.png) no-repeat;
}


#templatemo_sp_box h4 {
	color: #fff;
}

#templatemo_sp_box img {
	float: left;
	width: 80px;
	height: 80px;
}

#templatemo_sp_box .right {
	float: right;
	width: 240px;
}

#templatemo_sp_box p {
	margin-bottom: 15px;
}

#templatemo_sp_box .button a span { color: #fff; }
#templatemo_sp_box .button a { color: #000;	 }
#templatemo_sp_box .button a:hover { color: #fff; }

/* end of sp_box */


#contact_form {
	float: left;
	padding: 0;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
}

#contact_form form .input_field {
	width: 300px;
	padding: 5px 0;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

#contact_form form label {
	display: block;
	width: 100px;
	margin-bottom: 5px;
	font-size: 14px;	
}

#contact_form form textarea {
	width: 335px;
	height: 200px;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

.submit_btn {
	margin: 0px;
	padding: 5px 10px;
	color: #FFFFFF;
	background: #0099FF;
	border: 1px solid #FFFFFF;
}

/* footer */

#templatemo_footer {
	width: 770px;
	padding: 20px 100px;;
	text-align: center;
	color: #12526d;
}


#templatemo_footer a {
	color: #000;
}

/* end of footer */

/* gallery * /

div.img
	{
	  margin: 2px;
	  border: 1px solid #0000ff;
	  height: auto;
	  width: auto;
	  float: left;
	  text-align: center;
	}  
	div.img img
	{
	  display: inline;
	  margin: 3px;
	  border: 1px solid #ffffff;
	}
	div.img a:hover img {border: 1px solid #0000ff;}
	div.desc
	{
	  text-align: center;
	  font-weight: normal;
	  width: 120px;
	  margin: 2px;
	}
2

Firstly, wrap all those LIs in an UL (you missed the top <ul> tag), and set it to

#gallery ul {list-style: none; margin: 0; padding: 0;}

Then set a width for the LIs and float them left, or instead of that (since the images are all different sizes [hello disaster!]) set them to display: inline-block. E.g.

#gallery li {display: inline-block;}
3

Like this?

		<div id="gallery">
			<ul><li><a href="images/gallery_thumbnail_1.gif"><img 

src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" 

/></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img 

src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" 

/></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img 

src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" 

/></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img 

src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" 

/></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img 

src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" 

/></a></li>
			</ul>


          </div>

		
        	<div class="cleaner"></div>
         
            
        </div>

/* gallery * /

div.img
	{
	  margin: 2px;
	  border: 1px solid #0000ff;
	  height: auto;
	  width: auto;
	  float: left;
	  text-align: center;
	}  
	div.img img
	{
	  display: inline;
	  margin: 3px;
	  border: 1px solid #ffffff;
	}
	div.img a:hover img {border: 1px solid #0000ff;}
	div.desc
	{
	  text-align: center;
	  font-weight: normal;
	  width: 120px;
	  margin: 2px;
	}
#gallery ul {list-style: none; margin: 0; padding: 0;}

#gallery li {display: inline-block;}
4

Yes, that’s a starting point. It would be good to see this live, though. Do you have a link?

1 Like
5

No, I dont have a link. I just tested it and my gallery didnt show up.

6

I don’t see an obvious problem, though I could easily have missed something. You have a lot of extra markup and css declarations for a minimal developmental case. Check that the path to the images is correct. (Do you see any of the alt texts? That would indicate the images are not where expected.)

Simplify your markup and css down to the bare bones. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
    <title>
      test doc
    </title>

    <style type="text/css">
/*<![CDATA[*/

    #gallery {
      list-style: none;
      padding: 0; /*set margin-left to zero if 
                    supporting old IE and Opera*/
      }

    #gallery li {
      display: inline-block;
      }

    #gallery a img {
      border: 1px solid #0000ff;}
      }

    /*]]>*/
    </style>
  </head>
  <body>
    <ul id="gallery">
      <li>
        <a href="images/gallery_thumbnail_1.gif"><img alt="Thumbnail 1 Caption"
             height="76"
             src="images/gallery_thumbnail_1.gif"
             width="84" /></a>
      </li>

      <li>
        <a href="http://www.freewebsitetemplates.com/"><img alt=
        "Thumbnail 2 Caption"
             height="76"
             src="images/gallery_thumbnail_2.gif"
             width="93" /></a>
      </li>

      <li>
        <a href="http://www.freewebsitetemplates.com/"><img alt=
        "Thumbnail 3 Caption"
             height="77"
             src="images/gallery_thumbnail_3.gif"
             width="59" /></a>
      </li>

      <li>
        <a href="http://www.freewebsitetemplates.com/"><img alt=
        "Thumbnail 4 Caption"
             height="77"
             src="images/gallery_thumbnail_4.gif"
             width="137" /></a>
      </li>

      <li>
        <a href="http://www.freewebsitetemplates.com/"><img alt=
        "Thumbnail 5 Caption"
             height="78"
             src="images/gallery_thumbnail_5.gif"
             width="119" /></a>
      </li>
    </ul>
  </body>
</html>

cheers,

gary

7

Remove the space between /* gallery * / the * and the /

So

/* gallery * /
div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    }

Becomes

/* gallery */
div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    }
8

Hm, CSS parser shouldn’t care about that space…

9

It should care because; CSS comments themselves begin with the characters “/*” and end with the characters “*/” anything else will probably cause it to hiccup and ignore the following statements. Burp! :wink: