24th: filed

[yanyan]

A CR chart of sorts! May also be used as a muselist. Images used may be a maximum of 200px in width. Change HEXCODE to any color of your choice - this will be the background of the canon box and the shadow. Each row may have a maximum of three boxes.

UPDATE (09/23): No need to use <tr> tags to create a new row. Simply copy and paste code between the comments START and END; everything will fill up and align automatically.

Chobits

Chii

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus. Duis vitae dui dolor. Praesent sit amet pulvinar nunc. Etiam lacinia lacus nec mi hendrerit, pulvinar aliquet nunc tincidunt.

Monogatari Series

Hitagi Senjougahara

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus. Duis vitae dui dolor. Praesent sit amet pulvinar nunc. Etiam lacinia lacus nec mi hendrerit, pulvinar aliquet nunc tincidunt.

Pokemon BW2

Bianca

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus. Duis vitae dui dolor. Praesent sit amet pulvinar nunc. Etiam lacinia lacus nec mi hendrerit, pulvinar aliquet nunc tincidunt.

Magi

Kougyoku Ren

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus.

Monogatari Series

Nadeko Sengoku

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus. Praesent sit amet pulvinar nunc. Etiam lacinia lacus nec mi hendrerit, pulvinar aliquet nunc tincidunt.

Hetalia

Liechtenstein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel neque a quam venenatis placerat quis ac nibh. Nam at commodo risus, ut condimentum nisl. Sed gravida, mi id rhoncus porttitor, eros nisi aliquam turpis, vitae tempus leo mauris sed tellus. Praesent sit amet pulvinar nunc. Etiam lacinia lacus nec mi hendrerit, pulvinar aliquet nunc tincidunt.

BLACK
<raw-code> <center><div style="width: 698px; text-align: left;"> <!--START--> <div style="width: 200px; background: #000000; color: #ffffff; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #ffffff;"> <div style="background: HEXCODE; color: #ffffff; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; display: inline;">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> <!--START--> <div style="width: 200px; background: #000000; color: #ffffff; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #ffffff;"> <div style="background: HEXCODE; color: #ffffff; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; display: inline;">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> <!--START--> <div style="width: 200px; background: #000000; color: #ffffff; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #ffffff;"> <div style="background: HEXCODE; color: #ffffff; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; ">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> </div> </br> <small>code by <user name="cawaii"></small> </center> </raw-code>

WHITE
<raw-code> <center><div style="width: 698px; text-align: left;"> <!--START--> <div style="width: 200px; background: #fdfdfd; color: #000000; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #000000;"> <div style="background: HEXCODE; color: #fdfdfd; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; display: inline;">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> <!--START--> <div style="width: 200px; background: #fdfdfd; color: #000000; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #000000;"> <div style="background: HEXCODE; color: #fdfdfd; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; display: inline;">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> <!--START--> <div style="width: 200px; background: #fdfdfd; color: #000000; text-align: center; border-radius: 20px; box-shadow: 4px 4px 0px HEXCODE; padding: 10px; margin: 0px 10px 10px 0px; display: inline-block;"> <img src="IMGURLHERE" style="max-width: 200px; border-radius: 15px; margin-bottom: 3px;"> <div style="font: 14px 'ms gothic', monospace; text-align: left; padding-bottom: 6px; border-bottom: 1px dashed #000000;"> <div style="background: HEXCODE; color: #fdfdfd; display: inline; padding: 3px;">CANON</div> <div style="padding: 3px; display: inline;">CHARACTER</div> </div> <div style="font: 12px 'ms gothic', monospace; text-align: justify; padding-top: 6px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <!--END--> </div> </br> <small>code by <user name="cawaii"></small> </center> </raw-code>

Comments

[kues]

Hiya I had a question about the coding for this :|a I added another "header" and dotted line in the code to make a second subsection for more text, and while it worked fine at first, the more text I added the bigger the space between the end of the text and the bottom of the table got. Like this. Aside from that, I added in a larger banner and made the table wider to accommodate it, but other than that I made no edits to the coding.

Do you have any idea what I've done wrong here? :|a

[yanyan]

I'm guessing you used <br> instead of <br/>? That's a problem I usually encounter here on Dreamwidth! Try replacing <br> with <br/> and see what happens.

[kues]

Oh, that worked perfectly. Thank you! I didn't know there was a difference........this is why I'm not a coder fdlf;khdf