Need some CSS/HTML help to make a cool ribbon affect on my site

[Zoracle]

Hi all,

I would love some quick help on how to make this do what I want it to do. I want to make my subscribe button stick out a little bit more with a funny little message on top of a ribbon that wraps around the menu bar.
Here's the way it currently looks:

And this is how I'd like it to look:

I'd appreciate any help with this. I'm using a wordpress blog, I'm okay with css and html, so I'll understand what you're saying for the most part I just don't know the quickest and easiest way to implement this.

Thanks,
Zach

 

[chrishirst]

To make that work cross-browser. ....




... Use an image.

 

[Zoracle]

But how to make it go across the menu bar like that without any white breaks for margins?

 

[chrishirst]

With the green "ribbon" image (transparent background) positioned and at the top of the stacking order.

 

[Zoracle]

My first attempt

So this is my first attempt. I have to use mostly CSS code because it's wordpress and to change anything within wordpress is a PIA.

As you can see, my main problems are the Subscribe Box not being able to overflow the background image up into the margins, and a minor issue of the navigation bar ribbon going underneath the rulers.

For the Subscribe Box, I've tried changing z index, messing with padding and margins but still can't get it to overflow.

Here's my code:

#navigation {
...
background-image: url(image/rbn_02.jpg);
}

#header {
...
background-image: url(image/rbn_01.jpg);
}

#woo_subscribe-2 {
background-image: url(images/rbn_04.png);
background-position-y: 100px;
overflow: visible;
padding-top: 100px;
margin-top: -100px;
z-index: 5;
}

I'd love any advice you could offer, thanks.

 

[Ennesus]

Just make 1 elelement like a div with the class ribbon use one background image and position it absolute. Note: the parent container has to be position relative.

Also specify width,height, left and top

You can place a paragraph inside de ribbon for the text

 

[Zoracle]

Ennesus, thanks! You rule! That was waaaay easier than what I was trying to do. I've never really messed with relative and absolute positioning. Plus it works ACROSS BROWSERS which is the best!
check it out at www.thetruegeneralist.com

It looks sweet. Thanks again.
Z

 

[Phreaddee]

yeah one big fat image.
easy, true, but a shame all your text is images. that is poor form.

 

[Ennesus]

Yeah, word @Phreaddee, I've said to use a paragraph instead.
In my opinion the text is poorly placed.

I've did a implementation of a ribbon once check
http://www.skytours.nl/huishoudbeurs

Note that text always needs breathing space to be easely readable

 

[Phreaddee]

yes, I did read that ennesus (but the OP didnt!)