CR Chart: Powered-Up Pac-Man

[prospitian]

This CR chart goes straight down. There are little icons at the top and if you click on them, they'll bring you right to the character!
See it live!


Part 1: Base Code
Start with this code.
<raw-code> <center> <table><tr><td><div style="width:600px;"> <!--NAVIGATION ICONS--> </div> <br> <div style="width:600px;"> <div style="width:500px; float:right; border-left:10px dotted #[COLORCODE];"> <table style="margin-left:-100px;"> <!--CHARACTER BLURBS--> </table></div> <span style="width:600px; float:right;">code by <a href="http://photosynthesis.dreamwidth.org/" style="text-decoration:none; color:#[COLORCODE];">photosynthesis</a></span></div></td></tr></table></center></raw-code>

Find and replace this piece of text. Make sure you include and remove the [BRACKETS] in all cases!

[COLORCODE]

This shows up twice: once for the border color, and once for the credit link at the bottom. Should be a hex code, don't include the # sign. In the example I only used one color, and if you want to follow suit, you can wait until you've pieced the rest of the code together and then do one sweeping find-and-replace to take care of all the color codes at once.

Part 2: Navigation Icons
Find <!--NAVIGATION ICONS--> in the base code. This code should go directly underneath that line for each character you're adding.

<a href="#[LINKNAME]"><img src="[IMGURL]" style="width:50px; height:50px; border-radius:50px; border:5px solid #[COLORCODE]; margin-left:10px;"></a>

Here's what you need to replace in this one:

[LINKNAME]	Can be anything (the character's name is probably the best way to go; it'll support spaces and apostrophes and such, so go nuts. It has to be unique from all the other characters' link names!
[IMGURL]	The userpic URL.
[COLORCODE]	Hex code for the userpic's border color.

Part 3: Character Blurbs
Find <!--CHARACTER BLURBS--> in the base code. This code should go directly underneath that line for each character you're adding.

<tr><td> <a name="[LINKNAME]"><img src="[IMGURL]" align="left" style="border:10px solid #[COLORCODE]; border-radius:100px;"><a></td> <td style="vertical-align:top;"> <span style="display:block; margin-top:10px; margin-bottom:10px; margin-left:0px; padding:5px; font:italic 16px Georgia; background-color:#[COLORCODE]; color:#[NAMECOLOR]; text-align:right; width:455px;">[NAME]</span> [BLURB]</td></tr> <tr><td colspan="2" height="20px"></td></tr>

[LINKNAME]	This should be exactly the same as the LINKNAME you used for this character in part 2.
[IMGURL]	The userpic URL.
[COLORCODE]	This shows up twice: once for the userpic image's border and once for the background color for the name box.
[NAMECOLOR]	A hex code for the font color for the name box.
[NAME]	The character's name.
[BLURB]	The text for the blurb.

As always, if you need help with any of this or you've encountered any problems, let me know!

Comments

[strawberrysorbae]

Hello there! Sorry to bother you, but I've gone in and looked at the code several times, but I can't get it to look like yours does. If it's not too much trouble, could you take a look and see where I might be messing up? You can see the post here: http://strawberrysorbae.dreamwidth.org/1293.html

[prospitian]

Not a bother at all! This one's actually my bad completely; sorry about that! I didn't account for the way the code would auto-adjust widths, so it only ends up looking like that if you have at least one blurb in the list that's longer than a full line. That's fixable, though! Right after text-align:right; add width:455px; and that should take care of it. I left some extraneous closing tags by mistake, too; the </td></tr> that shows up in the base code can be removed so you don't have that stray </td> floating around.

I updated everything in the post, too, for copy-pasting ease! Thanks for bringing this to me!

[strawberrysorbae]

This totally fixed it, thank you so much for your help!!! uwu

[damn_juicebox]

I absolutely love this code! I tried it out for myself, and the results are so cute.

I found that by taking out the [HEIGHT] altogether, the table span adjusted automatically to fit my page.

Thank you for your hard work in making this!

[shistavanenjedi]

I'm having trouble with getting the navigation pictures/links to line up. They are all underneath each other. How do I sort this out? Thanks!

https://shistavanenjedi.dreamwidth.org/141610.html

[prospitian]

It looks like you accidentally added some linebreaks! So in this chunk of your code here:
<a href="#Kili"><img src="https://p.dreamwidth.org/8c889b104140/-/36.media.tumblr.com/d4761b30f64b1fe14922c2b2192e5f05/tumblr_inline_nyl34rA4Sv1s6h0jb_500.png" style="width:50px; height:50px; border-radius:50px; border:5px solid #000000; margin-left:10px;"></a><br /><a href="#Ori"><img src="https://p.dreamwidth.org/26e3f374d9c6/-/40.media.tumblr.com/34c7a2e45bad1c5ed453e5ff0f299da0/tumblr_inline_nyl2c6VS591s6h0jb_500.png" style="width:50px; height:50px; border-radius:50px; border:5px solid #000000; margin-left:10px;"></a>
There's that <br /> bit that moves the next icon onto the next line. Removing that tiny <br /> bit from in between each image should do the trick!