Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

1 total

On This Page:

  1. 1 Tags css style

Tags css style

css style

* {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}
.span-2 {
	width: 70px;
}
.span-6 {
	width: 230px;
}

.container {
	width: 310px;
	padding-top: 5px;
	border-bottom: solid 1px #CCC;
}
.container .column {
	padding-bottom: 5px;
	float:left;
	margin-right:10px;
}
.container .last {
	margin-right: 0;
}
.container .label strong {
	color:#CCCCCC;
	font-weight: normal;
	text-transform:uppercase;
}
.container ul.tags li {
	background: url(images/tag-bg.gif) no-repeat scroll right top;
	display:block;
	float: left;
	height:20px;
	padding:0;
	text-transform:lowercase;
	
	padding-right: 10px;
	margin-bottom: 2px;
	margin-right: 2px;
}
.container ul.tags li a {
	background: url(images/tag-bg.gif) no-repeat scroll left top;
	font-size:10px;
	line-height:20px;
	display: block;
	
	padding-left: 10px; 
}
ul.tags a {
	text-decoration: none;
	color: #FFFFFF;
}


HTML
  <div class="container" style="margin: 0 auto;">

    <div class="column span-2 label">
      <strong>Tags</strong>
    </div>

    <div class="column span-6 last tags">
    <ul class="tags mar0">
      <li><a href="#">sliders</a></li>
      <li><a href="#">clipping</a></li>
      <li><a href="#">drag to select</a></li>
      <li><a href="#">video players</a></li>
      <li><a href="#">video editor</a></li>
    </ul>
    </div>

  <div class="clear"></div>
  </div>

  <div class="container" style="margin: 0 auto;">

    <div class="column span-2 label">
      <strong>Tags</strong>
    </div>

    <div class="column span-6 last tags">
    <ul class="tags mar0">
      <li><a href="#">drag to select</a></li>
      <li><a href="#">sliders</a></li>
      <li><a href="#">clipping</a></li>
      <li><a href="#">video players</a></li>
      <li><a href="#">video editor</a></li>
    </ul>
    </div>

  <div class="clear"></div>
  </div>
1 total

On This Page:

  1. 1 Tags css style