Ally «my eyes are on you yeah» (kickawesome) wrote,
@ 2011-01-07 07:41:00

[Code] Working House Thermometers

Live Examples

1000 pts

900 pts

500 pts

0 pts

Code - Table of all 4

<lj-raw><table cellspacing="25px">
<tr>
<td>
<div style="height: 330px;width: 100px;background: url(http://img407.imageshack.us/img407/802/thermred.png) no-repeat 0 30px;">
<div style="background: url(http://img717.imageshack.us/img717/328/thermsignred.png) no-repeat 0 0;width:80px;color: #ffffff;padding:0 0 0 18px;margin:0 0 0 39px;">
<div style="padding:5px 0 0 0;text-align:left;font-size:13px;text-shadow:0 1px 1px #222222;">
<b>1000 pts</b>
<div style="padding:20px 0 0 0;">
<div style="background: url(http://img257.imageshack.us/img257/3626/thermcoverred.png) repeat-y 0 0;width:21px;;margin:0 0 0 -40px;height:212px;">
</div></div></div></div></div></td>

Code - Red

Images

Code - Blue

Images

Code - Yellow

Images

Code - Green

Images

Altering the point total...

Find <b>1000 pts</b> change 1000 to any number desired.

Altering the mercury height...

You will have to change numbers in two places. They relate to each other. #THISISIMPORTANT

Find padding:20px 0 0 0; towards the middle and height:212px; at the very end. To lower the mercury, reduce height:212px; and increase padding:20px 0 0 0; by the same number of pixels to desired level.

Maximum mercury height: padding:20px 0 0 0; ... height:212px;
Minimum mercury height: padding:242px 0 0 0; ... height:0px;

Inspired By: The Music Empowers Thermometer

Questions/Feedback?
Leave a comment to this post. Thanks!

scribbld is part of the horse.13 network
Design by Jimmy B.
Logo created by hitsuzen.
Scribbld System Status