Hello All:

I am more a web programmer than a designer, but currently my job requires me to know more about web design. Sorry if the question is naive to the pros.

Stuck in this problem for hours, don't know what to do...

Please go the my blog and check the bottom part: my blog

It has a wax seal style rss feed image, with ribbon. I want to have the ribbon lay above the background color(the parchment paper, that is) so to dislay the wooden background. But I failed in this for hours... Done some research online and tried several different ways...Still with no luck.

The visual effect I wanna achieve can be found on this webpage: The image of the father and his child illustrates what I want to have : http://www.havocinspired.co.uk/

Please use FireBug and check my css stylesheet. I use a tool called Artiseer to help me get around the fundamentals. So perhaps that's how everything looks so messy under the hood.

Thanks a lot in advance!

  • This is how it looks now, not exactly what I wanna have: i35.tinypic.com/2vwibna.jpg MichaelMao almost 10 years ago

2 answers


I'm not 100% clear on what you're trying to do, but it sounds like you basically want to shift the wax seal from where it is to a slightly different position. Probably the quickest way to do that, is wrap a div around your image, set it to position:relative, and set pixel values to top and left until it's where you want it to be. Quick example...

<div id="wax_seal" style="position:relative; top:25px; left:0px;"><img src="blahblah" /></div>

This div will move the wax seal from where it's at now, down 25 pixels. So, wherever you want it to go, change the top and left pixel values accordingly. You don't necessarily need the "id" but it's a good idea to label your divs.

Answered almost 10 years ago by Dave Coykendall

Adding internal margins (padding) on the div surrounding the footer should do the trick. There will be room for the bottom of the ribbon (60px approx.).

.art-Sheet-body {
  padding: 8px 8px 60px 8px;

You currently have 8px in all directions and with the above padding instruction, it'll be 8px on top, then same value on right then 60px of padding-bottom and finally 8px on left.

edit: Firebug tells me you already have an .art-Sheet-body selector in style.css on line ~100 with padding: 8px This must be overwritten and that's where the 3x 8px come from, obviously.

Answered almost 10 years ago by Felipe Alsacreations