Need coding assistance!

Status
Not open for further replies.
M

mango

Guest
Original poster
I am currently working on a character sheet, and may be attempting the impossible but im stubborn. I don't know if I should post the sheet here or what, because there's a couple things I'd like to do with it, and I also have a couple questions. Help?
 
  • Like
Reactions: rissa
What exactly do you need help with? O.o
 
  • Like
Reactions: mango
What exactly do you need help with? O.o

So the sheet I'm working on the test thread (the one you liked, I think, hoping you saw it, haha)...

ugh I need help :c

NAME




Full Name - Sonny Grey
Gender - Female
Age - Nineteen
Title - Undecided; Traveler
Hometown - Depends on the story

¥ - ?

Trainer ID - #





brief explanation of appearance perhaps just a paragraph or so this is all filler text im too lazy to find the lorispmeosfehaoge ding dong filler gewgwega​



this is where biography would go I guess?​



1 ) I am trying to get the scroll bar to... not think it has to go down so far? For there not to be so much empty space down below, I mean. I'm not sure how to properly align each individual box without using the [margin : 0px 0px 0px 0px] which seems to make things a little unorganized.

2 ) The box where the spherical gif is? I would like to split the box, so the circle image hovers in front of both, but they're two smaller boxes, one on top of the other. Does that... even make sense?

3 ) lastly, I'd like to know why the text is floating out of the other boxes, it's not like that on the first one but no matter how many times I 'trial and error' I can't figure out what I did right the first time. xD

coding is killing me
 
2 ) The box where the spherical gif is? I would like to split the box, so the circle image hovers in front of both, but they're two smaller boxes, one on top of the other. Does that... even make sense?
Like split the box in half you mean??

3 ) lastly, I'd like to know why the text is floating out of the other boxes, it's not like that on the first one but no matter how many times I 'trial and error' I can't figure out what I did right the first time. xD
It might be something to do with whitespace/no wrap coding, I'll give it a look here in a min and see if that's it.

1 ) I am trying to get the scroll bar to... not think it has to go down so far? For there not to be so much empty space down below, I mean. I'm not sure how to properly align each individual box without using the [margin : 0px 0px 0px 0px] which seems to make things a little unorganized.
I thiiiiiink I know what's causing that, but I'm not exactly sure. Did you want the vertical scroll bar at all?
 
NAME




Full Name - Sonny Grey
Gender - Female
Age - Nineteen
Title - Undecided; Traveler
Hometown - Depends on the story

¥ - ?

Trainer ID - #





brief explanation of appearance perhaps just a paragraph or so this is all filler text im too lazy to find the lorispmeosfehaoge ding dong filler gewgwega

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur ac nibh nec tincidunt. Duis accumsan arcu vehicula, efficitur dui eget, molestie massa. Maecenas nec nibh nec orci ornare feugiat. Sed egestas scelerisque purus, ut pellentesque odio rutrum ut. Fusce scelerisque varius eros, non tristique sem aliquet quis. Fusce eget maximus enim. Pellentesque nulla tellus, ultrices sit amet ex sed, ornare vehicula dui. Praesent ut diam nibh. Ut placerat aliquam nisi a bibendum. Nulla tincidunt eros in rutrum semper.​



this is where biography would go I guess?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur ac nibh nec tincidunt. Duis accumsan arcu vehicula, efficitur dui eget, molestie massa. Maecenas nec nibh nec orci ornare feugiat. Sed egestas scelerisque purus, ut pellentesque odio rutrum ut. Fusce scelerisque varius eros, non tristique sem aliquet quis. Fusce eget maximus enim. Pellentesque nulla tellus, ultrices sit amet ex sed, ornare vehicula dui. Praesent ut diam nibh. Ut placerat aliquam nisi a bibendum. Nulla tincidunt eros in rutrum semper.

Curabitur elementum molestie sem. Praesent vehicula ac est quis lacinia. Suspendisse id facilisis mi. Sed blandit pulvinar felis, non hendrerit lectus. Proin fringilla in augue sit amet mollis. Pellentesque et quam ac justo viverra porttitor non non velit. Nullam elit ante, facilisis sollicitudin hendrerit sit amet, auctor ut risus. In ullamcorper arcu vitae lacus elementum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus felis tellus, vitae tristique tortor efficitur sed. Aliquam at justo rutrum, faucibus quam a, ornare turpis. Fusce diam nulla, porta vel purus tempus, tempor eleifend turpis. Proin gravida lorem vel sem malesuada efficitur pretium ullamcorper diam. Quisque dignissim leo turpis, in vehicula sem scelerisque quis. Aenean urna lectus, sodales mollis lacus ut, auctor suscipit sapien.

