InsaneJournal

Tweak says, "HAIL ASGARDIA"

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

(Read comments) - (Post a new comment)

	ex_dickens625 2013-10-13 07:24 am UTC (link)
	Could it be your browser as it looks fine for me? Of course I am half asleep so I might be missing something obvious in your post... (Reply to this) (Thread)

	mistojen 2013-10-13 11:27 am UTC (link)
	No it doesn't look right on your browser, either. :( Appearance and Basics should bookend the main image. Plus, on my phone, it looks like this, so that's three browsers where it's wrong all in different ways... (Reply to this) (Parent)

	mistojen 2013-10-13 11:47 am UTC (link)
	For reference, on my browser it looks the way it should except for the line break that IJ has where their ad would normally be below the entry. (Reply to this) (Parent) (Thread)

	ex_dickens625 2013-10-14 10:03 pm UTC (link)
	Aaah well I'm glad you got it fixed :) (Reply to this) (Parent) (Thread)

	mistojen 2013-10-14 10:25 pm UTC (link)
	Meeeee too! Once I get less lazy, I'll probably make a post to share them with people iff'n anyone wants, cuz I ended up making like three variations all together. (Reply to this) (Parent) (Thread)

	ex_dickens625 2013-10-15 12:29 am UTC (link)
	I wouldn't mind seeing them! (Reply to this) (Parent) (Thread)

	mistojen 2013-10-15 12:34 am UTC (link)
	They're here, here, and here, I just am feeling too lazy to put together a post with the coding and instructions right now is what I mean, but by all means, have a look! :) Here's one of them in a live example. (Reply to this) (Parent)

(Read comments) -