Rp Tutorials

Okay...long time lurker, first time poster here. To practice my CSS skills now that I'm actually in school and I need to be able to successfully implement them for grades instead of just pretteh IJs, I decided to give a character profile a try. It looks good, except there are some hiccups. First, I...don't even know what's going on with the line that IJ has going, but instead of being under my character bio, it's to the right which makes the horizontal scroll pop up and is basically ruining my life, HOW DO fix it? lol

Second, I know there has GOT to be a better way to get that middle section to stay where it is without shifting the right floating div down, but I've tried everything and I can't get it to work, so basically, if you have an image that's any other size at all...the whole thing is jacked up. Anybody willing to take a look and help a beginner get better? I implemented the code here on a journal I'm not using at the moment.

Here's the coding:

<lj-raw><div id="profile" style="color: #000; width: 900px; margin: 0 auto; text-align: justify; padding-top: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 110%;"> <img src="http://i.imgur.com/XeSmyCi.jpg" width="480px" height="200px" style="-moz-border-radius: 240px / 10px;-webkit-border-radius: 240px / 100px; border-radius: 240px / 100px;"> <div id="basic" style="background: #FFF; width: 200px; height: 200px; float: left; text-align: left; padding: 5px;"> <br /><br /><br /> <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">basics</div> <b><small>NAME:</small></b> Name Goes Here<br /> <b><small>NICKNAMES:</small></b> Nicknames Go Here<br /> <b><small>AGE:</small></b> Age Goes Here<br /> <b><small>SEXUALITY:</small></b> Sexual Orientation Goes Here<br /> <b><small>MARITAL STATUS:</small></b> Marital Status Goes Here<br /> <b><small>ORIGIN:</small></b> Origin Goes Here<br /> </div> <div id="appear" style="background: #FFF; width: 200px; height: 200px; float: right; padding: 5px;"> <br /><br /><br /> <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">appearance</div> <b><small>HEIGHT:</small></b> Height Goes Here<br /> <b><small>BUILD:</small></b> Build Go Here<br /> <b><small>EYES:</small></b> Eye Color Goes Here<br /> <b><small>HAIR:</small></b> Hair Color Goes Here<br /> <b><small>EXTRA:</small></b> Piercings/Tats/Scars/Etc. Go Here<br /> <b><small>PB:</small></b> Played By Goes Here<br /> </div> <div id="bottom" style="float: left; width: 880px; background: #FFF; padding: 10px;"> <div class="section" style="background: #FFF; width: 880px; height: 200px; float: right; padding: 5px;"> <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">personality</div> Aliquam in purus in nunc placerat porta at at ligula. Quisque tristique enim et leo ullamcorper, sed mattis massa dignissim. Ut laoreet aliquam quam, eget adipiscing ipsum consequat at. Donec sit amet tempor sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada sodales risus. Praesent id nisl nec lectus placerat ornare eu sed lorem. Duis id quam at urna laoreet consectetur. Maecenas et arcu quis nisl molestie tempus. Phasellus quis purus a justo malesuada consequat. Nulla blandit ante tortor, quis bibendum nisl aliquet dictum. Quisque et condimentum eros, sit amet imperdiet ligula. Quisque porta dignissim elementum. Phasellus at arcu tempus nisi ullamcorper fringilla. <br /><br /> Suspendisse malesuada consequat ipsum, et varius erat molestie sed. Aenean vitae tincidunt massa. Integer ipsum elit, semper quis elementum vel, tristique ac felis. Cras mattis massa a feugiat blandit. Cras cursus gravida risus, id sodales mi egestas a. Mauris at mi quis turpis suscipit imperdiet non ac massa. Ut quis nisi luctus, dignissim justo vel, pharetra odio. Sed eleifend arcu ac ultricies consequat. Donec cursus felis ut nunc malesuada, non molestie elit malesuada. </div> <div id="icons" style="width: 900px; padding: 20px;"> <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius: 75px; margin-left: 100px;"> <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px;"> <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px;"> <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px; margin-right: 75px;"> </div> <div class="section" style="background: #FFF; width: 880px; float: left; padding: 5px;"> <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">history</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque enim est, facilisis ut imperdiet malesuada, rhoncus ut mauris. Nulla arcu massa, porttitor eget eros nec, varius elementum nunc. Nunc at libero molestie, viverra elit id, malesuada ante. Maecenas non turpis placerat neque ullamcorper pharetra varius vel est. Aliquam sapien ligula, iaculis at laoreet sit amet, pretium quis odio. Nullam pretium est felis, eu rhoncus velit gravida non. In fermentum tellus at congue pharetra. Morbi vitae tellus vehicula diam viverra interdum non quis felis. Aliquam erat volutpat. Integer tempor mauris a dapibus aliquam. Praesent a ligula eu justo malesuada luctus at eu arcu. Nulla rutrum lacus quis diam sagittis, non congue odio sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet pharetra neque, quis pharetra diam. Sed sit amet lorem vel est luctus commodo in non purus. Nulla facilisi. <br /><br /> Phasellus sagittis condimentum dapibus. Cras viverra malesuada rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sodales porta pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut nibh fermentum, placerat quam quis, euismod ante. Mauris non tristique sem. Morbi placerat metus quis faucibus tincidunt. <br /><br /> Morbi ipsum est, mattis at metus ac, ullamcorper rutrum leo. Vestibulum tincidunt ligula sit amet nisi vestibulum, in vehicula elit congue. Proin convallis adipiscing sapien in molestie. Suspendisse gravida, dolor id sollicitudin faucibus, dui lacus lacinia dui, quis gravida velit purus non odio. Praesent dui dolor, dapibus et posuere ut, scelerisque sed tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean mi eros, blandit et arcu vel, lacinia scelerisque ante. In gravida est ligula, vitae sodales lectus adipiscing vel. Sed at massa commodo, hendrerit nisl et, adipiscing libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu consequat ante, et cursus dui. </div> <div id="credit" style="width: 890px; float: left; background: #139FE7; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: lighter; text-transform: capitalize; text-decoration: none; text-align: center; margin: 20px 0 0 0; padding: 10px 0 10px 0"> DESIGN BY <a href="http://skepticalwriter.insanejournal.com" style="color: #000; text-decoration: none;">~SKEPTICALWRITER</a>; CODING BY <a href="http://mistojen.insanejournal.com" style="color: #000; text-decoration: none;">~MISTOJEN</a> </div> </div> </div></lj-raw>

