I've got a problem with a CSS tooltip over an image. Using it on text works fine, however when I use an image instead of text, it seems to be having issues, the issues are a bit hard to explain so I'll just give you a link:
http://zorps.dk/css-tooltips/tooltip.html
CSS code:
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
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);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
html code:
<p> <a class="tooltip" href="#"> <img src="icon_question.png" /> <span class="classic">The tooltip text goes here!</span></a></p>
Anyone know what the issue is?
Thanks!
Note: the code is taken from: http://sixrevisions.com/css/css-only-tooltips/
It's the code within the .tooltip:hover img class - If you remove it, it works well:
http://jsfiddle.net/RyRRM/
it's probably because the event is triggered by the tooltip's non-text-node parent. When you hover over the image, it detects a mouseout event for the parent. You could try making the image a css background and setting the width of the element instead of embedding the <img>
Your markup could then be
<a class="tooltip image" href="#"><span class="classic">The tooltip text goes here!</span></a>
and your css would be
.tooltip.image {
width: 12px;
height: 14px;
background-image: url("./icon_question.png");
display: block;
background-repeat: no-repeat;
}
Related
I am trying to make a button like this:
.
A single button that is "divided" into two parts - a number, and a title.
Both parts have different background colors, font colors, and the text is centered in the corresponding background. When hovered, it increases in size.
That picture is the real result of the code below. However, there are a few problems I cannot seem to solve.
1) I would like to have it work like a single element, but so far, I was only able to achieve this by creating two different divs, for each section of the button. Is there a more elegant way to achieve the same result?
2) When I scale down the browser window, I get something like this:
.
I don't want it to get split like that. Also, I cannot seem to keep it centered in the page. If you notice, it is a bit to the right side...
How can I solve those problems?
Here's the code:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
float: left;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}
#btn42 {
width: 50%;
margin: auto;
}
#btn42:hover {
transform: scale(1.05);
}
#btnNumber {
text-align: center;
width: 40px;
background: #e2e1e1;
color: #696969;
}
#btnTitle {
width: 300px;
text-align: center;
background: white;
color: #085388;
}
<div id="btn42">
<div class="btn" id="btnNumber">42</div>
<div class="btn" id="btnTitle">Some Random Title</div>
</div>
Use one element and rely on pseudo element for the number:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn:hover {
transform: scale(1.05) translateX(20px);
}
.btn {
width: 300px;
margin: auto;
transform:translateX(20px); /*fix centring due to pseudo element*/
text-align: center;
background: white;
color: #085388;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
position:relative;
}
.btn::before {
content: attr(data-nb);
position:absolute;
top:0;
right:100%;
width: 40px;
background: #e2e1e1;
color: #696969;
box-shadow:
3px 0 #fff, /*fix shadow overlap*/
3px 3px rgba(0, 0, 0, 0.3);
}
<div class="btn" data-nb="42">Some Random Title</div>
I think using a <button>-tag with two <span>-tags inside would be more appropriate. To avoid the button wrapping to a new line use white-space: nowrap;. To center it on your page simply use text-align, like in my example, or one of the many other methods. Depends on the context of the parent element. If it is centered horizontally and vertically on the page I would rather use flexbox.
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
main {
text-align: center;
}
.btn {
border: none;
background: #fff;
line-height: 24px;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
transition: transform 200ms ease-in-out;
}
.btn span {
background: #fff;
display: inline-block;
margin: 0;
padding: 0.2em 0.5em 0.2em;
}
.btn span:first-of-type {
background-color: #ccc;
color: #696969;
}
.btn:hover {
transform: scale(1.03);
}
<main>
<button class="btn"><span>42</span> <span>Some Random Title</span></button>
</main>
I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>
It should look like this:
There were quite a few errors in the code you pasted up above which weren't doing you any favors.
You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.
Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...
#Search {
position: relative;
display: inline-block;
}
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
/* 40px padding to account for submit */
padding: 2px 40px 2px 10px;
}
input[type=submit] {
position:absolute;
width: 30px;
height: 100%;
top: 0px;
right: 0px;
border: none;
color: white;
background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
display: block;
cursor: pointer;
}
Working codepen here.
Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.
Hope this helps.
Here it is done with HTML and CSS.
/*Clearing Floats*/
.cf:before, .cf:after{
content: "";
display: table;
}
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* Left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
tried both variants, both variants will work, second solution comes clothest
I'm styling some and my add to cart buttons look fine but I'm trying to create circular buttons for my wish lists and I'm still seeing grey behind them. I'm thinking this might be the browsers' default styling taking over but I'm not sure, has anyone ever seen something like this?
The larger "add to cart" button looks perfect. It's so weird, here's my code and a pic
.button {
color: #fff;
background: #a4cd45;
border: 1px solid #8bb43f;
padding: 10px 20px;
font-size: 135%;
margin: 0 auto;
transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);
border-radius: 4px
}
a.button:hover {
background: #8B0204;
border-color: #8B0204;
color: white
}
.wishlist {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 40px;
color: white;
background-color: #a4cd45;
text-align: center;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right
}
In .wishlist
Insert:
border:0;
If you want it to disappear.
P.S: You had border: 1px solid #8bb43f; for the other button, which would also work fine for this!
JSFiddle
Here I've made a Sample using a tag and as well using button element. Please have a look at the DEMO.
/*---------------Using Button Element-------------------*/
button.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;/*If remove this property you will see a gray background as shows on image*/
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
outline:0;
cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }
button.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
/*---------------Using anchor Element-------------------*/
a.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}
a.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
jsFiddle
How do I fix this?
ETA I tried #jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you #jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also?
Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";
Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}
Since CSS is not giving you the desired result, you may have to do a right-aligned background image for this one.
HTML
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
CSS
.guideList .active{
background: url('images/right-arrow.png') #0390d1 center right no-repeat;
color: white;
}
you can use this html And Css for this :
Css:
.Rectangular{
width: 100px;
height: 30px;
text-align: left;
position: relative;
background-color: #0390D1;
color: #fff;
padding-left: 10px;
font: 12px/30px tahoma;
margin-right: 100px;}
.Rectangular>span{
display: inline-block;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0390D1;
border-left: 30px solid #0390D1;
border-right: 30px solid rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px;
position: absolute;
right: -29px;
top: 0;
}
HTML :
<div class="Rectangular">Law <span></span></div>
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.