CSS ribbon over image

Hello WordPress forum!

This is my first post so I hope I don’t step on any rules here..

I am currently building a wordpress theme over at https://www.projectlightstyle.com/

And I want to have blogposts who just show a picture and no text (untill you click the picture and are linked to the post..)

Now, as you can see on the 2nd post (Hello world!) I have these ribbons for my blog post titles.. And I want them go above the pictures in the posts..

It’s no problem to do that if my blog picture doesn’t have the < a > tag, but as soon as I apply that.. It wont sit beneath the ribbon.. How can I fix this?

Here’s my code for a blog post

<div id="post">
<h2 class="post"></a><a>"><?php the_title(); ?></a></h2><div id="shadow"></div>
<div class="blog_picture"><?php the_content(); ?></div>
<div id="post_text"><p>Posted by Project Lightstyle</p> <p>0 Comments</p> <p>Genre: Dubstep</p> <p>15 March, 2011</p></div>
</div>
<?php endwhile; ?>
<?php endif; ?>

[CSS code moderated – the link to your site is sufficient to access the stylesheet]