Within an html file I have a menu set up as:
<div id="informheader" class="topmenu">
<ul id="navigationMenu">
<li>Home</li>
<li>Reporting</li>
<li>Dashboard</li>
<li>My Profile</li>
<li>Management Console</li>
</ul>
</div>
Within the CSS
.topmenu ul a
{
line-height:36px;
text-decoration: none;
color: #ffffff;
display:inline-block;
padding: 0px 5px 0px 5px;
background-position: 100%;
}
.topmenu li a:hover
{
background-image: url('../images/gradientheaderdark.png');
height: 36px;
display: inline-block;
text-decoration: none;
background-repeat: repeat-x;
margin-top:-5px;
line-height:36px;
}
.topmenu
{
position: relative;
display: block;
width: 80%;
height: 36px;
margin: 5px auto;
text-align: left;
z-index: 9998;
-khtml-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
background-image: url('../images/gradientheader.png');
background-repeat: repeat-x;
}
.topmenu ul
{
display:inline-block;
list-style-type: none;
padding: 0;
margin: auto 0;
}
.topmenu li
{
display: inline-block;
list-style:none;
padding: 0px 5px 0px 5px;
}
The result renders the bullet-ed list horizontally in IE fine. However in Firefox the list stays vertical. Can anyone point me in the correct direction as to what tag I am missing to get Firefox to also render this UL list horizontally in Firefox (as well as safari)?
Switching the display to block vs inline-block flips the issue for IE.
Add float: left; to .topmenu li
Related
I am setting up a new web page and making a horizontal menu. The hypertext is made by 2 words. It should be in one row, but actually one word = 1 row. I have here in CSS a hover effect over it, whenever the hover effect works, the hypertext is in this moment in one row. I am a little bit lost and confused. I don't know what to change, can you help me?
I have already tried changing in CSS display attribute to table, block, solid. Also I have tried min-width, with hopes that text will expand on one line, but it didn't helped at all. Also I tried to change margin and padding but nothing changed.
https://i.stack.imgur.com/AgqOJ.jpg
HTML
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
CSS
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 100px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
The a tag width has been limited in normal state:
#panel a{
display: block;
width: 100px; --> this line
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
You could remove the line width: 100px; because display:block will set the element width to 100% of its container.
the width in your a tag selector in CSS was limiting the width of the elements forcing a text wrap. this fixes it
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
<style>
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 150px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
</style>
I have a menu, which every thing works except of the sub menu. when the <li> with the sub menu is hover its suppose to show a sub menu, and it does. but the problem is with the position of the sub menu, it doesn't show it under the <li> it shows it left: 0%.
http://jsfiddle.net/2fDQz/1/ - Try and put your mouse over the "admin" and the "home".
here is the css(although you can see it in the jsfiddle):
CSS
body {
}
/* Base Styles */
#personalbar ul, #personalbar li, #personalbar a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family:'Lato', sans-serif;
}
#personalbar {
border: 1px solid #123e3f;
width: auto;
}
#personalbar ul {
zoom: 1;
background: #33b3b7;
background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f));
background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: linear-gradient(top, #33b3b7 0%, #288c8f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#top-color', endColorstr='#bottom-color', GradientType=0);
padding: 5px 10px;
}
#personalbar ul:before {
content:'';
display: block;
}
#personalbar ul:after {
content:'';
display: table;
clear: both;
}
#personalbar li {
float: left;
margin: 0 5px 0 0;
border: 1px solid transparent;
}
#personalbar li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
}
#personalbar li.active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar ul ul li:hover a, #personalbar li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#personalbar ul ul a:hover {
background: #7d7d7d;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#personalbar li:hover > ul {
display: block;
}
#personalbar ul ul {
position:absolute;
z-index: 1000;
display: none;
margin: 0;
padding: 0;
width: 185px;
top: 40px;
left: 0;
background: #ffffff;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#personalbar ul ul li {
position: relative;
float: none;
margin: 0;
padding: 3px;
}
HTML:
<div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;">
<ul>
<li><a href='# '><span>Home</span></a>
<ul>
<li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a>
</li>
<li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a>
</li>
</ul>
</li>
<li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a>
</li>
<li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a>
</li>
<li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a>
<ul>
<li runat="server"><span>bla</span>
</li>
<li runat="server"><span>bli</span>
</li>
</ul>
</li>
<li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a>
</li>
</ul>
</div>
I have tried changing the #personalbar ul ul 's position to relative, and here is what is did: http://jsfiddle.net/2fDQz/2/
You need to wrap absolute positioned element inside a position: relative; container...
Demo
#personalbar li {
float: left;
margin: 0 5px 0 0;
position: relative;
border: 1px solid transparent;
}
Note, as pointed by #Amarnath, in the above demo, the menu will collapse as soon you hover the child elements, it's because you are using top: 40px; so get rid of that - Demo
#personalbar ul ul {
position:absolute;
z-index: 1000;
display: none;
margin: 0;
padding: 0;
width: 185px;
top: 40px; /* Take this out from here */
left: 0;
background: #ffffff;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
Also, would like to suggest you, that when you deal with such a markup, it is better to use > selector so that the elements you select via CSS are precise.. If you are not aware of what does that selector do, it selects direct child of the element. For example using something like
ul li ul {
/* Selects all ul element nested under li */
}
Whereas using something like
ul > li > ul {
/* Selects direct ul element nested under li - First Level */
}
You need to set all the li's positions to relative for it to work. Making something position: relative resets the positioning values for any child elements. When using absolute positioning inside a relatively positioned parent, the child (when set to left: 0; top: 0; for example) will position itself to the top left edge of the parent and not the document. A good point to note as well is that the z-index property also resets relative to the parent.
Try this:
body {}
/* Base Styles */
#personalbar ul,
#personalbar li,
#personalbar a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family: 'Lato', sans-serif;
}
#personalbar {
border: 1px solid #123e3f;
width: auto;
}
#personalbar ul {
zoom: 1;
background: #33b3b7;
background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f));
background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
background: linear-gradient(top, #33b3b7 0%, #288c8f 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#top-color', endColorstr='#bottom-color', GradientType=0);
padding: 5px 10px;
}
#personalbar ul:before {
content: '';
display: block;
}
#personalbar ul:after {
content: '';
display: table;
clear: both;
}
#personalbar li {
float: left;
margin: 0 5px 0 0;
border: 1px solid transparent;
position: relative; /* This is the important bit */
}
#personalbar li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
}
#personalbar li.active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #33b3b7;
}
#personalbar li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1d6567;
border: 1px solid #123e3f;
-moz-box-shadow: inset 0 5px 10px #123e3f;
-webkit-box-shadow: inset 0 5px 10px #123e3f;
box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar ul ul li:hover a,
#personalbar li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#personalbar ul ul a:hover {
background: #7d7d7d;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#personalbar li:hover > ul {
display: block;
}
#personalbar ul ul {
position: absolute;
z-index: 1000;
display: none;
margin: 0;
padding: 0;
top: 40px;
left: 0;
background: #ffffff;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#personalbar ul ul li {
position: relative;
float: none;
margin: 0;
padding: 3px;
}
<div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;">
<ul>
<li><a href='# '><span>Home</span></a>
<ul>
<li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a>
</li>
<li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a>
</li>
</ul>
</li>
<li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a>
</li>
<li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a>
</li>
<li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a>
<ul>
<li runat="server"><span>bla</span>
</li>
<li runat="server"><span>bli</span>
</li>
</ul>
</li>
<li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a>
</li>
</ul>
</div>
I have an input box and a button on a website which i'm trying to align correctly in my CSS. Initially it looked fine on firefox 22.0, safari 5.1.9 and chrome 29.0.1547.57(mac) but not chrome 28.0.1500.95 on windows so i added some code that only targeted chrome , however now it looks odd in safari and chrome (mac) but fine in firefox and chrome on windows. How would i fix this?
This is what happens: http://i754.photobucket.com/albums/xx182/rache_R/image_zpsd746de67.jpg
CSS code:
input#image {
position: relative;
top: 20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input#image {
position: relative;
top: -2px;
left: 106px;
}
}
input#box {
position: relative;
width: 30px;
height: 25px;
top: 25px;
left: -60px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
text-align: center;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input#box {
position: relative;
width: 30px;
height: 25px;
top: 30px;
left: -60px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
text-align: center;
}
}
try make this
css
*{
padding: 0;
margin: 0;
outline: 0;
}
#first {
}
#first li {
list-style-type: none;
float: left;
}
#first li a {
background-color: #333333;
display: block;
margin: 1px;
padding: 5px;
color: #CCCCCC;
text-decoration: none;
font-family: Tahoma;
}
#first li a:hover {
background-color: #666666;
}
html
<ul id="first">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
I'm not good in css, so please try to help me
I have this css code
#mo-stats-w1 {
background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x;
/*height: 143px;*/
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 10px 0px 0px 0px;
padding-bottom: 10px;
background-color: #3EC4CD;
}
#mo-stats-w2 {
padding: 12px 0px 0px 15px;
}
#mo-stats-w1 ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 1px 0px;
height: 59px;
}
#mo-stats-w1 ul li {
display: block;
list-style: none;
padding: 1px;/*0px 0px 0px 0px;*/
margin: 0px 1px 0px 0px;
width: 174px;
height: 59px;
float: left;
}
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; }
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; }
#mo-stats-w1 ul li strong {
font-size: 24px;
height: 22px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-weight: bold;
color: #1774C2;
text-shadow: 1px 1px 1px white;
display: block;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 11px;
}
#mo-stats-w1 ul li span {
font-size: 13px;
font-weight: bold;
color: #3e3e3e;
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 11px;
}
and this html code
<div id="mo-stats-w1">
<div id="mo-stats-w2">
<ul id="mo-stats-r2">
<li><strong>Status</strong></li>
<li><strong>100</strong> <span>Points</span></li>
<li><strong>30</strong> <span>Pending Points</span></li>
<li><strong>0</strong> <span>Direct Referrals</span></li>
<li><strong>Total</strong></li>
<li><strong>2</strong> <span>Links</span></li>
<li><strong>114</strong> <span>Views</span></li>
<li><strong>7</strong> <span>Unlocked Views</span></li>
</ul>
</div>
</div>
So the layout will be
Change the background for "Status" and "Total" to #4EC772 and background hover #7DD798 and the color for both words to be #FFFFFF
To be something like this
How i can do that please ?
jsfiddle: http://jsfiddle.net/WwY2v/
Thanks
You need to use the nth-child() pseudo class to target those two <li> and do the same for the color: #fff; except specify the <strong> element after ..
Updated fiddle: http://jsfiddle.net/WwY2v/2/
This is what I added:
#mo-stats-r2 li:nth-child(4n + 1):hover {
background: #4EC772;
}
#mo-stats-r2 li:nth-child(4n + 1) strong:hover {
color: white;
}
Simply add a class to the required elements like:
<li class='highlight'><strong>Status</strong></li>
...
...
<li class='highlight'><strong>Total</strong></li>
And use the following css:
.highlight {
color:#FFFFFF; /* normal text color */
background-color:#4EC772; /* normal bg color */
}
.highlight:hover, .highlight:focus {
color:#FFFFFF; /* hover text color */
background-color:#7DD798; /* hover bg color */
}
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>Darling</li>
<li>Online Audience</li>
<li>Digital Strategy</li>
<li>Creative</li>
<li>Mobile</li>
<li>eCommerce</li>
<li>Social Media</li>
<li>Search</li>
<li>Advertising</li>
<li>Ramblings</li>
<li>Ideas</li>
<li>Newy New</li>
<li>Freshy Fresh</li>
<li>Search</li>
<li>Advertising</li>
<li>Ramblings</li>
<li>Ideas</li>
<li>Newy New</li>
<li>Freshy Fresh</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?
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>Darling <span class="tag-qty">103</span></li>
<li class="active">Online Audience <span class="tag-qty">9</span</li>
<li>Digital Strategy <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;
}