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.

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

Report this snippet  

You need to login to post a comment.