CODEWITHSUNDEEP
html
Baz
Baz

Reputation: 13145

Add scale to HTML page

Here is my attempt. The width of each column is not the same, how can I fix that?

Have you a better suggestion on how to do a scale using div instead of table? 

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=10 border-style=outset>
    <TR>
    <TD BGCOLOR="#ffffff">
    <TD BGCOLOR="#ffcccc">
    <TD BGCOLOR="#ff8888">
    <TD BGCOLOR="#ff4444">
    <TD BGCOLOR="#ff0000">
    </TR>
    <TR>
    <TD id="a">20</TD>
    <TD id="b">40</TD>
    <TD id="c">60</TD>
    <TD id="d">80</TD>
    <TD id="e">100</td>
    </TR>
</table>

Upvotes: 0

Views: 545

Answers (3)

Jay
Jay

Reputation: 19867

The question is a little vague & I'm not sure what you mean by a scale, but going off of @Keith's comment you could do a color gradient like so. See a working example here (jsfiddle)

HTML:

<div id="scale">
    <div>20</div>
    <div>40</div>
    <div>60</div>
    <div>80</div>
    <div>100</div>
</div>​

CSS:

#scale div {
    float: left;
    width: 50px;
    padding: 10px;
    border: 1px #333 solid;
}

JavaScript (jQuery):

$(document).ready(function() {

    var scales = $('#scale').children('div');
    var length = scales.length;
    console.log(scales);
    // loop through all the scales
    scales.each(function(idx, scale) {
        var red = 255;
        var green = 255 - (idx / length) * 255;
        var blue = 255 - (idx / length) * 255;
        var rgb = 'rgb(' + red + ',' + green + ',' + blue + ')'
        $(scale).css('background-color', rgb);
    });

});​

Adjust the colors in the JavaScript & the CSS to fit your sites needs - as of now it's red as you had it in your question.

EDIT: If this isn't going to be changed all that much or isn't dynamic in nature, you may be better off with a static solution. You can view that here (jsfiddle) where I've used CSS and hard coded in the colors for each "percent".

Upvotes: 0

Shmiddty
Shmiddty

Reputation: 13967

This fiddle will show you one way to create scaling areas: http://jsfiddle.net/aL2ME/

You simply adjust the width property of the nested divs to the appropriate percentage.

Upvotes: 1

secretformula
secretformula

Reputation: 6432

You should use a <div> that has it's position and size defined using %s rather than actual values. This would allow your page to scale as the window size changes.

Upvotes: 0

Related Questions