Post
Ask Question

Creation Of Simple CSS Gallary

Creation Of Simple CSS Gallary 

 
This blog is about creating a beautiful gallery and the best thing is that there is no JavaScript in it, even a single line of code.
I am simply using HTML and CSS.
 
HTML Code:
 
It consists of two blocks of pictures. You just have to click the left side of the block which contains small pics in order to switch between images.
 
Here's a code:
  1. <div id="Gallery">  
  2.     <ul id="navigation">  
  3.         <li>  
  4.             <a href="#pic1">  
  5.                 <img alt="" src="small_Tom.jpg" />  
  6.             </a>  
  7.         </li>  
  8.         <li>  
  9.             <a href="#pic2">  
  10.                 <img alt="" src="small_Jerry.jpg" />  
  11.             </a>  
  12.         </li>  
  13.         <li>  
  14.             <a href="#pic3">  
  15.                 <img alt="" src="small_Dexter.jpg" />  
  16.             </a>  
  17.         </li>  
  18.         <li>  
  19.             <a href="#pic4">  
  20.                 <img alt="" src="small_Popeye.jpg" />  
  21.             </a>  
  22.         </li>  
  23.         <li>  
  24.             <a href="#pic5">  
  25.                 <img alt="" src="small_Minions.jpg" />  
  26.             </a>  
  27.         </li>  
  28.     </ul>  
  29.     <div id="Full-Pics">  
  30.         <div>  
  31.             <a name="pic1"></a>  
  32.             <img alt="" src="large_Tom.jpg" />  
  33.         </div>  
  34.         <div>  
  35.             <a name="pic2"></a>  
  36.             <img alt="" src="large_Jerry.jpg" />  
  37.         </div>  
  38.         <div>  
  39.             <a name="pic3"></a>  
  40.             <img alt="" src="large_Dexter.jpg" />  
  41.         </div>  
  42.         <div>  
  43.             <a name="pic4"></a>  
  44.             <img alt="" src="large_Popeye.jpg" />  
  45.         </div>  
  46.         <div>  
  47.             <a name="pic5"></a>  
  48.             <img alt="" src="large_Minions.jpg" />  
  49.         </div>  
  50.     </div>  
  51. </div>  
CSS Code:
 
CSS is used for defining size as well as the other designing conditions. Here's a code:
  1. #Gallery {  
  2.   width: 800px;  
  3.   overflow: hidden;  
  4.   position: relative;  
  5.   z-index: 1;  
  6.   margin: 100px auto;  
  7.   border: 1px solid #003C72;  
  8. }  
  9. #navigation {  
  10.   list-style: none;  
  11.   padding: 0;  
  12.   margin: 0;  
  13.   float: left;  
  14. }  
  15. #navigation li {  
  16.   padding: 0;  
  17.   margin: 0;  
  18.   float: left;  
  19.   clear: both;  
  20. }  
  21. #navigation li a img {  
  22.   display: block;  
  23.   border: none;  
  24. }  
  25. #navigation li a {  
  26.   display: block;  
  27. }  
  28. #full-picture {  
  29.   width: 500px;  
  30.   height: 375px;  
  31.   overflow: hidden;  
  32.   float: left;  
  33. }  
Next Recommended Reading Highlight HTML Table Alternate Row Colors Using CSS Selector