Tweak

InsaneJournal

Tweak says, ""'Y-O-U', not 'U'!""

Username: 
Password:    
Remember Me
  • Create Account
  • IJ Login
  • OpenID Login
Search by : 
  • View
    • Create Account
    • IJ Login
    • OpenID Login
  • Journal
    • Post
    • Edit Entries
    • Customize Journal
    • Comment Settings
    • Recent Comments
    • Manage Tags
  • Account
    • Manage Account
    • Viewing Options
    • Manage Profile
    • Manage Notifications
    • Manage Pictures
    • Manage Schools
    • Account Status
  • Friends
    • Edit Friends
    • Edit Custom Groups
    • Friends Filter
    • Nudge Friends
    • Invite
    • Create RSS Feed
  • Asylums
    • Post
    • Asylum Invitations
    • Manage Asylums
    • Create Asylum
  • Site
    • Support
    • Upgrade Account
    • FAQs
    • Search By Location
    • Search By Interest
    • Search Randomly

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

Previous Entry  Add to memories!  Tell a Friend!  Next Entry
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:



ETA! An anonny mouse helped me fix it! ♥


(Post a new comment)


[info]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)


[info]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)


[info]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)


[info]ex_dickens625
2013-10-14 10:03 pm UTC (link)
Aaah well I'm glad you got it fixed :)

(Reply to this) (Parent) (Thread)


[info]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)


[info]ex_dickens625
2013-10-15 12:29 am UTC (link)
I wouldn't mind seeing them!

(Reply to this) (Parent) (Thread)


[info]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)


[info]lena
2013-10-13 11:44 am UTC (link)
Looks normal on my phone...

(Reply to this) (Thread)


[info]mistojen
2013-10-13 11:48 am UTC (link)
The appearance div isn't shifted down on your phone like it is on mine?

(Reply to this) (Parent) (Thread)


[info]lena
2013-10-13 12:48 pm UTC (link)
Nope! Looks completely normal in Safari on an iPhone 5.

Looks good in Firefox on my laptop, too.

The appearance section IS shifted down if I view it in Chrome or in Safari on my PC.

(Reply to this) (Parent) (Thread)


[info]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)


[info]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)


[info]mistojen
2013-10-13 01:14 pm UTC (link)
lol first attempt at RP pretties: FAIL. I hope so, too!

(Reply to this) (Parent)


(Anonymous)
2013-10-13 03:01 pm UTC (link)
I'm pretty sure the weirdness in formatting is just coming from unhoused divs not playing well with IJ's basic template. If you drop the entire code into an empty table, it works perfectly.

(Reply to this) (Thread)


[info]mistojen
2013-10-13 03:08 pm UTC (link)
Thank you! I had a feeling IJ's template had a hand in the blame since the original HTML doc I used to build it looked just fine and it only got jacked up when I put it into an IJ entry ...that worked perfectly on Firefox, but on Chrome and my mobile browser it pushes the appearance div down. Is there a way for me to fix that?

(Reply to this) (Parent) (Thread)


(Anonymous)
2013-10-13 03:12 pm UTC (link)
Ah, browser crosscoding. Eff, I just had that problem with a cast list not too long ago and I fixed it somehow. Lemme go digging and see what I can turn up.

(Reply to this) (Parent) (Thread)


[info]mistojen
2013-10-13 03:13 pm UTC (link)
You are so awesome, anon, thank youuuu! This is gonna legit drive me banana sandwich until I fix it now lol (I should've known a CSS project for lulz would turn into RAAAAAAAAAAGE until it's fixed, I have met me, after all :P)

(Reply to this) (Parent) (Thread)


(Anonymous)
2013-10-13 03:17 pm UTC (link)
Okay, got it! (At least, it works on my FF/Chrome/IE.) It's a simple element reorder.

Take the code for the big center image? Just this part:

And move that below the code for the appearance div.

(Reply to this) (Parent) (Thread)


[info]mistojen
2013-10-13 03:20 pm UTC (link)
!!!!! You're my hero ♥!

(Reply to this) (Parent) (Thread)


(Anonymous)
2013-10-13 03:20 pm UTC (link)
Haha, happy to help! <333

(Reply to this) (Parent)

Home | Site Map | Manage Account | TOS | Privacy | Support | FAQs