InsaneJournal

Tweak says, "Get your own butterfly."

mary_greenman (mary_greenman) wrote in rp_tutorials,
@ 2013-01-14 16:54:00

Character Table Sheet How to? Anyone?
Hi there. I want to make something like this:

I've looked but there seems to be none that are that simple. Can anyone walk me through how to create a table like this? I can edit the image and the like, and I know HTML/CSS pretty well.

I'll edit the post with a lj cut when I get home, I'm stuck in school atm. totally ignoring the teacher. Ah well.

Done! Thanks Tess!

EDIT: I killed it. Ideas on how to fix it? Link to the problem under Tess & Mines discussion...

(Read comments) - (Post a new comment)

I forgot to edit something the first time, hurr.
tessisamess
2013-01-15 04:35 am UTC (link)

Hokai now. I added IDs and classes to each div so you know what is what. There's only one character box, but it tells you what to copy and where to put it. I have width for the whole thing set at 90%, but if you want a specific width, go for it! Just make sure it's a minimum of 760px. And, obvs, I left the pretty styling very bare so you can make it however you like. :3 Lemme know if you need anything else!

<lj-raw><div id="CONTAINER" style="width:90%;margin:0 auto;font-family:georgia,serif;font-size:10px;color:#000;">

<div class="BOX" style="float:left;margin:10px;">
		<div class="PIC" style="width:100px;height:100px;position:relative;background:url(ICON HERE);position:relative;z-index:1;margin-bottom:-70px;border-radius:75px;border:1px solid #000;"></div>
			<div class="TITLE" style="font-size:27px;line-height:70%;padding-left:100px;position:relative;z-index:2;">Character Name</div>
				<div class="INFO" style="width:250px;height:110px;background:#f5f5f5;position:relative;z-index:3;border:1px solid #000;padding:10px;text-align:justify;margin-left:70px;">
<center>PB | PSL/GAME | AVAILIBILITY</center><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel nulla metus, in facilisis risus. Aenean gravida libero id arcu pellentesque pulvinar.

<p align="right"><a href="URL" style="text-decoration:none;border-bottom:1px dotted;color:#000;">Bio</a> | <a href="URL" style="text-decoration:none;border-bottom:1px dotted;color:#000;">Thread Tracker</a></p>
				</div>
	</div>

</div></lj-raw>

(Reply to this) (Parent) (Thread)

	Re: I forgot to edit something the first time, hurr. mary_greenman 2013-01-15 04:51 am UTC (link)
	omg bb. This is EXACTLY what I wanted. I don't have time to play with it right now, but you have no idea how excited I am! I do prefer fixed widths rather than percentages, but I figure that'll just let me play with a new aspect. XD You're so generous! Can I hug you? I want to hug you. XD (Reply to this) (Parent) (Thread)

	Re: I forgot to edit something the first time, hurr. tessisamess 2013-01-15 05:05 am UTC (link)
	Heee, yay! I'm glad I got it right, haha. :D And, psh, hugs are always welcome. ♥ (Reply to this) (Parent) (Thread)

Re: I forgot to edit something the first time, hurr.

mary_greenman
2013-01-15 06:47 am UTC (link)

Okay, sorry for bothering you again but I'm pretty sure I messed up the code. >.<

I made some minor changes - more dotted lines, and changed the color of the outline but in messing with it. I think I messed up how the table is supposed to go? I tried to make three columns but I can't seem to get them to line up? idk.

This is where I'm attempting to use it: [link]. The code is on the page with the fuck up I turned it into, haha.

(Reply to this) (Parent) (Thread)

	Re: I forgot to edit something the first time, hurr. mary_greenman 2013-01-15 07:34 am UTC (link)
	Also, there's an unnecessary block of space between the last line (links to bio & thread tracker) and the border. Any idea on how to rid the table of it or is that needed for HTML purposes? (Reply to this) (Parent)

	Re: I forgot to edit something the first time, hurr. tessisamess 2013-01-15 11:16 am UTC (link)
	Fixed and replied on the entry you linked! :D (Reply to this) (Parent)

(Read comments) -