CODEWITHSUNDEEP
htmlcss
Slava Fomin II
Slava Fomin II

Reputation: 28661

How to compose a layout like this?

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? )

Upvotes: 7

Views: 288

Answers (5)

bakkerjoeri
bakkerjoeri

Reputation: 223

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.*

Upvotes: 2

moopet
moopet

Reputation: 6185

I don't think it's going to be possible to completely achieve, though the closest solution is likely to involve:

Creating an element the same as the pill but larger. Absolute-position the new element so it is underneath the pill but make it larger. Give it the same background image as the main "oranges" picture but and fiddle with its background position so that it lines up correctly. This will obviously depend on the implementation of the rest of your css.

Upvotes: 1

user1440118
user1440118

Reputation:

If the pill is made with the selectors ":after" and ":before", you can create a gray div on the left and another on the right and entering the border radius near the pill as it but in the other side. Under the pill you can put a big grey one.

Upvotes: 0

Viktor S.
Viktor S.

Reputation: 12815

As for me - there is no really simple solution. But I would try to combine a block with rating using few divs. Idea is that you can prepare few images with gray background where bottom half is gray and transparent at top. Problem with pill itself could be solved by combining it from 3(?) divs. One for left rounded border - that can be an image with border, gray background etc and transparent part, where your underlying image will be visible. One for rating itself and one for right rounded corner. All will have background images built in a way that being located side by side, they will make that pill. And now you just need to shift that all up on your top image.

Upvotes: 1

Sauleil
Sauleil

Reputation: 2603

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.

Upvotes: 2

Related Questions