Only on IE the tooltip shows underneath the text of the link therefore the text in the tooltip can't be read. I know I could move the tooltip over to the right but that doesn't look good.
How can I make the tooltip background solid or on top of the links. I already tried z-index.
<ul style=" list-style: circle; margin: 0px 2px 0px 12px;">
<li style="z-index:10">
<a class="tooltip" href="abc.com"> <span class="classic" ><%= content %></span></a>
</li>
</ul>
.classic
{
padding: 0.8em 1em;
display:none;
text-decoration: none;
list-style: circle;
background:#FFC62E;
}
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
text-decoration: none;
position: relative;
}
.tooltip span
{
display:inline;
margin-left: -999em;
position: absolute;
text-decoration: none;
color:#000000;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 1;
margin-left: 170;
width: 250px;
display:inline-block;
background-color: #FFC62E;
background:rgb(255,198,46);
position:absolute;
text-decoration: none;
color:#000000;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}
How about this:
http://fiddle.jshell.net/br6AP/
Related
I have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
If I remove the float:left attribute from .action-button the transform animation doesn't work. Can you explain what is happening here?
Markup:
Are
Styles:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen line 17: http://codepen.io/koriolis/pen/euAEg
This is because a elements are inline elements, in that they align the the parent element and do not clear either side.
When you add float: left, It changes the elements from being inline to block but also removes the clear: both and allows for elements to be aligned next to each other.
You can achieve the same effect as a float by using inline-block if you don't want the tags to float on the page.
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
CodePen Example
tag a - default display: inline
float: left - display property is set to block
when you remove float: left - a again display: inline
use display: inline-block instead float: left
body {
padding: 50px;
}
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family:'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.blue {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.red {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.action-button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Hello
How
Are
You?
fiddle
I am trying to display a preview of sheet music listed on an ordered list. I can only get to display the image when hovering on the < li > element, but I would like to only see the image when hovering on the first section of each row ("[ view ]"). I've tried modifying different things, but I can't get it right. This is how my experiment looks so far: http://www.antonioromo.com/newsite/music.html
I'm sure I have redundant code and that I probably just need to change something simple, but I'm no expert.
This is the way I'm listing items:
<div id="SheetMusicStore">
<ol class="enlarge">
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
<span class="name">Just Another Dusk (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
<span class="name">My Nightlight (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
</ol>
</div>
This is my CSS code:
/** Sheet Music Store **/
#SheetMusicStore {
width: 500px;
margin: 40px auto;
}
ol.enlarge{
margin-left:0;
font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
font-size: 1em;
color: #999;
padding: 10px 20px;
-moz-box-shadow: inset 0 2px 2px #582E58;
-webkit-box-shadow: inset 0 2px 2px #582E58;
box-shadow: inset 0 2px 2px #582E58;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(../images/sheet-bg.png) repeat 0 0 scroll;
color: #AAA;
}
ol.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(../images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
ol.enlarge img{
background-color: #eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ol.enlarge span.preview{
position: absolute;
left: -9999px;
background-color: #eae9d4;
padding: 10px;
font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
font-size: .9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ol.enlarge li:hover{
color: #EEE;
z-index: 50;
}
ol.enlarge li:hover .view{
color:#FFFFCC !important;
}
ol.enlarge .view:hover{
cursor: pointer;
}
ol.enlarge span.preview img{
padding: 2px;
background: #ccc;
}
ol.enlarge li:hover span.preview{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
z-index: 50;
}
ol.enlarge .price {
width: 62px;
height: 16px;
position: absolute;
top: 7px;
right: 0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: transparent url(../images/buy-bg.png) repeat 0 0 scroll;
margin: 0 0 0 10px;
font-size: 10px;
text-align: center;
line-height: 16px;
text-shadow: none;
color: #BBB;
text-decoration: none;
z-index: 0;
}
ol.enlarge .price:hover {
color: #EEE;
}
Also, I don't know why there is a large blank space left at the very bottom of the page. Is it created by the elements created on the fly? Thanks in advance for any help!
You could nest the preview inside the view element. And just change the
ol.enlarge li:hover span.preview
to something like
span.view:hover span.preview
here is a demo on jsfiddle
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;
}