Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    126
    Thanks
    26
    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?

    Code:
    h2
    {
    	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;
    }
    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;
    }
    
    h2:before
    {
    	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
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 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
    •