I'm trying to position a ribbon image on one of my websites. Unfortunately I can't figure out why it doesn't work as I want it to. I used position: relative; and position: absolute; to do all the positioning stuff but the problem is that the image is not on top:

Ribbon

I've used to following code:

.ribbon { position: relative; }
.ribbon h3 {
    background: url("images/ribbon.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-family: Tahoma,arial,serif;
    font-size: 1.4em;
    height: 34px;
    padding: 7px 0 0 17px;
    position: absolute;
    right: -36px;
    width: 244px;
    z-index: 200;
}

If you want to take a look at the website you can do it on this link (user: tmp / pass: tmpuser).

It should look like this:

Ribbon

Thanks so much for your help! Dennis

share|improve this question

0% accept rate
4  
The link gives a 404 error ("Oops! The Page Can Not Be Found!"). – Peter Olson Apr 7 '11 at 20:14
Is the screenshot what you want it to look like or how it's coming out? – Anthony Apr 7 '11 at 20:15
@Peter Of The Corn: The link works for me, but please try this one instead (same user/pass). – dennis3484 Apr 7 '11 at 20:21
1  
@Dennis - Getting a "No Pages Found" error message on both links – My Head Hurts Apr 7 '11 at 20:22
2  
Does the parent container have overflow:hidden assigned to it? I had a different issue with the link you supplied - I was able to enter the username and password but then I got a warning of malicious content etc. Might be best if you put up a sample of your HTML and CSS up on jsfiddle.net – Dan Apr 7 '11 at 23:51
show 3 more comments
feedback

1 Answer

It looks like the outer DIV width is too small to fit all and it's pushing the image down.

Try setting up the width of the main / wrapping DIV to a larger width and see if that works.

share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.