for a project I'm working on I use a worldmap image, and centered this image.
the idea is that if you go over a certain country a tool tip message will come up below it and tell you the name of the country.
the popup box is build in css.
for example:
span.Amerika:hover:after {
content: "Amerika";
position: absolute;
width: 80px; /* box size */
height: 20px; /* box size */
padding: 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: rgb(113, 157, 171);
background: rgb(255, 255, 255);
border: 4px solid rgb(255, 255, 255);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
top: 320px; /* positioning */
left: 320px; /* positioning */
}
you could have guessed the positioning only works on my screen. on all larger screens the boxes will appear somewhere else.
So I'm thinking about having the tool tip message hover with the cursor. (follow the cursor)
how would i do this?
Related
I have about 100 buttons in my website, all using JavaScript onclick method. I want to replace them all with regular <a href> links for SEO purposes.
I made new class called button_seo with the same CSS as the old buttons. I placed it in the global CSS file, but it will not work and my buttons have no styling.
It does works when I place the CSS in the same file where the button is, but I would like to place it in the global file so I can control many buttons at once.
What might cause this? I don't have any style for the button_seo class anywhere in the files, just in global CSS file.
Here is my code:
.button_seo {
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
As comment to your answer, is this what you want?
.button_seo {
display: inline-block;
line-height: 40px; /* same as height */
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
EDIT - I found this SO
i fixed it, can't use height and width parameters for link, that not button after all.
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.
I have been trying to get a success message to appear on the center of my website.
What I tried applies to all the website except from a sector called "featured products."
When adding something to my wishlist the message appears to be "following" the product rather than being in the middle of the screen and fixed.
I attach a screenshot for details.
CSS Code
.flag-message {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
line-height: normal;
text-align: center;
font-size: 17px;
width: 400px;
vertical-align: middle;
/* height: 170px; */
background-color: rgba(68, 68, 68, 0.72);
color: #ffffff;
box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.38);
padding: 25px;
border-radius: 5px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.13);
font-family: 'Calibri', sans-serif;
/* font-weight: 700; */
z-index: 9999949;
}
Have you considered that your "product" may have position:relative, so that your top: 50% and left: 50%, is following relatively to your product rather than your wrapper/site?
I have a div in which I am trying to place div in the form of a box. The problem is I need to use position:absolute to maintain the flexibilty. But when I apply position: absolute the box goes out of the parent div.
Image with
.new-div{
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.7);
/*float: left;*/
min-width: 3em;
min-height: 2em;
max-width: 48ex;
margin: 2em;
padding: 1em;
margin-left: 70%;
position: absolute;
word-wrap:break-word;
top: 52%;
/*left: 50%;*/
/*right: -2%;*/
/*transform: translateX(-50%) translateY(-50%);*/
border: 1px solid rgb(200, 200, 200);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 16px;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
}
The moment I remove position: absolute it works fine.
But I need to use position:absolute. Can somebody please suggest a workaround.
Parent div position should be relative.
<div style='position:relative'>
<div class='new-div'>
</div>
</div>
I want to put a css tooltip on links inside a table.
Here's my markup :
<a class="tooltip" href="/link">
My link text
<span class="tooltip-span">
my tooltip text
</span>
</a>
Here's my css :
.tooltip {
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip .tooltip-span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover .tooltip-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);
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
padding: 0.8em 1em;
background: #F9F9F9;
border: 1px solid #D9D9D9;
color: black;
}
But, in some of my tables, the <td> tag has the css property overflow: hidden; causing the tooltip to stay hidden.
I really don't know how the overflow property could break my tooltip like that.. Can someone explain to me the relation ?
Thanks
Remove the overflow:hidden property? I can't think of any reason why you would use one inside a td unless you were trying to suppress the overflow from a div inside of it.
If the tooltip resides inside of the <td> then its susceptible to overflow, and thusly it is hidden as you instructed it to be using overflow:hidden.