Home/ Questions/Q 7947515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:27:12+00:00

I’m trying to replicate the basic effect of the rating boxes that the verge

  • 0

I’m trying to replicate the basic effect of the rating boxes that the verge uses (you can see it here: http://www.theverge.com/2012/5/9/3002183/airplay-speaker-review-iphone at the bottom) but I keep having issues with my text alignment. Right now I have this:

            <div class="product-score-box">
                <div class="score"> 
                    <span class="totalscore">
                        <?php echo aff_the_rating();?>
                    </span>
                    <span class="ourscore">Our Score</span> 
                </div>
                <a href="#" class="product-score-cta">Leave Review</a>
            </div>

CSS: 

            .product-score-cta { right:0; left: 0; bottom:5px; color:white;}
            .ourscore {bottom:8px;}
            .totalscore {top:10px; font-size:70px; line-height:70px;}
            .ourscore,.totalscore,.product-score-cta {position:absolute;  }
            .score {
                height:115px;
                color:white;
                background:#f48b1b;
                position:relative;
                }

            .product-score-box {
                display: block;
                position: absolute;
                top:20px;
                right:10px;
                color: white;
                font-family: 'DINCond-MediumRegular';
                background: black;
                text-align: center;
                z-index: 20;
                overflow: hidden;
                font-size: 16px;
                line-height: 100%;
                width:130px;
                height:140px;
                }

On Firefox, the text in .score doesn’t align to the center and in Chrome, it’s aligned strangely (like it’s justified? or something). I am absolutely terrible at absolute positioning! If someone could help me get a similar effect, I would be forever grateful.

EDIT: http://jsfiddle.net/wQrZr/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So i’ve replicated it to what extent is possible given your markup and standard font selections, but the layout should be correct.

    Setting an absolute width to the elements inside the box and giving them a left: 0; seemed to do it straight up and some additional styling added to the leave review element made it closer to the verges’

    The Css:

    * { font-family: Tahoma; }   

.product-score-cta { right:0; left: 0; bottom:5px; font-size: 14px; text-decoration: none; color: #EEE;}
            .ourscore {bottom:12px; font-size: 18px; font-style: italic;}
            .totalscore {top:10px; font-size:70px; line-height:70px;width:130px; position: absolute;}
            .ourscore,.totalscore,.product-score-cta {position:absolute; width: 130px; left: 0px;}
        .score {
            height:115px;
            color:white;
            background:#f48b1b;
            position:relative;
            }

        .product-score-box {
            display: block;
            position: absolute;
            top:20px;
            right:10px;
            color: white;
            font-family: 'DINCond-MediumRegular';
            background: black;
            text-align: center;
            z-index: 20;
            overflow: hidden;
            font-size: 16px;
            line-height: 100%;
            width:130px;
            height:140px;
            }   ​

    REFERENCE:

    • 0