CODEWITHSUNDEEP
htmlcss
yoyo
yoyo

Reputation: 55

How to position CSS Ribbon to go over one table cell

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; }

Upvotes: 0

Views: 509

Answers (1)

Narxx
Narxx

Reputation: 8299

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/

Upvotes: 1

Related Questions