CODEWITHSUNDEEP
css
Arturo Sanz
Arturo Sanz

Reputation: 23

CSS alignment trouble

This one is for those CSS gurus out there...

I'm trying to align the elements of this progress meter properly and efficiently. Take a look at it here:

http://jsfiddle.net/arturo_sanz/UFPnZ/embedded/result/

It looks fine, however, I'm stuck with the alignment those labels, and my CCS is becoming too complex and not efficient. I'm especially worried about top: 4px; in line 47 which is an absolute reference while it should be a relative one. I'm not happy either with the #min CSS code in lines 21-26 but I couldn't find a better way to keep the bar away from the left label.

Here is the jsfiddle for you to check:

http://jsfiddle.net/arturo_sanz/UFPnZ/

I would appreciate any improvements to that CSS code ;)

Upvotes: 1

Views: 68

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

DEMO

HTML:

<div id="progbar" class="frame">
    <span id="min" class="min-max-label ui-widget">200</span>
    <span id="progressbar">
        <span class="progress-label">Loading...</span>
    </span>
    <span id="max" class="min-max-label ui-widget">300</span>
</div>

CSS:

#progBar {
    text-align: center;
    margin:0 auto;
}
#progBar span{
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    color: #CC0000;
}
#progressbar {
    position:relative;
    width: 60%;
    height: 36px;
    margin: 0 15px;
    border-color: #CC0000;
}
.ui-progressbar-value {
    position: absolute;
    top: 0;
    background: #CCCCCC url(http://download.jqueryui.com/themeroller/images/ui-bg_highlight-hard_100_cccccc_1x100.png) 50%;
}
.progress-label{
    position: relative;
    z-index: 1;
    top:4px;
}

Upvotes: 0

Shishir Chauhan
Shishir Chauhan

Reputation: 34

Here is the working code: http://jsfiddle.net/3A9kM/2/

Updated CSS: 

.progress-label {
    color: #CC0000;
    display: block;
    text-align: center;
    float: left;
    margin: 4px auto auto;
    width: 100%;
}
/*Removed position: absolute;top:4px;*/
/*Added: float: left;margin: 4px auto auto*/

Cheers!!! :)

Upvotes: 1

Robin
Robin

Reputation: 7895

A nice fix for line 47 is:

margin: 4px auto;

See my JSFiddle.

Much shorter, much prettier, much cleaner.

Upvotes: 0

Related Questions