Advanced Search

CSS template for contest results page

/ Published in: CSS
Save to your folder(s)
Embedded stylesheet for results page of online-voting contest. Restaurants are displayed by category, then ranked by number of reader votes and critic's choice. Created January 2012. http://www.orlandosentinel.com/foodiesresults

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. #foodie-container {
  3.     padding: 5px;
  4.     float: left;
  5.     width: 980px;
  6. }
  7. .foodie-category {
  8.     float: left;
  9.     margin: 2px 5px 15px 5px;
  10.     padding: 2px;
  11.     width: 124px;
  12. }
  13. .foodie-category li {
  14.     list-style: none !important;
  15. }
  16. .foodie-category a {
  17.     color: #167;
  18.     font: bold 12px Arial, Helvetica, sans-serif;
  19.     text-decoration: none;
  20. }
  21. .foodie-category a:hover {
  22.     text-decoration: underline;
  23. }
  24. .foodie-winner {
  25.     border: 1px solid #ccc;
  26.     float: left;
  27.     height: 290px;
  28.     margin: 2px 6px 10px 6px;
  29.     overflow: hidden;
  30.     padding: 4px;
  31.     width: 304px;
  32. }
  33. article, header, nav, section {
  34.     display: block;
  35. }
  36. small {
  37.     font-size: 11px;
  38. }
  39. h3 {
  40.     border-bottom: 2px dotted #ccc;
  41.     color: #167;
  42.     font: bold 16px Arial, Helvetica, sans-serif;
  43.     margin: 2px 0 5px;
  44.     padding: 2px;
  45. }
  46. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.