SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Ribbons

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Ribbons

    The tutorial below shows how to create ribbons:

    http://css-tricks.com/snippets/css/ribbon/

    This works fine for me and gives the same end result as the tutorial.

    I however want to have a box underneath the ribbon displaying content under the header.

    Is it possible, based on the tutorial, to have a div that goes directy underneath/below the ribbon.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You might need to give a screen shot of what you mean. "Below" is a bit to vague. It's likelthat that what you want to do is quite doable, but we need to be sure what it is you want to do.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried loading a screenshot but sitepoint isn't allowing me upload images for some reason.

    What I want is a content box that goes directly between the left and right ribbon ends and directly below the ribbon header. Box should be flexible, maybe about 300px in height but with the flexibility to change depending on content.

    I'm sorry I couldn't give a screenshot as I know it would simplify matters.

    Thanks for the help.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Regarding screen shots, try clicking the Go Advanced tab as you are posting, and click the orange Manage Attachments button. That seems to work better for uploading images.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you mean something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .ribbon {
    	font-size: 16px !important;
    	/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
    	width: 50%;
    	position: relative;
    	background: #ba89b6;
    	color: #fff;
    	text-align: center;
    	padding: 1em 2em; /* Adjust to suit */
    	margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
    }
    .ribbon:before, .ribbon:after {
    	content: "";
    	position: absolute;
    	display: block;
    	bottom: -1em;
    	border: 1.5em solid #986794;
    	z-index: -1;
    }
    .ribbon:before {
    	left: -2em;
    	border-right-width: 1.5em;
    	border-left-color: transparent;
    }
    .ribbon:after {
    	right: -2em;
    	border-left-width: 1.5em;
    	border-right-color: transparent;
    }
    .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    	content: "";
    	position: absolute;
    	display: block;
    	border-style: solid;
    	border-color: #804f7c transparent transparent transparent;
    	bottom: -1em;
    }
    .ribbon .ribbon-content:before {
    	left: 0;
    	border-width: 1em 0 0 1em;
    }
    .ribbon .ribbon-content:after {
    	right: 0;
    	border-width: 1em 1em 0 0;
    }
    .content {
    	width: 50%;
    	margin:auto;
    	padding:.5em 1em; /* Adjust to suit */
    	margin:-3em auto 0;
    	background:red;
    }
    .content p { margin:0 0 1em }
    </style>
    </head>
    
    <body>
    <h1 class="ribbon"> <strong class="ribbon-content">Everybody loves ribbons</strong> </h1>
    <div class="content">
    		<p>Lorem ispum dolor sit amet lorem ispum dolr sit amet lorem ispum dolr sit ametl orem ispum dolor sit amet lorem ispum dolor sit amet lorem ispum dollr sit amet </p>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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