InsaneJournal

Tweak says, "Arresto Momentum "

mistojen (mistojen) wrote in rp_tutorials,
@ 2013-10-13 03:32:00

Entry tags:

coding: character profile

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! ♥

	mistojen 2013-10-13 12:57 pm UTC (link)
	Weeeeeird lol There's gotta be a way to fix it so it doesn't do that. I'm pretty sure the reason it is is because I've put the image just in the main div instead of giving it its own div, because I couldn't get the margins right at ALL when I tried that. :-\ (Reply to this) (Parent) (Thread)

	darlingwood 2013-10-13 01:02 pm UTC (link)
	Yeah, I have noooo idea. I haven't done a lot of work with divs. Hopefully someone can answer it for you! (Reply to this) (Parent) (Thread)

	mistojen 2013-10-13 01:14 pm UTC (link)
	lol first attempt at RP pretties: FAIL. I hope so, too! (Reply to this) (Parent)