SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Image gallery

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image gallery

    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.


    Code HTML4Strict:
    <!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>

    Code CSS:
    /*
    Credit: [url=http://www.templatemo.com]Free CSS Templates (330 free templates)[/url]
    */
     
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Firstly, wrap all those LIs in an UL (you missed the top <ul> tag), and set it to

    Code:
    #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.

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?


    Code HTML4Strict:
    		<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>



    Code CSS:
    /* 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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,595
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yes, that's a starting point. It would be good to see this live, though. Do you have a link?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I dont have a link. I just tested it and my gallery didnt show up.

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <!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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  7. #7
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hoku_2000 View Post
    No, I dont have a link. I just tested it and my gallery didnt show up.
    Remove the space between /* gallery * / the * and the /

    So

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

    Becomes

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

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Hm, CSS parser shouldn't care about that space...

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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! ;-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •