Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Thanked 0 Times in 0 Posts

    CSS ribbon over image

    Hello codingforums.com,

    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 http://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 href="<?php the_permalink(); ?>"><?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>
    <?php endwhile; ?>
    <?php endif; ?>

    /***************** BLOG POSTS *****************/

    #post {
    margin-top: 6px;
    margin-left: 6px;
    margin-bottom: 26px;
    width: 515px;
    height: 198px;
    float: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cecece;

    .blog_picture {
    position: absolute;
    width: 515px;
    height: 177px;

    p {
    float: left;
    padding-top: 3px;
    padding-right: 44px;
    font-family: arial;
    font-size: 10px;
    color: #979797;

    h2 {
    padding-right: 4px;
    padding-top: 4px;
    float: left;
    width: 220px;
    height: 20px;
    text-align: right;
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #2b2b2b;
    background-color: #f4f4f4;
    border: 1px solid #cecece;

    h2.post {
    margin-top: 10px;
    margin-left: -15px;

    #shadow {
    background-image: url(img/post_title.png);
    width: 10px;
    height: 10px;
    position: absolute;
    margin-top: 36px;
    margin-left: -16px;
    Last edited by Nezky; 04-19-2011 at 10:49 PM. Reason: Added CSS

  2. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,250 Times in 2,237 Posts
    The z-index won't work on elements that do not have position:absolute/relative. Set position:relative; to h2.post


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts