CSS Ribbons

HTML & CSS
1

The tutorial below shows how to create ribbons:

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

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. :slight_smile:

3

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

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. :slight_smile:

5

Did you mean something like this:


<!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>