Mauris pulvinar interdum rutrum. Vivamus vehicula orci ut magna volutpat convallis. Phasellus mauris mauris, vehicula vel dictum ut, convallis ut lacus. Quisque in urna consectetur, accumsan massa in, convallis est. Cras sapien sem, vehicula convallis nunc a, suscipit iaculis nisl.​


Okay so I figured out the text problem and the scroll bar (had to change your "left: 5px;" to "padding: 5px;" in both boxes and remove the "overflow-x: scroll;" from the first div) but I'm still not entirely sure what you mean by question two, so I'll wait til you reply!

Code:
[div=
   background-color: #5e6898; 
   border-top: 8px groove #bd8491; 
   border-bottom: 8px double #191f3e;
   background-position: center;
   background-size: 795px;
   margin: auto; 
   height: 500px; 
   width: 900px;  
   white-space: nowrap; 
   padding: 5px;][div=
   width: 250px; 
   height: 250px; 
   display: inline-block; 
   vertical-align: top; 
   top: 50px; 
   margin: 5px;][div=
   z-index: 2; background:url(https://68.media.tumblr.com/354f5f606688743abe0f95302dea48af/tumblr_oe9fjvw7jB1vur2auo1_500.gif); 
   background-position: center; 
   border: 1px solid #cbc0bb; 
   width: 230px; 
   height: 190px; 
   display: inline-block; 
   left: 10px; 
   top: -55px;][div=
   font-family: ARIAL BLACK; 
   text-transform: UPPERCASE; 
   font-size: 25px; 
   color: WHITE; 
   text-align: center; 
   padding: 0px; 
   letter-spacing: 3px;]NAME[/div][/div][div=
   top: -235px; 
   background-color: #13182d; 
   width: 250px;
   height: 465px; 
   border: 1px solid #cbc0bb;][div=
   font-family: Arial; 
   font-size: 10px; 
   color: #bacadf; 
   text-align: left; 
   padding: 5px; 
   top: 170px;][div=white-space: normal;]

[div=
   z-index: 2; background:url(https://68.media.tumblr.com/354f5f606688743abe0f95302dea48af/tumblr_oe9fjvw7jB1vur2auo1_500.gif); 
   background-position: bottom; 
   border: 1px solid #13182d; 
   width: 230px; 
   height: 40px; 
   display: inline-block; 
   left: 4px; 
   top: -8px;][/div]

[div=
   width: 230px; 
   height: 40px; 
   display: inline-block; 
   left: 40px; 
   top: -10px;][b]Full Name[/b] - Sonny Grey
[b]Gender[/b] - Female
[b]Age[/b] - Nineteen
[b]Title[/b] - Undecided; Traveler
[b]Hometown[/b] - Depends on the story

[b]¥[/b] - ?

[b]Trainer ID[/b] - #[/div]


[div=
   z-index: 2; background:url(https://68.media.tumblr.com/354f5f606688743abe0f95302dea48af/tumblr_oe9fjvw7jB1vur2auo1_500.gif); 
   background-position: top; 
   border: 1px solid #13182d; 
   width: 230px; 
   height: 40px; 
   display: inline-block; 
   left: 4px; 
   top: -6px;][/div][/div][/div][/div]

[div=
   width: 250px; 
   height: 250px; 
   display: inline-block; 
   vertical-align: top; 
   top: 140px; 
   margin: -750px 0px 0px 265px;][div=
   z-index: 2; background:url(https://68.media.tumblr.com/354f5f606688743abe0f95302dea48af/tumblr_oe9fjvw7jB1vur2auo1_500.gif); 
   background-position: 160% 30%; 
   border: 6px groove #13182d; 
   border-radius: 120px; 
   width: 150px; 
   height: 150px; 
   display: inline-block; 
   left: 50px;][/div][div=
   top: -290px; 
   background-color: #13182d; 
   width: 250px; 
   height: 450px; 
   border: 1px solid #cbc0bb;][div=
   font-family: ARIAL; 
   font-size: 9px; 
   color: #bacadf; 
   text-align: left; 
   top: 10px; 
   padding: 5px; ][div=white-space: normal;][justify]brief explanation of appearance perhaps just a paragraph or so this is all filler text im too lazy to find the lorispmeosfehaoge ding dong filler gewgwega

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur ac nibh nec tincidunt. Duis accumsan arcu vehicula, efficitur dui eget, molestie massa. Maecenas nec nibh nec orci ornare feugiat. Sed egestas scelerisque purus, ut pellentesque odio rutrum ut. Fusce scelerisque varius eros, non tristique sem aliquet quis. Fusce eget maximus enim. Pellentesque nulla tellus, ultrices sit amet ex sed, ornare vehicula dui. Praesent ut diam nibh. Ut placerat aliquam nisi a bibendum. Nulla tincidunt eros in rutrum semper.[/justify][/div][/div][/div]

[div=
   width: 250px; 
   height: 250px; 
   display: inline-block; 
   vertical-align: top; 
   top: 135px; 
   margin: -925px 0px 0px 215px;][div=
 background:url(https://68.media.tumblr.com/354f5f606688743abe0f95302dea48af/tumblr_oe9fjvw7jB1vur2auo1_500.gif); 
   background-position: 160% 30%; 
   background-size: 700px; 
   border: 1px solid #cbc0bb; 
   border-radius: 0px; 
   width: 20px; 
   height: 465px; 
   display: inline-block; 
   left: 50px;][/div][/div]

[div=
   width: 250px; 
   height: 250px; 
   display: inline-block; 
   vertical-align: top; 
   margin: -685px 0px 0px 303px;][div=
   z-index: 2; 
   background-color: transparent; 
   background-position: 160% 30%; 
   width: 150px; 
   height: 150px; 
   display: inline-block; 
   left: 50px;][/div][div=
   top: -290px; 
   background-color: #13182d; 
   width: 250px; 
   height: 450px; 
   border: 1px solid #cbc0bb;][div=
   font-family: ARIAL; 
   font-size: 9px; 
   color: #bacadf; 
   text-align: left; 
   top: 10px; 
   padding: 5px;][div=white-space: normal;][justify]this is where biography would go I guess?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur ac nibh nec tincidunt. Duis accumsan arcu vehicula, efficitur dui eget, molestie massa. Maecenas nec nibh nec orci ornare feugiat. Sed egestas scelerisque purus, ut pellentesque odio rutrum ut. Fusce scelerisque varius eros, non tristique sem aliquet quis. Fusce eget maximus enim. Pellentesque nulla tellus, ultrices sit amet ex sed, ornare vehicula dui. Praesent ut diam nibh. Ut placerat aliquam nisi a bibendum. Nulla tincidunt eros in rutrum semper.

Curabitur elementum molestie sem. Praesent vehicula ac est quis lacinia. Suspendisse id facilisis mi. Sed blandit pulvinar felis, non hendrerit lectus. Proin fringilla in augue sit amet mollis. Pellentesque et quam ac justo viverra porttitor non non velit. Nullam elit ante, facilisis sollicitudin hendrerit sit amet, auctor ut risus. In ullamcorper arcu vitae lacus elementum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus felis tellus, vitae tristique tortor efficitur sed. Aliquam at justo rutrum, faucibus quam a, ornare turpis. Fusce diam nulla, porta vel purus tempus, tempor eleifend turpis. Proin gravida lorem vel sem malesuada efficitur pretium ullamcorper diam. Quisque dignissim leo turpis, in vehicula sem scelerisque quis. Aenean urna lectus, sodales mollis lacus ut, auctor suscipit sapien.

Mauris pulvinar interdum rutrum. Vivamus vehicula orci ut magna volutpat convallis. Phasellus mauris mauris, vehicula vel dictum ut, convallis ut lacus. Quisque in urna consectetur, accumsan massa in, convallis est. Cras sapien sem, vehicula convallis nunc a, suscipit iaculis nisl. [/justify][/div][/div][/div][/div][/div][/div][/div]


edit: and i'm still tryin to figure out why the border around the circle gif is acting funny >;[
 
  • Love
Reactions: mango
Thank you so much -- that left thing always screws me up. By question two that's exactly what I meant - split the box in half.So the first half would be "appearance" and the second "something else" like two different categories, with the spherical gif overlapping both. But if the latter part cannot be done, that's perfectly fine we can just move the circle somewhere else, I just want the boxes in two pieces.

Border shows up how I've always seen it around the gif -- has it always been broken and I thought it was just a style? haha.
 
  • Bucket of Rainbows
Reactions: rissa
Thank you so much -- that left thing always screws me up. By question two that's exactly what I meant - split the box in half.So the first half would be "appearance" and the second "something else" like two different categories, with the spherical gif overlapping both. But if the latter part cannot be done, that's perfectly fine we can just move the circle somewhere else, I just want the boxes in two pieces.

Border shows up how I've always seen it around the gif -- has it always been broken and I thought it was just a style? haha.
No problem!! :3 I love messing around and breaking codes *evil laughter*

AND HMMMM, lemme keep messing around with it (feel free to check out my test thread where I'm breaking your codes to pieces) and see if I can try and break the boxes apart like you want. It's mainly trial and error but i know the longing to get what ya want xD

And errrr, idk i've never seen a border code do that, honestly. it may be because the image isn't the same as the height/width??? Who knows, i'll try and figure it out tho xD
 
  • Love
Reactions: mango
So do I, but after a couple hours of zero progress I feel like I can't even see the big mistakes anymore. xD

Thanks for the link! Will be watching, appreciate your time. Idk if my vision is possible but I do know my brain is fried. Any time I've ever used a spherical radius with the groove border, it's done that, so either I created something magical or glorified a broken line for months. probably the latter
 
Status
Not open for further replies.