CODEWITHSUNDEEP
htmlcss
Selina Andor
Selina Andor

Reputation: 3

Need help replicating this fairly simple box effect in HTML/CSS

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/

Upvotes: 0

Views: 487

Answers (2)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24536

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:

Upvotes: 1

mw1
mw1

Reputation: 1492

1) remove the absolute positioning for .totalscore and .ourscore 2) position score relatively 3) position the "ourscore" label absolutely

Here it is: http://jsfiddle.net/hammerbrostime/PGKNU/

Upvotes: 0

Related Questions