How to compose a layout like this?

Question

The first image here is a draft created by web-designers.

The second image here is my result of creating a proper HTML/CSS layout for this.

The question is: how can i create this transparent field around a rating pill using only proper HTML5 and CSS. Solution must be cross-browser and super-compatible (including IE7 and higher).

The rating pill width is not fixed, it depends on number inside it, so the transparent field must reflect this.

Here's my current layout:

<div class="evo-module-c4b style="background-image: url('/i/oranges.jpg');">

    <div class="price">
        <span class="icon"></span>
        <span class="value">10,950</span>
    </div>

    <div class="die"></div>

    <div class="rating-wrapper">
        <div class="evo-rating">
            <span class="value">+100500</span>
        </div>
    </div>

    <div class="content">
        <h2>Lorem ipsum dolor</h2>
        <p class="author">Donec et</p>
        <p class="data">24.08.2012 10:53</p>
        <h3>Nunc pellentesque justo diam, sed dictum dolor.</h3>
    </div>

</div>

LESS:

div.evo-module-c4b {
    position: relative;
    width: @module-big-width;
    height: 250px;
    background-color: @color-gray-1;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;

    div.price {
        position: absolute;
        top: 18px;
        right: 24px;
        span.icon {
            display: block;
            float: left;
            width: 16px;
            height: 16px;
            background-image: url('/i/evo/icons-imageset.png');
            background-position: -20px 0;
            background-repeat: no-repeat;
        }
        span.value {
            display: block;
            float: left;
            margin-left: 4px;
            font-size: 18px;
            font-weight: bold;
            color: @color-white;
        }
    }

    div.die {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 108px;
        background-color: @color-gray-10;
        //background-image: url('/i/evo/modules/c4b/die.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        z-index: 0;
    }

    div.rating-wrapper {
        position: absolute;
        width: 100%;
        top: 122px;
        text-align: center;
        div.evo-rating {
            display: inline-block;
        }
    }

    div.content {
        position: absolute;
        left: 0;
        top: 172px;
        width: 100%;
        z-index: 1;

        h2, h3, p {
            margin: 0;
            padding: 0;
            line-height: normal;
            text-align: center;
        }

        h2 {
            font-size: 18px;
            font-weight: bold;
        }

        p.author {
            font-size: 12px;
            font-weight: bold;
        }

        p.data {
            font-size: 10px;
            color: @color-gray-4;
        }

        h3 {
            font-size: 12px;
            color: @color-gray-4;
        }
    }
}

div.evo-rating {
    span.value {
        .evo-border-radius(@rating-height / 2 + 3px);
        display: block;
        height: @rating-height;
        font-size: 18px;
        font-weight: bold;
        line-height: @rating-height;
        color: @color-major;
        background-color: @color-white;
        border: 3px solid @color-major;
        padding: 0 5px;
    }
}

Any suggestions? )

Answer 1

Change your grey background for an image with alpha for the hole and add it over the picture. You might need different sizes since the width might change.

Answer 2

From the comment provided by moopet I have constructed this answer and made a jsFiddle illustrating his idea

Page structure

I'm working with the assumption that this is the HTML that structures your page:

<div class="picture">

  <div class="pill-wrapper">
    <div class="pill">+1030</div>
  </div>

  <div class="content">
  </div>    

</div>​

How will we approach this transparent pill border?

Working out the idea that moopet gave us in the comments, you could absolutely position the .pill-wrapper (and find a correct center position using LESS variables*). Giving this .pill-wrapper a padding and border-radius, you can then use backgrounds to create a faux transparent border. Simply set the background to match picture that is shown and use background-position to match the rating pill's position on the page (again, usage of LESS variables will probably make this nice and easy).

How does this translate to CSS?

Please study the CSS presented below. Note that only essential CSS is shown. Any font styling should be applied by yourself.

.picture {
  position: absolute;

  width: 100%;
  height: 500px;

  background: url('http://goo.gl/Zi4hw');
}

.pill {
  box-sizing: border-box;

  width: auto;
  height: 36px;
  padding: 5px;

  background: #0066aa;
  border-radius: 18px;
  border: 2px solid #ffffff;
}

.pill-wrapper {
  position: absolute;
  top: 225px;
  left: 100px;

  height: 36px;
  padding: 10px;  

  background: url('http://goo.gl/Zi4hw') -100px -225px;
  border-radius: 36px;

}

.content {
  height: 250px;
  margin-top: 250px;
  background: rgba(255,255,255,0.9);
}

There are definite problems with this method. Note firstly that, even though LESS will preprocess everything, it is not dynamic or fluid and additional Javascript should probably and regrettably work to account for keeping the pill centered during horizontal browser resizing, for instance. Secondly, there are probably some compatibility problems that should be looked into.

But the basics are here for you to work from.

You can see the proposed solution in action here: http://jsfiddle.net/bakkerjoeri/R99NT/3/

**: I have no experience coding in LESS, so my apologies for anything faulty I am assuming. Feel free to correct me.*