chimney: (pic#3297470)
a scarlet thing ([personal profile] chimney) wrote in [community profile] pastries2012-10-21 07:04 pm
  • Add Memory
  • Share This Entry
Entry tags:

table codes 012

SO I HERD YOU LIEK HP BARS

make sure to keep EVERYTHING between the raw-code tags to get rid of icky extra space.
duplicate the div to add more entries
each bar+text is a ROW within the initial table
150px is the width of the BAR, aka the total amount of hp. make it longer or shorter if you wish
60px is the width of the FILLED IN CELL within the bar, also known as how much hp you have left. def change this however you want

EDIT code updated for the one without name/series. icons and bars will line up with each other.

status



code. with name/series


without name/series
features. text color, table border, cell fill, name/series: #333
modify the width as you like!
credit. please credit [community profile] pastries somewhere if not leaving it in the code.
Flat | Top-Level Comments Only
sables: (Default)

[personal profile] sables 2012-12-04 08:28 am (UTC)(link)
Hello! I'm trying to add more bars (up to six) and move down the icon accordingly so it's horizontally aligned to the centre of the bars, but can't quite figure out how to do that while keeping the rounded edges. Can that be done...?
tofindthesun: (ᴡᴀʟᴋɪɴɢ ᴏɴ sᴜɴsʜɪɴᴇ.)

[personal profile] tofindthesun 2012-12-04 08:48 am (UTC)(link)
there is! i've cleaned up some stuff and separated the bars from the rest of the code here. they'll both line up with each other now regardless of which one is shorter o/

sables: (Default)

[personal profile] sables 2012-12-04 08:58 am (UTC)(link)
I used that code and adding more bars resulted in this.

I managed to get this after fiddling with the original code, but I was hoping to align it more like this - so the image is aligned to the centre of the bars, but the rounded corners mess up. /o\
tofindthesun: (ᴅᴏɴ'ᴛ ɢᴇᴛ ʟᴏsᴛ ɪɴ ᴛʜᴏsᴇ ʟɪᴇs.)

[personal profile] tofindthesun 2012-12-04 09:01 am (UTC)(link)
WOAH weird. okay i think this should work better. apparently all the divs need to be vertically aligned for it to work, css you're so weird.

sables: (Default)

[personal profile] sables 2012-12-04 09:10 am (UTC)(link)
It works now, thank you so much! ♥
skyseer: ɪᴄoɴ: sᴋʏsᴇᴇʀ.ᴅʀᴇᴀᴍᴡɪᴅᴛʜ.ᴏʀɢ (Default)

[personal profile] skyseer 2012-12-22 07:56 pm (UTC)(link)
hi! i really like this design and thought it would be handy for a CR chart, with just one little edit. on firefox, everything looks fine; but on chrome and safari, the bars are all blacked out. how do i get it to look the same on chrome as it does on firefox?

here's the actual post, what it looks like in firefox, and what it looks like in chrome.

thanks!

(editing forever because i'm obviously tech stunted.)
Edited 2012-12-22 19:58 (UTC)
tofindthesun: (ʟᴀɴᴅ ᴏғ ᴏᴜʀ ᴘᴇᴏᴘʟᴇ ғᴏʀ ᴇᴠᴇʀ.)

[personal profile] tofindthesun 2012-12-22 08:11 pm (UTC)(link)
HM that is strange because it looks fine on my chrome* :|a you can add   where the blank part of the bar should go, or you can specify it with a little math.

for example, eridan's would be:
<td style="background:#333; width:70px; padding:0; margin:0;"> </td>
<td style="padding:0; margin:0; width:80px;"> </td>

or

<td style="background:#333; width:70px; padding:0; margin:0;"> </td>
<td style="padding:0; margin:0;">&nbsp;</td>

*i meant the original code worked and looked fine on chrome, your post does have all the bars blacked out for some reason.
Edited 2012-12-22 20:12 (UTC)

[personal profile] rocketchair 2012-12-23 12:14 am (UTC)(link)
HMM. :| i could have done something when i tried to edit it. thanks for the tips though! i'll try them out now.
Flat | Top-Level Comments Only