Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: CSS Ribbon

  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Thanked 0 Times in 0 Posts

    CSS Ribbon

    Hey all, I'm trying to create a ribbon with css like seen on this page: http://www.sitepoint.com/pure-css3-ribbons/

    The problem is, instead of it appearing at the edge of a page, I want it to appear at the edge of a div (in this case, col-1) that could appear anywhere on the page. I'm not sure this is possible, but I want to get your thoughts. For starters, I removed the top: 12px. That made a big difference. But it still appears at the edge of the page rather than the div. Any advice?

    	position: relative;
    	width: 50%;
    	font-size: 1.5em;
    	font-weight: bold;
    	padding: 6px 20px 6px 70px;
    	margin: 30px 10px 10px -70px;
    	color: #555;
    	background-color: #999;
    	text-shadow: 0px 1px 2px #bbb;
    	-webkit-box-shadow: 0px 2px 4px #888;
    	-moz-box-shadow: 0px 2px 4px #888;
    	box-shadow: 0px 2px 4px #888;
    	content: ' ';
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: 0px;
    	top: 100%;
    	border-width: 5px 10px;
    	border-style: solid;
    	border-color: #666 #666 transparent transparent;
    	content: ' ';
    	position: absolute;
    	width: 30px;
    	height: 0;
    	left: -30px;
    	border-width: 20px 10px;
    	border-style: solid;
    	border-color: #999 #999 #999 transparent;
    .col-1 {
    	width: 26%;
    	float: left;
    	padding-left: 5%;
    	padding-bottom: 2%;
    Last edited by javanewbie7; 02-21-2013 at 06:17 PM.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,292 Times in 1,262 Posts
    If that h2 is inside col-1 you might wanna try positioning the h2 absolute and the col-1 relative so that the h2 positions itself relative to the col-1, not the page.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts