I am trying to add a ribbon/a way to highlight a particular cell in my table. I have found some code for a ribbon, but I can't get it to work with my table.
Presently I just get a square in the cell I want the ribbon to go in
Here is the fiddle
https://jsfiddle.net/4xwzuqpn/2/
The code for the ribbon:
thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }
thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }
You had an error with your CSS on line 233 on your jsFiddle (an extra } character).
That error caused your CSS rule:
thead th {
position: relative;
}
not to render. Once the error is fixed, the position: relative works and that fixes the position of the ribbon.
edit: Actually, anything under line 233 won't render. Not only the positioning, but the entire definition on your ribbon.
Check this out:
https://jsfiddle.net/4xwzuqpn/3/
Related
I have created a ribbon with css only. Now i want to make a 1px grey border around it. But the left and right side of the image are created already with a css border. is this possible to do that?
The image should look like this (you see the 1 px grey border):
This is the html and css i use to create the image:
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
}
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
}
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>
You can simplify you code by using skew transformation then you can easily adjust border:
.yellow-ribbon {
width: 120px;
height: 30px;
margin:20px;
background-color: #eedc08;
border:1px solid #000;
transform:skew(-30deg);
}
<div class="yellow-ribbon">
</div>
By the way if you want to keep your actual code you can rely on pseudo-element like this (but i don't recommend this solution as it makes the code even more complicated and we have above a simple one):
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
position: relative;
top: 1px;
}
/* create border around the left part */
.yellow-ribbon-top-left:before {
content: "";
position: absolute;
border-style: solid;
border-width: 32px 32px 0 0;
border-color: #000 transparent transparent transparent;
bottom: -1px;
z-index:-1
}
/* */
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
position:relative;
top:1px;
}
/* create border around the right part */
.yellow-ribbon-bottom-right:before {
content: "";
position: absolute;
border-style: solid;
border-width: 0 0 32px 32px;
border-color: transparent transparent #000 transparent;
top: -1px;
right: 0;
z-index:-1
}
/* */
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.
I'm trying to position a span so that it will be above it's sibling and "hang over" or be positioned on top of it's parent. The parent is relatively positioned.
Please view my fiddle to get the whole picture
What it currently looks like...
This is what I want it to look like...
The span (tooltip):
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 40px;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: 20px;
left: 263px;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
top: -26px;
width: 100px;
}
The parent element:
element.style {
display: block;
height: auto;
left: 488px;
outline: 0 none;
top: 100px;
width: 400px;
z-index: 1002;
}
.ui-dialog {
overflow: visible;
padding: 0.2em;
position: absolute;
width: 300px;
}
UPDATE
As suggested by Rohrbs, if I explicitly set the width of the span (tooltip) then it will indeed hang over the form. But this isn't practical since each tooltip could potentially display a different message. So my question now becomes - How can I set the width to be dynamic and still have the span (tooltip) hang over the form?
Style your .grid-window .control-group .controls to be position: relative; then only your absolute positioned .grid-window span.validation-message will work as you want.
See This Fiddle
Update
You wanted to be your tool-tip width variable so I have replaced the position: absolute; to position: relative; in .grid-window span.validation-message and added left: 175px; top: -25px; float: left; and also min-width: 0; max-width: 500px; width: auto; also work. to make this work as you want. Note to float is a must else it won't work.
So, main changes (most important part) are float: left; position: relative; to .grid-window span.validation-message and also you need not to declare position: relative; to .grid-window .control-group .controls
See This Fiddle
If you manually set the width in the class .grid-window span.validation-message to say width: 50%; it will hang over the edge like you want. You will just have to keep the message short enough to ensure proper fitment.
On the .ui-dialog .ui-dialog-content DIV just change the overflow from auto to visible, and it will help
I managed to resolve your issue with only minor changes to your CSS and HTML(class names).
You can see the results via your updated fiddle: http://jsfiddle.net/aNkSw/16/
I added a different class for each span, and tweaked only this CSS bit to:
.grid-window span.validation-message-id:after, .grid-window span.validation-message-name:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
width: 0;
position: absolute;
bottom: -16px;
left: 10px;
}
.grid-window span.validation-message-id {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -81px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
.grid-window span.validation-message-name {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -41px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
I can't say I agree with how you coded the whole thing though.
If you could use an extra element here's a solution I use a lot for this kind of positioning:
HTML:
<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>
CSS:
.validation-message-wrapper {
width:0;
position: absolute;
right: 70px;
top: 0;
height: 0;
}
The clue is to create a zero size reference point ( the .validation-message-wrapper ) position it where you want and then position your element in relation to it.
Here's a working demo: DEMO
I also did some other minor CSS changes just to tune it a bit:
.ui-dialog .ui-dialog-titlebar {
padding: 0.4em 1em;
position: relative;
}
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content:"";
height: 0;
left: 0;
bottom: -16px;
position: absolute;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: auto;
left: 0px;
bottom: 0;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
margin-top: -40px;
width: 200px;
}
I hope that helps.
If you'd like something more generic I've made a jQuery tooltip plugin (tipy) which is pretty easy to use and implement.
Does anyone know how to make edgy corners like in the following below? See how the edge wraps around the corner. I would like to know the term as well (if any). cross browser support (IE8 and up, bonus IE7) is a must. Thanks for any help.
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want.
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
JS Fiddle Example
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(DEMO)
I don't think IE 7/8 support the ::before pseudo-element, so if you want IE compatibility add another element and put ::before styles on it :)
That edgy corner is only a div with a triangle actually, you only need ONE element to do it.
<div id="myCorner"></div>
myCorner will be the div, and myCorner:after will be the triangle.
Check it out : http://jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}
Context
I did a pure CSS tooltip with pseudo-element :before and :after for the arrow.
The rendering is different from Chrome 16 to Firefox 9 and 10.
You see what's wrong?
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/ reproduces the same issue.
Code
html:
<span class="tooltip">Déposez votre fichier dans ce dossier</span>
css:
span.tooltip {
display: inline-block;
background: #eee;
margin-left: 20px;
padding: 0 10px;
color: #111;
border-radius: 2px;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
line-height: 1.5;
position: relative;
}
span.tooltip:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent #eee transparent transparent;
left: -18px;
top: -1px;
z-index: 1;
}
span.tooltip:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 11px;
border-color: transparent #bbb transparent transparent;
left: -21px;
top: -2px;
z-index: 0;
}
body {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
}
May be Instead of transparent you have to write this rgba(238,238,238,0)in your css check this for more
CSS Transparent Border Problem In Firefox 4?
Solution
I juste removed a few pixels, which corrected the rendering on Firefox.
The rendering is not identical but close enough.
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/1/
Modified code
span.tooltip:after {
border-width: 10px;
left: -19px;
top: -1px;
}