I have this code:
How can I make it have that arrow thing at the top:
like this:
so it can look like a popup?
Here is the styling for it:
.div-cancel{
background-color: #FAFAFA;
width:200px;
display:none;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px
}
<div class="div-cancel" id="cancel101" >
<span><span style="background-color: #FAAB20;"><i class="fa fa-exclamation" style="width:25px;color:white"></i></span>
Please type in 'CANCEL' to cancel subscription. </span>
</div>
Here is the demo.
The Css solution is:
.div-cancel {
background-color: #1E2021;
width:200px;
display:block;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px;
position: relative;
color: #ababab;
}
.div-cancel:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
You can use this CSS with the unchanged HTML shown in the question.
If you want a border around your arrow, using transform on the ::before pseudo element and some positioning, can get the affect that you want without any added markup. Just make sure div-cancel has it's position set to relative.
.div-cancel {
position: relative;
margin-top: 20px;
background-color: #FAFAFA;
width: 200px;
height: 85px;
font-size: 15px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid grey;
}
.div-cancel::before {
position: absolute;
top: -4px;
left: 5px;
width: 5px;
height: 5px;
border: 1px solid grey;
border-bottom: 0;
border-right: 0;
background: #fff;
transform: rotate(45deg);
content: '';
}
<div class="div-cancel" id="cancel101">
<span>
<span style="background-color: #FAAB20;">
<i class="fa fa-exclamation" style="width:25px;color:white"></i>
</span> Please type in 'CANCEL' to cancel subscription.
</span>
</div>
Related
I'm trying to float a number on the right top of an image.
I want this number to have a background-color and overlay on top of a small portion of the image on the right top corner.
I have tried :
<li class=topoulimg><span id=bell><img src=img-img/bell.png alt=alerts></span><span class=bellnumbers>10</span></li>
css
.bellnumbers{
float:right;
font-size:12px;
background-color:red;
width:10px;
height:10px;
color:#fff;
}
but it is not working.
http://jsfiddle.net/yv5q4gvm/
Use position:absolute instead float:right for your badge (Adjust your needs).
CSS
.bell {
display: inline-block;
position: relative;
width:64px;
}
.bellnumbers {
position: absolute;
font-size:12px;
background-color:red;
width:14px;
height:14px;
color:#fff;
top: -4px;
right: -4px;
}
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
DEMO HERE
You can try this...
<span class="bell">
<img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts>
<span class="bellnumbers">10</span>
</span>
.bell {
display: inline-block;
position: relative;
background-color: #eee;
width: 48px;
height: 42px;
text-align: center;
padding-top: 6px;
}
.bell img {
width: 24px;
height: 24px;
padding-top: 10px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 28px;
}
JSFiddle
Insert content from html attribute (data-count).
<button data-count="16"></button>
Insert content before every <button> element's content, and style the inserted content:
button:before {
content: attr(data-count);
}
See the live example below:
button {
position: relative;
width: 64px;
height: 64px;
margin: 10px;
background-image: url("https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png");
background-color: white
}
button:before {
content: attr(data-count);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
display: block;
border-radius: 20%;
background: #FF9727;
border: 1px solid #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
color: #FFF;
position: absolute;
top: -10px;
left: -10px;
}
button.bell-top-right:before {
left: auto;
right: -10px;
}
button.bell-bottom-right:before {
left: auto;
top: auto;
right: -10px;
bottom: -10px;
}
button.bell-bottom-left:before {
top: auto;
bottom: -10px;
}
<button data-count="16" class="bell-top-right"></button>
<button data-count="16" class="bell-bottom-right"></button>
<button data-count="16"></button>
<button data-count="16" class="bell-bottom-left"></button>
try this.. perhaps it will solve your purpose (try bootstrap badges that can be a help to)
<li>
<span class=bell>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class=bellnumbers>10</span>
</span>
</li>
<style>
.bellnumbers{
vertical-align: top;
font-size:17px;
letter-spacing: 3px;
background-color:#F06861;
width:27px;
height:22px;
color:#fff;
border-radius: 3px;
padding-top: 3px;
text-align: center;
position: absolute;
margin-left: -1%;
margin-top: -5px;
}
.bell{
width:64px;
margin-top: 5%;
}
</style>
As others have shown, absolute/relative positioning and 'inline-block' on the li are ideal for this. I've got the code trimmed down quite a bit, however. Demo here: https://jsfiddle.net/r09d314v/
<style type="text/css">
li {
display: inline-block;
list-style-type: none;
position: relative;
}
span {
position: absolute;
top: -8px;
right: -10px;
background: red;
color: white;
padding: 2px;
}
</style>
<li>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class="number">11</span>
</li>
I have the following code where I have a Button that has the arrow hack. The only issue is I'd like to have this display the link on the status bar. A button does not achieve. How do I convert this to a a href link and still be able to keep that arrow? Here is my code:
JSFIDDLE
HTML:
<button type="button" class="btn-lg btn-default my-button my-button-active">My Button</button>
CSS:
.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
It is very simple. Just convert the button to a and add display: block; or display: inline-block; to the class .my-button.
Fiddle link: http://jsfiddle.net/samirkumardas/60n0ruyj/2/
Change your html to an anchor tag:
<a class="btn-lg btn-default my-button my-button-active" href="">My Button that links to some other page</a>
Replace your .my-button selector with:
.my-button {
display: block;
position: relative;
color: #fff;
background-color: #444346;
font-size:15px;
padding: 20px 0;
text-align: center;
border: none;
margin-right: 20px;
outline: 0;
width: 31%;
}
Just change your button to an anchor and adjust your css.
div {
margin: 30px;
}
a.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
display: inline-block;
text-align: center;
}
.my-button:hover {
text-decoration: none;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
My Button that links to some other page
</div>
After changing your <button> tag to an <a> tag, the key thing is to have display: block; applied to it, as <a> tags are primarily inline elements and cannot have padding and margin.
i am try to dsiplay span text over the image when mouse hover the div.
i am try this.
html
<div id="some-div">
<a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
<span id="some-element">Dounald
</span></a>
</div>
css look like this
<style>
#some-div{
position:relative
}
#some-element {
width:100px;
height:100px;
border: 1px solid orange;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0;
background:rgba(255,79,50,.5);
color:Black !important;
margin-top:2px;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
#some-div:hover #some-element {
display: block;
position: relative;
cursor: pointer;
color:#FFFFFF;
}
a{
position: relative;
}
.type_border {
width: 100px;
height: 100px;
background: white;
position: absolute;
}
.round_border {
float: left;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
background: white;
}
</style>
Add position: absolute to span and position:relative to main div
#some-div{
position:relative
}
#some-element {
width:80px;
border: 1px solid #ccc;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0
}
DEMO
Use Title.
<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
If you want text to be displayed on mouse hover image.
You can simply do it by using title attribute of html image element
For ex:
You will be able to see that text when mouse hoveered.
Hope this helps..
Unfortunately as far as i know you cannot insert text on the image.
Workaround for this is to have span in a div which is having background image can work
#some-div{
background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
background-repeat:no-repeat;
}
check this link http://jsfiddle.net/sy6MG/
I have a custom CSS Tooltip that when it appears, it pushes the other content down. I know that I need to add position: absolute to get it working right, but I can't seem to figure out where...
HTML:
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<div class="outer">
<a class="tippy" href="">
ICON<img src="" class="icon"/>
</a>
<div class="tooltip">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
</div><!-- Container -->
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
CSS:
.outer {
width: 350px;
}
.tippy {
text-decoration: none;
}
a.tippy:hover + div {
display:block;
float: right;
}
.tooltip {
margin-left: 5px;
margin-top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.tooltip:after, .tooltip:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.tooltip:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.tooltip:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Fiddle:
You need to change position:relative to position:absolute in the .tooltip CSS block.
You will also need to modify the CSS for positioning the tooltip due to this change.
If you modify .outer to have position:relative this is as simple as setting .tooltip as
left:55px;
top:-15px;
The resulting CSS (showing only the blocks that have changed):
.outer {
width: 350px;
position:relative;
}
.tooltip {
left: 55px;
top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: absolute;
border: 2px solid #333;
display: none;
}
And finally a jsFiddle showing it in action.
I'm looking for a way to implement a bracket style border around my <h2> headings; I've attached an image showing exactly what I'm trying to accomplish.
The only way I can think of to achieve this effect is by using images, but I'm unsure of exactly how to do so(all of my <h2>s are of varying length/height, or if maybe there is a better way.
Any tips & insight are greatly appreciated.
**I hate to resurrect this, but what can I look towards as being the solution to the problem shown int he updated image? The right line is too far right, as well as some opacity issues above and below the text..
UPDATE:
Working jsFiddle example.
Use the following. You just need to change the font of the text or replace it for an image, and maybe change the color of the borders to match yours.
For the HTML:
<div id="h2pre"></div>
<h2>
<div id="h2inpre"></div>
<div id="h2cont">Ready for the event of a lifetime?<br/>
We'd love to hear from you.
</div>
<div id="h2inpos"></div>
</h2>
For the CSS:
h2{
text-align:center;
position:relative;
margin-left:50%;
left:-150px
}
div{ float:left; }
#h2inpre, #h2inpos{
background-color:#fff;
height:50px;
width:20px;
border-bottom:1px solid #FFA500;
border-top:1px solid #FFA500;
}
#h2inpre{
border-left:1px solid #FFA500;
}
#h2inpos{
border-right:1px solid #FFA500;
clear:right;
}
#h2cont{
font-family:"Arial",sans-serif;
padding:5px;
background-color:#fff;
}
#h2pre{
height:1px;
width:100%;
background-color:#FFA500;
margin-top:25px;
position:absolute;
float:none;
}
html:
<h2 class="bracket"><span class="text">Ready for the event of a lifetime?<br>We'd love to hear from you.</span></h2>
css:
.bracket {
position: relative;
text-align: center;
color: #999;
font-size: 1.2em;
}
.bracket:before {/* vertical stripe */
content: " ";
border-top: solid 1px orange;
position: absolute;
bottom: 50%;
left: 0;
right: 0;
}
.bracket .text {
position: relative;
display: inline-block;
background: #fff;
padding: .2em 1em;
max-width: 80%;/* force that at least some of vertical stripe is still shown */
}
.bracket .text:before {/*left bracket*/
content: " ";
border: solid 1px orange;
border-right: 0px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
.bracket .text:after {/*right bracket*/
content: " ";
border: solid 1px orange;
border-left: 0px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
demo: http://jsbin.com/ibiyal/2
You'll probably have to tinker with the padding of the text block, and the width of the left and right bracket.
Only downside is that it only works on a solid background.
It is perfectly possible. Take a look: http://tinkerbin.com/zQ1VWLLi
The HTML...
<h2 class="box">
<span>Ready for the event of a lifetime? <br/> We'd love to hear from you.</span>
</h2>
The CSS...
h2:before,
h2 span:before,
h2 span:after {
content: "";
position: absolute;
}
h2 {
position: relative;
font: 16px/1.2em cambria;
text-align: center;
}
h2:before {
top: 50%;
height: 1px; width: 100%;
background-color: orange;
}
h2 span {
display: block;
width: 50%;
padding: 7px;
margin: 0 auto;
position: relative;
background: /*same as background where it sits*/;
border: 1px solid orange;
}
h2 span:before,
h2 span:after {
left: 7%; right: 7%;
height: 1px;
background: /*same as background where it sits*/;
}
h2 span:before {
top: -1px;
}
h2 span:after {
bottom: -1px
}
You could do this with HTML and CSS.
CSS
#container {
position: relative;
height: 43px;
}
#bracks {
background-color: #fff;
margin:0 auto;
border: 1px solid black;
width: 200px;
height: 40px;
position: relative;
}
#text {
background-color: #fff;
position: absolute;
width: 150;
left: 15;
height: 22px;
top: -1;
padding: 10px;
text-align: center;
}
#strike {
position: absolute;
top: 21;
width: 100%;
border-top: 1px solid black;
}
HTML
<div id="container">
<div id="strike"> </div>
<div id="bracks">
<div id="text">Some text here.</div>
</div>
</div>