how to create a pricetag like border around list items


Tags: css,html5,css3,styles,html-lists

Problem :

How do you create borders around list items with a custom border on the left side of the item?

like this:

http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/filters.png

I have considered using css 3 angles....but I can't achieve an inner circle or hole...with borders...and it's likely more tedious than using images somehow.

I am now considering doing this with background images...and have turned off the border on the left side and am trying to get a graphic to position itself on the left edge of the item but no luck. My items all have varying lengths and they are floated left items in a horizontal slider to make it even more complicated.

I also need different hover and active styles as shown in the graphic.

And finally I need to provide a round styled circle or elipse that can hold a number associated with the qty of items in the category and have that attached to the upper right of the styled list item box.

This is my progress so far:

HTML:

<div class="filters">
                <div class="filters-inner">
                      <ul id="filters-slider" class="filters-list">
                    <li><a href="#">Darling</a></li>
                    <li><a href="#">Online Audience</a></li>
                    <li><a href="#">Digital Strategy</a></li>
                    <li><a href="#">Creative</a></li>
                    <li><a href="#">Mobile</a></li>
                    <li><a href="#">eCommerce</a></li>
                    <li><a href="#">Social Media</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Advertising</a></li>
                    <li><a href="#">Ramblings</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Newy New</a></li>
                    <li><a href="#">Freshy Fresh</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Advertising</a></li>
                    <li><a href="#">Ramblings</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Newy New</a></li>
                    <li><a href="#">Freshy Fresh</a></li>

                </ul>
          </div>
</div>

CSS:

.filters {
background-color: #fff;
padding-top: 3px;
padding-bottom: 5px;
width: 1145px;
height: 45px;
float: left;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);

}
 .filters-inner {
width: 1140px;
margin-right: auto;
margin-left: auto;
font-size: 11px;
overflow: hidden;
color: #999;
    -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;

 }
ul.filters-list {
text-align: center;
white-space: nowrap;
display: inline-block;
padding-top: 10px;
}
ul.filters-list li {
float: left;
list-style-type: none;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 2px;
padding-left:20px;
background-color: #fff;
margin-right: 10px;
margin-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background-image: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_up.png);
background-repeat: no-repeat;
background-position: left center;
}
ul.filters-list li:hover {
background-color: #ECECEC;
background: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_hover.png) no-repeat left center;
}ul.filters-list li a {
color: #666666;
font-weight: bold;
}
ul.filters-list li a:hover {
text-decoration: none;
}

div.sample {
padding-top: 200px;
}

Does anyone know how to do this correctly?



Solution :

Here's a solution that works with a background image sprite. In a nutshell, I'm using the tag for the entire "price tag" shape (easier for the user to click on), and a background sprint for the hover/active state. I'm also wrapping the "quantity" number in a span tag.

Solution Example: http://jsfiddle.net/alexroper/zhrwA/34/

Here is the HTML for the "price tag" list:

<ul id="filters-slider" class="filters-list">
  <li><a href="#">Darling</a> <span class="tag-qty">103</span></li>
  <li class="active"><a href="#">Online Audience</a> <span class="tag-qty">9</span</li>
  <li><a href="#">Digital Strategy</a> <span class="tag-qty">20</span></li>
</ul>

Here are the styles that build that "price tag" :

ul.filters-list {
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  padding-top: 10px;
}
ul.filters-list > li {
  color: #666666;
  font-weight: bold;
  float: left;
  list-style-type: none;
  line-height: 26px;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}
ul.filters-list > li > a {
  color: #666666;
  padding: 0 18px 0 24px;
  background: url('https://www.dropbox.com/s/n8e74eikwf82vks/tag_sprite.png?raw=1') 0 0 no-repeat;
  border-right: 1px solid #ccc;
  display: block;
}
ul.filters-list > li > a:hover,
ul.filters-list > li.active > a {
  text-decoration:none;
  background-position: 0 -30px;
}

And these styles create the "quantity" number:

.filters-list .tag-qty {
  position: absolute;
  top: -8px;
  right: -9px;
  border: 1px solid #bbb;
  line-height: 16px;
  display: inline-block;
  padding: 0 5px;
  background: #fff;
  -webkit-border-radius: 9px;
          border-radius: 9px;
     -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
          background-clip: padding-box;
  -webkit-box-shadow: 0px 0px 3px 0px #ccc;
          box-shadow: 0px 0px 3px 0px #ccc;
}
.filters-list .active .tag-qty {
  background:#ebebeb;
}

    CSS Howto..

    How come one jquery script cant effect another jquery script

    How to make an object go to a higher layer

    show loading div with overlay on submit while waiting

    How to resize the width of a div based on another div on it's right, only with CSS(no JS)

    CSS How to make image size relative to parent?

    How to get MetroUI CSS Datepicker value with javascript

    How can I float two tables next to each other left to right and center them both?

    How do I get two divs next to eachother, but spaced?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    how to select all list items except for the first and last using CSS only?

    How to override PrimeFaces CSS via external stylesheet

    How to float menu list elements

    how to identify if a css class has property in extjs

    how to put all labels in bold with css

    How to copy the CSS to another tab in Chrome?

    How to change css property of the particular selection text in a input field using javascript

    How can I align text using CSS but perform like printf in C? [closed]

    How to create a CSS? [closed]

    How to create generic CSS class with input parameter

    How can I get these two form fields to fill the space between them [duplicate]

    How to make expand-collapse different div heights according to device width using css/javascript

    How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

    How to deal with my sharepoint datetime control css?

    How to target entire Bootstrap navbar

    How to move the POV of an image when using overflow: hidden?

    How to conditionally add css properties in jquery (coffeescript)

    how to use css to make smartgwt look like gwtext

    how should i set scrollbar properties in css

    How browser auto resize website to mobile browse?

    How do you organize your template structure in CodeIgniter?