ETA! An anonny mouse helped me fix it! ♥

Leave a comment here with a laundry list of fandoms that you want to see more RPs of, be it GPSLs or RPGs. The point of this 'survey' is to gather feedback of obscure fandoms, or fandoms that are popular or well-known: yet there are no RPs available for it. The reasons why could be because there is no obvious mainstream interest; there aren't enough fans; or it's considered 'old'.

I am interested in franchises, not plots/premises, ala high school settings, desert island, crossover and panfandom, e.g no one's melded fandom X with fandom B before!

Please do not include fandoms like Harry Potter, because that is a clear example of a 'popular, widespread' fandom. This post is not about finding more Potter RPs because there are not enough Quiddtich games, etc.

AMC's The Walking Dead
Pirates of the Caribbean
Bioshock 1, 2, Infinite
Fallout 3, New Vegas
The Last of Us

Added: Red Dead Redemption + Undead Nightmare
'80s Fright Night
Interview with the Vampire ('90s filmverse + old!Rice book canon)
Alice in Wonderland: adapted original literature
Once upon a time

ETA: The Walking Dead appears to be in the lead. It's giving ideas to me and one of my mates.

hey people! i've been hungry for a new game lately, but all i can seem to find are post-apocalyptic, mutants, harry potter or pan-fandom games. i'm interested in simple character development games -- high school/college or small town/big city, where it's just regular people living regular lives! does anyone know of any of these games that exist?! also, if there's not a wide variety of these games, would anyone be interested in one? i have a high school community that i created awhile back and it never took off. i would love to relaunch it and take time out of my boring adult life to vicariously live through free-spirited teens! thanks :-D

( Let's play )