advanced code snippet search

Posted By

bcmoney on 02/18/13


Tagged

responsive


Versions (?)

Responsive HTML Search Results grid

 / Published in: HTML
 

URL: http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/

Just a demo I was working on to create resizable search results, until I found Masonry and GammaGallery... look into those for a more complete version of this concept (if you don't mind including an external library), or, use this as a base for building your own.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>SkipSearch - Modern Search Results GRID</title>
  6. <style type="text/css">
  7. .grid { width:100%; }
  8. #search-results { margin:0 auto; text-align:center; }
  9. #search-results li { height:50px; text-align:left; border:1px solid; margin:0px; padding:0px; float:left; width:33%; list-style-type:none; }
  10. #search-results li:hover { background:goldenrod; cursor:pointer; }
  11. #search-results .even { background:lightsalmon; }
  12. #search-results .odd { background:lightgray; }
  13. </style>
  14. </head>
  15.  
  16. <body>
  17.  
  18. <!-- Search Results Grid -->
  19. 	<div class="grid">
  20. 		<ol id="search-results">
  21.       <li class="even">
  22.         <div>
  23.           <a href="#1"><img src="1.jpg" /></a>
  24.         </div>
  25.         <div>
  26.           <a href="#1"><span class="title">First Result</span></a>
  27.           (<span class="date">2012-08-29</span>)
  28.           <div class="desc">
  29.             Some text from the META description tag...
  30.           </div>
  31.         </div>
  32.       </li>
  33.       <li class="odd">
  34.         <div>
  35.           <a href="#2"><img src="2.jpg" /></a>
  36.         </div>
  37.         <div>
  38.           <a href="#2"><span class="title">Second Result</span></a>
  39.           (<span class="date">2012-03-14</span>)
  40.           <div class="desc">
  41.             Some text from the META description tag...
  42.           </div>
  43.         </div>
  44.       </li>
  45.       <li class="even">...</li>
  46.       <li class="odd">...</li>
  47.       <li class="even">...</li>
  48.       <li class="odd">...</li>
  49.       <li class="even">...</li>
  50.       <li class="odd">...</li>
  51.       <li class="even">
  52.         <div>
  53.           <a href="#n"><img src="n.jpg" /></a>
  54.         </div>
  55.         <div>
  56.           <a href="#n"><span class="title"><em>nth</em> Result</span></a>
  57.           (<span class="date">2012-03-14</span>)
  58.           <div class="desc">
  59.             Some text from the META description tag...
  60.           </div>
  61.         </div>
  62.       </li>
  63.     </ol>
  64. 	</div>
  65.  
  66. </body>
  67. </html>

Report this snippet  

You need to login to post a comment.