InsaneJournal

Tweak says, "Hive of scum and villainy"

mary_greenman (mary_greenman) wrote in rp_tutorials,
@ 2013-05-11 01:02:00

Entry tags:

html

The Implemented Table

The Implemented Table
Name: The Implemented Table
Type: Character profile layout.
Credit: scatterbrained or mary_greenman.
Features What can I say? I really like rounded images and this profile features 7 spots for roundifying html images! Woo! Actually this bb was the product of about a weeks worth of trying to play with tables & divs all in the same place. I wanted a simple, sleek profile where the focus was on the text content rather than images. It's easy to edit, so if you don't like some of the stuff on the side, feel free to add/remove content. I really wanted to give people several ways to describe their characters, both in depth and "at a glance". I think my favorite part about this bb is the way the header sort of guides your eyes down to the bigger stuff. The shape is super interesting imo. Originally, I was going to add lyrics between the six images beside the main header image. Unfortunately, due to the size of the table and the positioning of the images, there's just no way to add it in without it looking terrible. If you really want lyrics, I would suggest adding them in the History and/or Personality section.
MISC: Links to journals you're using this in would be loved! I'm a snoop and like looking at what people make from my stuff. ;)

LIVE PREVIEW HERE & slightly edited male version here.
CODE <lj-cut> <lj-raw><br><br> <center><div style="background-color: #fff; letter-spacing: 24px; font-size: 25px;">Character<br>Full Name</div></center> <center> <br><br> <div style="Margin: auto;"> <table border="0" width="430px"> <tr><td> <div style="background-image: url(URL HERE); height: 200px; width: 200px; -moz-border-radius:100px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px; background-color: #eee; border: #aaa 1px dotted;"></div></td> <td> <div style="margin:auto;"> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"><br><br> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"> <img src="URL HERE" alt="optional character image here." width="50" height="50" style=" -moz-border-radius:50px; -webkit-border-radius:100px; -o-border-radius:100px; border-radius:100px"> </div></td> </tr> </table></div> <br><br><br> <table border="0" width="700px" > <tr> <td valign="top" width="40%"> <div style="font-family:Georgia;"> <center><b>BASICS</b></center><br> <b> GENDER:</b> m/f?<br> <b>NICKNAMES:</b> what are they called?<br> <b>AGE PLAYED:</b> 00<br> <b>DATE OF BIRTH:</b> _ /__ /____<br> <b>SEXUALITY:</b> LGBH?<br> <b>POB:</b> place of birth<br><br> <b>OCCUPATION/ GROUP ROLE</b><br> <div style="text-align: justify; padding-right: 50px;">occupation and role in group if applied in game.</div> <br><br> <b>STRENGTHS</b><br> # 1 <br> # 2 <br> # 3 <br> # 4 <br> # 5 <br> <br><br> <b>WEAKNESSES</b><br> # 1<br> # 2 <br> # 3 <br> # 4 <br> # 5 <br> <br><br> <b>BIGGEST FLAW</b><br> <div style="text-align: justify; padding-right: 50px;"><li>Ut facilisis lorem eu metus mattis bibendum. Ut non diam sapien, nec cursus augue. Mauris consequat adipiscing faucibus.</li><br></div> <br> <b>GENERAL</b><br> <div style="text-align: justify; padding-right: 50px;">Single paragraph description</div> <br><br> <b>HOBBIES</b> <br> <div style="text-align: justify; padding-right: 50px;"><li>Nam sit amet libero ac eros adipiscing consequat et ut libero. <br></li> <br><li>Maecenas pulvinar, arcu aliquam ullamcorper cursus.</li> <br><li> est elit auctor purus, quis imperdiet tellus neque ultrices nisl.</li></div> <br><br> <b>THEMESONG</b><br> <i>Title</i> by Artist <br><br> <b>FANDOM(S)/GAME(S)</b><br> <div style="text-align: justify; padding-right: 50px;">desired games/fandoms here.</div> <br><br> <div style="margin-left: -50px;"> <center><br><b>AT A GLANCE</b><br> Virtue 1<br> Virtue 2<br> Virtue 3<br> Virtue 4<br> Virtue 5<br> <br><br> Fault 1<br> Fault 2<br> Fault 3<br> Fault 4<br> Fault 5<br> </center><br><br> <center> <img src="" alt="optional character image here." width="200" height="150"> </center><br><br></div> <b>description</b><br> <p style="text-align: justify; padding-right: 50px;">Ut facilisis lorem eu metus mattis bibendum. Ut non diam sapien, nec cursus augue. Mauris consequat adipiscing faucibus. Nam sit amet libero ac eros adipiscing consequat et ut libero. Maecenas pulvinar, arcu aliquam ullamcorper cursus, est elit auctor purus, quis imperdiet tellus neque ultrices nisl. <br><br> Ut facilisis lorem eu metus mattis bibendum. Ut non diam sapien, nec cursus augue. Mauris consequat adipiscing faucibus. Nam sit amet libero ac eros adipiscing consequat et ut libero. Maecenas pulvinar, arcu aliquam ullamcorper cursus, est elit auctor purus, quis imperdiet tellus neque ultrices nisl.</p> <br><br> <div style="margin-left: -50px; font-size: 12px;"><center>profile (c) <lj user="scatterbrained"> <br><br> </center> <br> </div> </td> <td valign="top"><div style="font-family:georgia; text-align: justify; word-spacing: -3.2px;"> <b><center>PERSONALITY</center></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at est eu purus auctor venenatis sed ut turpis. Nam sit amet eros sodales libero tincidunt lobortis vitae ac erat. In eleifend pharetra pellentesque. Ut tincidunt tincidunt enim, id aliquam neque varius at. Aliquam neque augue, semper ut rutrum sed, ornare quis dolor. Nam elit enim, pulvinar in aliquam et, convallis id elit. Quisque tincidunt pulvinar luctus. Morbi hendrerit ultrices justo, in euismod orci blandit a. Curabitur vitae luctus dolor. Integer elit eros, rutrum a lacinia non, adipiscing eu nisi. Praesent at est non libero porta porta. Pellentesque mi nibh, bibendum nec sagittis ac, convallis quis ipsum. Donec faucibus odio et metus euismod ultricies. Vestibulum sagittis egestas justo, in pellentesque elit mattis et. Suspendisse euismod dignissim urna eu auctor.<br><br> Aliquam commodo euismod dapibus. Etiam scelerisque euismod neque, at tincidunt erat vestibulum eget. Nulla eu arcu vel eros euismod semper. Praesent luctus nulla sit amet diam ornare aliquam. Donec mattis lacus iaculis ipsum auctor eget condimentum nisl porttitor. Sed in ullamcorper tortor. Proin tempus luctus lectus, sit amet sollicitudin ligula tempor vitae. Cras quis nibh est, vitae tincidunt erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar justo sed nisl mattis scelerisque. Nam a arcu et erat imperdiet placerat. Ut convallis ipsum vitae odio viverra volutpat. Quisque at nisl vel leo accumsan fermentum. Proin nec elit et urna vehicula cursus sed sit amet mi. Curabitur et lectus erat, in bibendum lacus. Sed rutrum luctus leo a mattis. <br><br> Donec ornare iaculis urna a varius. Phasellus lobortis mauris eu nibh fermentum aliquam quis porta enim. Pellentesque erat ante, viverra nec pellentesque quis, pretium sed risus. Phasellus tristique commodo elit, non accumsan ipsum elementum ac. Nunc libero purus, gravida in ultricies sed, fringilla ac nisl. Vestibulum rhoncus faucibus elit nec condimentum. Maecenas augue leo, scelerisque eget rutrum nec, malesuada sit amet nunc. <br><br> Praesent aliquet elementum facilisis. Aliquam eleifend consectetur felis, quis hendrerit nisl vestibulum sed. Mauris ultrices porttitor elit in condimentum. Integer volutpat quam in arcu pellentesque porttitor condimentum sapien aliquet. Sed sed tortor eu lorem rutrum tempus at a urna. Pellentesque diam justo, tincidunt ut gravida quis, lacinia sit amet nibh. Fusce accumsan tincidunt ornare. Nam eleifend nulla sit amet elit vestibulum accumsan. Ut bibendum porta nunc, in elementum metus tincidunt sit amet. Duis laoreet, eros sit amet euismod consectetur, nunc risus ultrices leo, non tempus nunc diam vel purus. Aenean mollis purus vel dolor accumsan hendrerit. Morbi leo mi, ultricies a tincidunt at, interdum in est. Nulla auctor, nunc eget facilisis fringilla, tellus ipsum feugiat quam, non pulvinar ante tortor a ipsum.<br><br> Cras nec orci vel risus porttitor tempus. Sed quis nisl vel lorem laoreet lacinia. Nunc id nisi tellus, at auctor orci. Proin quis arcu orci, non porta diam. Donec augue dolor, accumsan ac ullamcorper eu, facilisis non ligula. Pellentesque malesuada lobortis urna ut semper. Cras dui augue, adipiscing id blandit ut, dapibus at diam. Suspendisse potenti. <br><br><center>~~~~~~~~*</center><br><br> <b>HISTORY</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at est eu purus auctor venenatis sed ut turpis. Nam sit amet eros sodales libero tincidunt lobortis vitae ac erat. In eleifend pharetra pellentesque. Ut tincidunt tincidunt enim, id aliquam neque varius at. Aliquam neque augue, semper ut rutrum sed, ornare quis dolor. Nam elit enim, pulvinar in aliquam et, convallis id elit. Quisque tincidunt pulvinar luctus. Morbi hendrerit ultrices justo, in euismod orci blandit a. Curabitur vitae luctus dolor. Integer elit eros, rutrum a lacinia non, adipiscing eu nisi. Praesent at est non libero porta porta. Pellentesque mi nibh, bibendum nec sagittis ac, convallis quis ipsum. Donec faucibus odio et metus euismod ultricies. Vestibulum sagittis egestas justo, in pellentesque elit mattis et. Suspendisse euismod dignissim urna eu auctor.<br><br> Aliquam commodo euismod dapibus. Etiam scelerisque euismod neque, at tincidunt erat vestibulum eget. Nulla eu arcu vel eros euismod semper. Praesent luctus nulla sit amet diam ornare aliquam. Donec mattis lacus iaculis ipsum auctor eget condimentum nisl porttitor. Sed in ullamcorper tortor. Proin tempus luctus lectus, sit amet sollicitudin ligula tempor vitae. Cras quis nibh est, vitae tincidunt erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc pulvinar justo sed nisl mattis scelerisque. Nam a arcu et erat imperdiet placerat. Ut convallis ipsum vitae odio viverra volutpat. Quisque at nisl vel leo accumsan fermentum. Proin nec elit et urna vehicula cursus sed sit amet mi. Curabitur et lectus erat, in bibendum lacus. Sed rutrum luctus leo a mattis. <br><br> Donec ornare iaculis urna a varius. Phasellus lobortis mauris eu nibh fermentum aliquam quis porta enim. Pellentesque erat ante, viverra nec pellentesque quis, pretium sed risus. Phasellus tristique commodo elit, non accumsan ipsum elementum ac. Nunc libero purus, gravida in ultricies sed, fringilla ac nisl. Vestibulum rhoncus faucibus elit nec condimentum. Maecenas augue leo, scelerisque eget rutrum nec, malesuada sit amet nunc. <br><br> Praesent aliquet elementum facilisis. Aliquam eleifend consectetur felis, quis hendrerit nisl vestibulum sed. Mauris ultrices porttitor elit in condimentum. Integer volutpat quam in arcu pellentesque porttitor condimentum sapien aliquet. Sed sed tortor eu lorem rutrum tempus at a urna. Pellentesque diam justo, tincidunt ut gravida quis, lacinia sit amet nibh. Fusce accumsan tincidunt ornare. Nam eleifend nulla sit amet elit vestibulum accumsan. Ut bibendum porta nunc, in elementum metus tincidunt sit amet. Duis laoreet, eros sit amet euismod consectetur, nunc risus ultrices leo, non tempus nunc diam vel purus. Aenean mollis purus vel dolor accumsan hendrerit. Morbi leo mi, ultricies a tincidunt at, interdum in est. Nulla auctor, nunc eget facilisis fringilla, tellus ipsum feugiat quam, non pulvinar ante tortor a ipsum.<br><br> Cras nec orci vel risus porttitor tempus. Sed quis nisl vel lorem laoreet lacinia. Nunc id nisi tellus, at auctor orci. Proin quis arcu orci, non porta diam. Donec augue dolor, accumsan ac ullamcorper eu, facilisis non ligula. Pellentesque malesuada lobortis urna ut semper. Cras dui augue, adipiscing id blandit ut, dapibus at diam. Suspendisse potenti. <br><br> Cras nec orci vel risus porttitor tempus. Sed quis nisl vel lorem laoreet lacinia. Nunc id nisi tellus, at auctor orci. Proin quis arcu orci, non porta diam. Donec augue dolor, accumsan ac ullamcorper eu, facilisis non ligula. Pellentesque malesuada lobortis urna ut semper. Cras dui augue, adipiscing id blandit ut, dapibus at diam. Suspendisse potenti. </td> </tr> </table></center> </lj-raw> </lj-cut>

(Read comments) - (Post a new comment)

tellthenight
2013-05-16 07:10 pm UTC (link)

Within IJ, tables can be a lot easier to get to behave themselves because they automatically have the capacity to line up side by side; divs have to be forced to float and cooperate, and it can take a lot more in-html code than it would in a regular page. But I'm so used to them now that tables don't work as well for me anymore. :/ I didn't get divs for the longest time either, and then my first web professor gave us a lecture about them that made it all make sense.

(Reply to this) (Parent) (Thread)

	ex_dickens625 2013-05-17 05:25 am UTC (link)
	That's true and most people find it easier to do but really you can do so much more with Div's. Then again I've taught myself to replicate most stuff with tables with row and col span. Pain but it works... (Reply to this) (Parent)

(Read comments) -