• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Problem With Codes and Previews

Roleplay Availability
Roleplay Type(s)
So lately I've been trying to learn to code, however the problem I have is whenever I preview my bbcodes, they always seem to be showing up improperly. And I really have no idea why. I've like put the proper closing tags and all, but somehow some parts of it, still don't show up, which I for one don't understand. So if anyone, knows what my problems may be please give me some advice. Cause, I do want to make these two codes usable.
what the codes should look like;
uvu8dVf.jpg
and
K3DYHrl.jpg
.
what the codes preview as;
fQ0CVks.jpg
and
1VKVjO6.jpg
I think it might have to do with something that happens when I try to add a hidden scroll, like somehow it doesn't respond well when I have one, which is kinda saddening. And at this point I kinda wanna give up on coding lol. I mean when I make the demo, it looks fine. But when I actually code it's not useable lol. Anyways the two codes are below, and if you guys can help me figure out what's wrong I'd really appreciate it
code 1
Code:
[nobr]
	[class=background]
		position: relative;
		box-sizing: border-box;
		width: 240px;
		height: 320px;
		background-color:#E8E8E8;
		overflow: hidden;
		margin-right:auto;
		margin-left:auto;
		padding:0;
	[/class]
	[class=Text_Box]
		position: relative;
		overflow: auto;
		width: 110px;
		height: 237px;
		font size; 10px;
		padding: 10px;
		color:#E8E8E8;
	[/class]
	[class=Text_container]
		position: absolute;
		overflow: hidden;
		width: 110px;
		height: 237px;
		left: 114px;
		top: 24px;
		background-color:#6A8E8E;
		border: 4px solid #8BA0B3;
	[/class]
	[class=Image_3]
		position: absolute;
		overflow: visible;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 42px;
		background:url(https://66.media.tumblr.com/85ca252a623eeb5c83d74f47575badb7/tumblr_pmrrgerICu1vxt811_540.jpg);
		background-position: center;
		background-size:75%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_2]
		position: absolute;
		overflow: visible;
		width: 69px;
		height: 69px;
		left: 6px;
		top: 81px;
		background:url(https://66.media.tumblr.com/b32fd70bfd3d05cdef495d6562119cc3/tumblr_pmrrgeqrPK1vxt811_540.jpg);
		background-size: 100%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_1]
		position: absolute;
		overflow: visible;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 129px;
		background:url(https://66.media.tumblr.com/ca62ccf25595a503bf0e7bb30b8bfaaa/tumblr_pmrrgfdQQR1vxt811_540.jpg);
		background-size; 25%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Text_or_quote_here]
		position: absolute;
		overflow:visible;
		left: 6px;
		top: 210px;
		width: 111px;
		height: 94px;
		text-align:center;
		font-weight: 200;
		font-size: 17px;
		color:#6A8E8E;
	[/class]
	[class=button_1]
		position: absolute;
		overflow: visible;
		width: 22px;
		height: 20px;
		left: 123px;
		top: 275px;
		background: url(https://imgur.com/2oN2mM2);
	[/class]
	[class=button_3]
		position: absolute;
		overflow: visible;
		width: 22px;
		height: 20px;
		left: 191px;
		top: 275px;
		background: url(https://imgur.com/2oN2mM2);
	[/class]
	[class=button_2]
		position: absolute;
		overflow: visible;
		width: 32px;
		height: 21px;
		left: 152px;
		top: 274px;
		background: url(https://imgur.com/RRxsOEE);
	[/class]
[div class=background]
  [div class=Text_Container][div class=Text_Box]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in. Viverra nam libero justo laoreet sit amet cursus. Euismod elementum nisi quis eleifend quam adipiscing vitae. Facilisis gravida neque convallis a cras semper auctor. Dictumst quisque sagittis purus sit. Ut ornare lectus sit amet est placerat in egestas. Id semper risus in hendrerit gravida rutrum quisque non tellus. Vitae aliquet nec ullamcorper sit amet. Id semper risus in hendrerit gravida rutrum quisque non. Mi quis hendrerit dolor magna eget est. Facilisi morbi tempus iaculis urna id. Fames ac turpis egestas integer eget aliquet nibh. Tortor posuere ac ut consequat semper viverra nam libero.

Quisque sagittis purus sit amet volutpat consequat. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Arcu dui vivamus arcu felis bibendum ut tristique et. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Et malesuada fames ac turpis egestas. Risus feugiat in ante metus dictum at tempor commodo. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Diam maecenas sed enim ut sem viverra. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Amet dictum sit amet justo donec enim diam vulputate ut.

Aliquam sem fringilla ut morbi tincidunt augue. Et molestie ac feugiat sed. Vitae turpis massa sed elementum tempus egestas sed sed risus. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Enim blandit volutpat maecenas volutpat blandit. Ultricies lacus sed turpis tincidunt id aliquet risus. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Eget mi proin sed libero enim. In arcu cursus euismod quis viverra nibh cras pulvinar. Sed augue lacus viverra vitae congue eu consequat. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Morbi tincidunt augue interdum velit euismod. Suspendisse sed nisi lacus sed viverra tellus in hac.

Cras adipiscing enim eu turpis egestas pretium aenean. Duis at tellus at urna condimentum mattis pellentesque id. Sodales ut etiam sit amet nisl purus. Vel turpis nunc eget lorem dolor sed. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Vel pretium lectus quam id leo. Diam quis enim lobortis scelerisque fermentum dui. Nec ultrices dui sapien eget mi proin sed libero enim. At auctor urna nunc id. Massa placerat duis ultricies lacus sed turpis. Augue ut lectus arcu bibendum at varius vel. Lectus magna fringilla urna porttitor rhoncus dolor. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Viverra maecenas accumsan lacus vel facilisis volutpat. In massa tempor nec feugiat. Non blandit massa enim nec. A pellentesque sit amet porttitor eget dolor morbi. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper.

Maecenas ultricies mi eget mauris pharetra. Sit amet risus nullam eget. Diam sollicitudin tempor id eu. At in tellus integer feugiat scelerisque varius morbi enim nunc. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Ac ut consequat semper viverra nam libero justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Dui id ornare arcu odio ut. Suspendisse in est ante in nibh mauris cursus mattis molestie. Sed odio morbi quis commodo odio. Sit amet nisl suscipit adipiscing bibendum est ultricies. Quisque sagittis purus sit amet volutpat consequat mauris. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Massa tincidunt dui ut ornare. At varius vel pharetra vel turpis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.[/div][/div]
  [div class=Image_3] [/div]
  [div class=Image_2] [/div]
  [div class=Image_1] [/div]
  [div class=Text_or_quote_here]"Eternity ends and begins with the ocean's tides"[/div]
  [div class=button_1] [/div]
  [div class=button_3] [/div]
  [div class=button_2] [/div]

Code 2
Code:
[nobr]
	[class= Artboard1]
		position: absolute;
		box-sizing: border-box;
		width: 403px;
		height: 279px;
		background-color:#B7C7AA;
		overflow: hidden;
         margin-right:auto;
        margin-left:auto;
        [/class]
       [class= background]
		position: absolute;
		overflow: visible;
		width: 403px;
		height: 279px;
		position: absolute;
		box-sizing: border-box;
		background-color:#B7C7AA;
		overflow: hidden;
               margin-right:auto;
                margin-left:auto;
	[/class]
	[class=sidebar]
		position: absolute;
		overflow: visible;
		width: 170px;
		height: 279px;
		left: 0px;
		top: 0px;
        background-color:#3C493F;
	[/class]
	[class=photo]
		position: absolute;
		overflow: visible;
		width: 58px;
		height: 58px;
		left: 5px;
		top: 72px;
	    border-radius: 200px;
        border: 4px solid #B7C7AA;
        background:(url=https://i.pinimg.com/564x/86/0d/22/860d22e921fe83934372a5b2a3849851.jpg);
        background-size:100%;
        [/class]
	[class=Line1]
		overflow: visible;
		position: absolute;
		width: 96px;
		height: 1px;
		left: 63.5px;
		top: 95.5px;
        border: 1px solid #B6C6A9;
        line height: 0px;
	[/class]
	[class=name1]
		overflow: visible;
		position: absolute;
		width: 100px;
		height: 1px;
		left: 59.5px;
		top: 117.5px;
        border: 1px solid #B6C6A9;
        line height: 0px
	[/class]
	[class=border]
		position: absolute;
		overflow: visible;
		width: 199px;
		height: 235px;
		left: 183px;
		top: 22px;
        background color:#3C493F;
	[/class]
	[class=insertquotehere]
		position: absolute;
		left: 60px;
		top: 127px;
		overflow: hidden;
		width: 101px;
		height: 55px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 19px;
		color:#C8EAD2;
	[/class]
	[class=moodlocationmentionsoutfits]
		position: absolute;
		left: 3px;
		top: 182px;
		overflow: hidden;
		width: 158px;
		height: 19px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		color:#C8EAD2;
	[/class]
	[class=text]
		position:relative;
		overflow: auto;
		width: 185px;
		height: 200px;
        font-weight: normal;
        font-size: 10px;
        color:#C8EAD2;
        padding: 10px;
        text align: center;
	[/class]
      [class=textcontainer]
		position: absolute;
		overflow:hidden;
		width: 179px;
		height: 200px;
		left: 193px;
		top: 32px;
        background color:#7E8D86;
        
	[/class]
	[class=charactername]
		position: absolute;
		left: 65px;
		top: 96px;
		overflow: hidden;
		width: 91px;
		height: 12px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		color:#C8EAD2;
	[/class][/nobr]
	[dive class=Artboard1][/div]
	[div class=background]
	[/div]
	[div class=sidebar]
	[/div]
	[div class=photo]
	[/div]
	[div class=Line_1]
	[/div]
	[div class=name1]
	[/div]
	[div class=border]
	[/div]
	[div class=]
	[/div]
	[div id=insertquotehere]"Shooting stars, pale moonlight"[/div]
	[div class=moodlocationmentionsoutfits]mood location mentions outfits
	[/div]
	[div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa ultricies mi quis. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Est ultricies integer quis auctor elit sed. Odio aenean sed adipiscing diam donec. Massa massa ultricies mi quis hendrerit dolor magna. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Facilisi morbi tempus iaculis urna id volutpat. Et molestie ac feugiat sed lectus vestibulum mattis. Ullamcorper sit amet risus nullam. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Quis commodo odio aenean sed adipiscing diam donec. Penatibus et magnis dis parturient montes nascetur. Tempor id eu nisl nunc mi. Magna sit amet purus gravida quis blandit turpis cursus in. Felis eget velit aliquet sagittis id consectetur purus ut. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Odio eu feugiat pretium nibh ipsum consequat.

Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Vestibulum lectus mauris ultrices eros in. Ultrices tincidunt arcu non sodales neque. Dignissim suspendisse in est ante in. Enim blandit volutpat maecenas volutpat. Cum sociis natoque penatibus et magnis dis parturient. At auctor urna nunc id cursus metus. Tincidunt dui ut ornare lectus sit amet est. Tellus cras adipiscing enim eu turpis egestas pretium. Ut ornare lectus sit amet est. Vestibulum rhoncus est pellentesque elit ullamcorper. Tempus imperdiet nulla malesuada pellentesque elit eget. Nascetur ridiculus mus mauris vitae ultricies leo. Congue quisque egestas diam in arcu cursus euismod quis viverra. Scelerisque viverra mauris in aliquam.

Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Sed arcu non odio euismod lacinia. Molestie ac feugiat sed lectus vestibulum. Sagittis aliquam malesuada bibendum arcu vitae elementum. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Lacus viverra vitae congue eu consequat. Integer enim neque volutpat ac tincidunt vitae semper quis. Nisi lacus sed viverra tellus in hac habitasse platea. At augue eget arcu dictum. Mauris sit amet massa vitae tortor condimentum lacinia. Euismod lacinia at quis risus sed vulputate. Dui id ornare arcu odio. Nec feugiat in fermentum posuere urna. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Id consectetur purus ut faucibus pulvinar elementum integer enim. Eget mauris pharetra et ultrices neque ornare aenean. Amet risus nullam eget felis eget nunc.

Urna nec tincidunt praesent semper feugiat nibh sed. Vitae sapien pellentesque habitant morbi tristique. Mauris in aliquam sem fringilla ut morbi. Enim sed faucibus turpis in eu mi bibendum neque egestas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Enim diam vulputate ut pharetra. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Integer eget aliquet nibh praesent tristique magna sit. Eget dolor morbi non arcu risus. Adipiscing at in tellus integer feugiat. Tincidunt id aliquet risus feugiat. Interdum consectetur libero id faucibus. Aenean pharetra magna ac placerat vestibulum lectus mauris. Non nisi est sit amet facilisis magna etiam.

Convallis aenean et tortor at risus viverra. Vestibulum lectus mauris ultrices eros. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Proin fermentum leo vel orci porta non pulvinar neque. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nibh praesent tristique magna sit amet purus gravida. Adipiscing at in tellus integer feugiat scelerisque. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nam at lectus urna duis convallis convallis tellus. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Fringilla ut morbi tincidunt augue interdum velit euismod. Congue quisque egestas diam in arcu cursus euismod. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Viverra vitae congue eu consequat. Adipiscing bibendum est ultricies integer quis auctor. Mauris pharetra et ultrices neque ornare aenean euismod elementum.[/div][/div]
	[div class=charactername]
	[/div]
 
Last edited:
hello! so i fixed code one for you! it was a lot of adding and deleting certain tags that didn't belong in some of the classes.

the reason why the scroll was awkward was because the 'text box' class and 'text container' class had tags that weren't necessary and placed in the wrong area - switching them up.

so hopefully, by your screenshots, the code below is how you wanted it to function!
if so, i cleaned it up a bit for you! although there isn't a hidden scroll in this one in your text box, there's a auto scroll that i incorporated for you.

i also went ahead and fixed some of the images that seemed to not be working and positioned some of the images around as well according to the image you provided.

note: i can't place [ 2 ] codes in the same post so i'll be sending another variation of your code one.

Code:
[nobr]
	[class=background]
		position: relative;
		box-sizing: border-box;
		width: 250px;
		height: 350px;
		background-color:#E8E8E8;
		margin: auto;
		padding: 0;
	[/class]
	[class=Text_container]
		position: absolute;
		overflow: hidden;
		width: 100%;
		height: 100%;
	[/class]
	[class=Text_Box]
		position: relative;
		overflow-y: auto;
		width: 90px;
		height: 250px;
		font size; 8px;
		background-color: #6A8E8E;
		color: black;
		margin-left: 120px;
		top: 30px;
		overflow-y: scroll;
		padding-right: 17px;
		box-sizing: content-box;
		border: 4px solid #8BA0B3;
	[/class]
	[class=Image_3]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 42px;
		background:url(https://66.media.tumblr.com/85ca252a623eeb5c83d74f47575badb7/tumblr_pmrrgerICu1vxt811_540.jpg);
		background-position: center;
		background-size:75%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_2]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 10px;
		top: 81px;
		background:url(https://66.media.tumblr.com/b32fd70bfd3d05cdef495d6562119cc3/tumblr_pmrrgeqrPK1vxt811_540.jpg);
		background-size: 100%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_1]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 129px;
		background:url(https://66.media.tumblr.com/ca62ccf25595a503bf0e7bb30b8bfaaa/tumblr_pmrrgfdQQR1vxt811_540.jpg);
		background-size: 100%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Text_or_quote_here]
		position: absolute;
		left: 6px;
		top: 210px;
		width: 111px;
		height: 94px;
		text-align:center;
		font-weight: 200;
		font-size: 17px;
		color: black;
	[/class]
	[class=button_1]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 120px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
	[class=button_3]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 205px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
	[class=button_2]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 163px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
[div class=background]
[div class=Text_container][div class=Text_Box]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in. Viverra nam libero justo laoreet sit amet cursus. Euismod elementum nisi quis eleifend quam adipiscing vitae. Facilisis gravida neque convallis a cras semper auctor. Dictumst quisque sagittis purus sit. Ut ornare lectus sit amet est placerat in egestas. Id semper risus in hendrerit gravida rutrum quisque non tellus. Vitae aliquet nec ullamcorper sit amet. Id semper risus in hendrerit gravida rutrum quisque non. Mi quis hendrerit dolor magna eget est. Facilisi morbi tempus iaculis urna id. Fames ac turpis egestas integer eget aliquet nibh. Tortor posuere ac ut consequat semper viverra nam libero.

Quisque sagittis purus sit amet volutpat consequat. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Arcu dui vivamus arcu felis bibendum ut tristique et. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Et malesuada fames ac turpis egestas. Risus feugiat in ante metus dictum at tempor commodo. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Diam maecenas sed enim ut sem viverra. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Amet dictum sit amet justo donec enim diam vulputate ut.

Aliquam sem fringilla ut morbi tincidunt augue. Et molestie ac feugiat sed. Vitae turpis massa sed elementum tempus egestas sed sed risus. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Enim blandit volutpat maecenas volutpat blandit. Ultricies lacus sed turpis tincidunt id aliquet risus. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Eget mi proin sed libero enim. In arcu cursus euismod quis viverra nibh cras pulvinar. Sed augue lacus viverra vitae congue eu consequat. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Morbi tincidunt augue interdum velit euismod. Suspendisse sed nisi lacus sed viverra tellus in hac.

Cras adipiscing enim eu turpis egestas pretium aenean. Duis at tellus at urna condimentum mattis pellentesque id. Sodales ut etiam sit amet nisl purus. Vel turpis nunc eget lorem dolor sed. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Vel pretium lectus quam id leo. Diam quis enim lobortis scelerisque fermentum dui. Nec ultrices dui sapien eget mi proin sed libero enim. At auctor urna nunc id. Massa placerat duis ultricies lacus sed turpis. Augue ut lectus arcu bibendum at varius vel. Lectus magna fringilla urna porttitor rhoncus dolor. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Viverra maecenas accumsan lacus vel facilisis volutpat. In massa tempor nec feugiat. Non blandit massa enim nec. A pellentesque sit amet porttitor eget dolor morbi. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper.

Maecenas ultricies mi eget mauris pharetra. Sit amet risus nullam eget. Diam sollicitudin tempor id eu. At in tellus integer feugiat scelerisque varius morbi enim nunc. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Ac ut consequat semper viverra nam libero justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Dui id ornare arcu odio ut. Suspendisse in est ante in nibh mauris cursus mattis molestie. Sed odio morbi quis commodo odio. Sit amet nisl suscipit adipiscing bibendum est ultricies. Quisque sagittis purus sit amet volutpat consequat mauris. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Massa tincidunt dui ut ornare. At varius vel pharetra vel turpis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.[/div][/div]
  [div class=Image_3] [/div]
  [div class=Image_2] [/div]
  [div class=Image_1] [/div]
  [div class=Text_or_quote_here]"Eternity ends and begins with the ocean's tides"[/div]
  [div class=button_1] [/div]
  [div class=button_3] [/div]
  [div class=button_2] [/div]
 
in the code provided below, it is still code one, however, i added a hidden scroll code using divs. hopefully this is what youre looking for in regards to a hidden scroll.

Code:
[nobr]
	[class=background]
		position: relative;
		box-sizing: border-box;
		width: 250px;
		height: 350px;
		background-color:#E8E8E8;
		margin: auto;
		padding: 0;
	[/class]
	[class=Text_container]
		position: absolute;
		width: 100%;
		height: 100%;
	[/class]
	[class=Text_Box]
		position: relative;
		width: 90px;
		height: 250px;
		font size; 8px;
		background-color: #6A8E8E;
		color: black;
		margin-left: 120px;
		top: 30px;
		padding-right: 17px;
		box-sizing: content-box;
		border: 4px solid #8BA0B3;
	[/class]
	[class=Image_3]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 42px;
		background:url(https://66.media.tumblr.com/85ca252a623eeb5c83d74f47575badb7/tumblr_pmrrgerICu1vxt811_540.jpg);
		background-position: center;
		background-size:75%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_2]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 10px;
		top: 81px;
		background:url(https://66.media.tumblr.com/b32fd70bfd3d05cdef495d6562119cc3/tumblr_pmrrgeqrPK1vxt811_540.jpg);
		background-size: 100%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Image_1]
		position: absolute;
		width: 69px;
		height: 69px;
		left: 24px;
		top: 129px;
		background:url(https://66.media.tumblr.com/ca62ccf25595a503bf0e7bb30b8bfaaa/tumblr_pmrrgfdQQR1vxt811_540.jpg);
		background-size: 100%;
		border:4px solid #8BA0B3;
	[/class]
	[class=Text_or_quote_here]
		position: absolute;
		left: 6px;
		top: 210px;
		width: 111px;
		height: 94px;
		text-align:center;
		font-weight: 200;
		font-size: 17px;
		color: black;
	[/class]
	[class=button_1]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 120px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
	[class=button_3]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 205px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
	[class=button_2]
		position: absolute;
		width: 30px;
		height: 30px;
		left: 163px;
		top: 305px;
		background: url(https://via.placeholder.com/30x30);
	[/class]
[div class=background]
[div class=Text_container][div class=Text_Box][div=width: calc(100% - 0%); height: 240px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac auctor augue mauris augue neque gravida in. Viverra nam libero justo laoreet sit amet cursus. Euismod elementum nisi quis eleifend quam adipiscing vitae. Facilisis gravida neque convallis a cras semper auctor. Dictumst quisque sagittis purus sit. Ut ornare lectus sit amet est placerat in egestas. Id semper risus in hendrerit gravida rutrum quisque non tellus. Vitae aliquet nec ullamcorper sit amet. Id semper risus in hendrerit gravida rutrum quisque non. Mi quis hendrerit dolor magna eget est. Facilisi morbi tempus iaculis urna id. Fames ac turpis egestas integer eget aliquet nibh. Tortor posuere ac ut consequat semper viverra nam libero.

Quisque sagittis purus sit amet volutpat consequat. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Arcu dui vivamus arcu felis bibendum ut tristique et. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Et malesuada fames ac turpis egestas. Risus feugiat in ante metus dictum at tempor commodo. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Diam maecenas sed enim ut sem viverra. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Amet dictum sit amet justo donec enim diam vulputate ut.

Aliquam sem fringilla ut morbi tincidunt augue. Et molestie ac feugiat sed. Vitae turpis massa sed elementum tempus egestas sed sed risus. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Enim blandit volutpat maecenas volutpat blandit. Ultricies lacus sed turpis tincidunt id aliquet risus. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Eget mi proin sed libero enim. In arcu cursus euismod quis viverra nibh cras pulvinar. Sed augue lacus viverra vitae congue eu consequat. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Morbi tincidunt augue interdum velit euismod. Suspendisse sed nisi lacus sed viverra tellus in hac.

Cras adipiscing enim eu turpis egestas pretium aenean. Duis at tellus at urna condimentum mattis pellentesque id. Sodales ut etiam sit amet nisl purus. Vel turpis nunc eget lorem dolor sed. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Vel pretium lectus quam id leo. Diam quis enim lobortis scelerisque fermentum dui. Nec ultrices dui sapien eget mi proin sed libero enim. At auctor urna nunc id. Massa placerat duis ultricies lacus sed turpis. Augue ut lectus arcu bibendum at varius vel. Lectus magna fringilla urna porttitor rhoncus dolor. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Viverra maecenas accumsan lacus vel facilisis volutpat. In massa tempor nec feugiat. Non blandit massa enim nec. A pellentesque sit amet porttitor eget dolor morbi. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper.

Maecenas ultricies mi eget mauris pharetra. Sit amet risus nullam eget. Diam sollicitudin tempor id eu. At in tellus integer feugiat scelerisque varius morbi enim nunc. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Ac ut consequat semper viverra nam libero justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Dui id ornare arcu odio ut. Suspendisse in est ante in nibh mauris cursus mattis molestie. Sed odio morbi quis commodo odio. Sit amet nisl suscipit adipiscing bibendum est ultricies. Quisque sagittis purus sit amet volutpat consequat mauris. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Massa tincidunt dui ut ornare. At varius vel pharetra vel turpis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.[/div][/div][/div][/div]
  [div class=Image_3] [/div]
  [div class=Image_2] [/div]
  [div class=Image_1] [/div]
  [div class=Text_or_quote_here]"Eternity ends and begins with the ocean's tides"[/div]
  [div class=button_1] [/div]
  [div class=button_3] [/div]
  [div class=button_2] [/div]
 
okay, so first thing i noticed in code two is that your 'artboard' and your 'background' class were written as follows: [class= Artboard] instead of [class=Artboard]. if you notice, the way the first class is written, there's a space between the "=" sign and the word, there shouldn't be one !

so your two classes "artboard" and "background" had those spaces where it shouldn't have been any!

there were some classes that were position absolute and some could have been position relative! that being said, i was able to fix the code ! the hidden scrolls aren't there since i generally use the hidden scroll div than classes for it , nevertheless, code should still scroll !

i fixed your character name area and had to position things around as well !

hopefully this is what you're looking for! used your image as a guide! i also fixed your photo as well !

Code:
[nobr]
[class=Artboard1]
		position: absolute;
		box-sizing: border-box;
		width: 403px;
		height: 279px;
		background-color:#B7C7AA;
		overflow: hidden;
         margin-right:auto;
        margin-left:auto;
        [/class]
       [class=background]
		position: absolute;
		width: 403px;
		height: 279px;
		box-sizing: border-box;
		background-color:#B7C7AA;
	[/class]
	[class=sidebar]
		position: relative;
		overflow: visible;
		width: 170px;
		height: 279px;
		left: 0px;
		top: 0px;
		background-color:#3C493F;
	[/class]
	[class=photo]
		position: absolute;
		width: 58px;
		height: 58px;
		left: 5px;
		top: 72px;
		border-radius: 100%;
		border: 4px solid #B7C7AA;
		background: url(https://i.pinimg.com/564x/86/0d/22/860d22e921fe83934372a5b2a3849851.jpg);
		background-size: 100%;
        [/class]
	[class=insertquotehere]
		position: absolute;
		left: 60px;
		top: 127px;
		overflow: hidden;
		width: 101px;
		height: 55px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 19px;
		color:#C8EAD2;
	[/class]
	[class=moodlocationmentionsoutfits]
		position: absolute;
		left: 3px;
		top: 182px;
		overflow: hidden;
		width: 158px;
		height: 19px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		color:#C8EAD2;
	[/class]
	[class=text]
		position: absolute;
		overflow-y: scroll;
		height: 180px;
		font-weight: normal;
		font-size: 10px;
		color:#C8EAD2;
		padding: 10px;
		text align: center;
	[/class]
      [class=textcontainer]
		position: absolute;
		overflow: hidden;
		overflow-x: hidden;
		width: 185px;
		height: 200px;;
		left: 185px;
		top: 40px;
		background-color: #7E8D86;
		border: 10px solid #3C493F; 
	[/class]
	[class=Line1]
		display: inline-block;
		overflow: visible;
		position: absolute;
		width: 96px;
		height: 1px;
		left: 67px;
		top: 95.5px;
		background-color: #B6C6A9;
		line height: 0px;
	[/class]
	[class=charactername]
		display: inline-block;
		position: absolute;
		left: 0px;
		top: -25px;
		width: 91px;
		height: 12px;
		text-align: center;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		color:#C8EAD2;
	[/class]
	[class=Line2]
		display: inline-block;
		overflow: visible;
		position: absolute;
		width: 96px;
		height: 1px;
		left: -5px;
		top: 30px;
		background-color: #B6C6A9;
		line height: 0px;
	[/class]
	[div class=Artboard1]
	[/div]
	[div class=background]
	[/div]
	[div class=sidebar]
	[/div]
	[div class=photo]
	[/div]
	[div class=name1]
	[/div]
	[div class=insertquotehere]"Shooting stars, pale moonlight"[/div]
	[div class=moodlocationmentionsoutfits]mood location mentions outfits
	[/div]
	[div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa ultricies mi quis. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Est ultricies integer quis auctor elit sed. Odio aenean sed adipiscing diam donec. Massa massa ultricies mi quis hendrerit dolor magna. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Facilisi morbi tempus iaculis urna id volutpat. Et molestie ac feugiat sed lectus vestibulum mattis. Ullamcorper sit amet risus nullam. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Quis commodo odio aenean sed adipiscing diam donec. Penatibus et magnis dis parturient montes nascetur. Tempor id eu nisl nunc mi. Magna sit amet purus gravida quis blandit turpis cursus in. Felis eget velit aliquet sagittis id consectetur purus ut. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Odio eu feugiat pretium nibh ipsum consequat.

Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Vestibulum lectus mauris ultrices eros in. Ultrices tincidunt arcu non sodales neque. Dignissim suspendisse in est ante in. Enim blandit volutpat maecenas volutpat. Cum sociis natoque penatibus et magnis dis parturient. At auctor urna nunc id cursus metus. Tincidunt dui ut ornare lectus sit amet est. Tellus cras adipiscing enim eu turpis egestas pretium. Ut ornare lectus sit amet est. Vestibulum rhoncus est pellentesque elit ullamcorper. Tempus imperdiet nulla malesuada pellentesque elit eget. Nascetur ridiculus mus mauris vitae ultricies leo. Congue quisque egestas diam in arcu cursus euismod quis viverra. Scelerisque viverra mauris in aliquam.

Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Sed arcu non odio euismod lacinia. Molestie ac feugiat sed lectus vestibulum. Sagittis aliquam malesuada bibendum arcu vitae elementum. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Lacus viverra vitae congue eu consequat. Integer enim neque volutpat ac tincidunt vitae semper quis. Nisi lacus sed viverra tellus in hac habitasse platea. At augue eget arcu dictum. Mauris sit amet massa vitae tortor condimentum lacinia. Euismod lacinia at quis risus sed vulputate. Dui id ornare arcu odio. Nec feugiat in fermentum posuere urna. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Id consectetur purus ut faucibus pulvinar elementum integer enim. Eget mauris pharetra et ultrices neque ornare aenean. Amet risus nullam eget felis eget nunc.

Urna nec tincidunt praesent semper feugiat nibh sed. Vitae sapien pellentesque habitant morbi tristique. Mauris in aliquam sem fringilla ut morbi. Enim sed faucibus turpis in eu mi bibendum neque egestas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Enim diam vulputate ut pharetra. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Integer eget aliquet nibh praesent tristique magna sit. Eget dolor morbi non arcu risus. Adipiscing at in tellus integer feugiat. Tincidunt id aliquet risus feugiat. Interdum consectetur libero id faucibus. Aenean pharetra magna ac placerat vestibulum lectus mauris. Non nisi est sit amet facilisis magna etiam.

Convallis aenean et tortor at risus viverra. Vestibulum lectus mauris ultrices eros. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Proin fermentum leo vel orci porta non pulvinar neque. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nibh praesent tristique magna sit amet purus gravida. Adipiscing at in tellus integer feugiat scelerisque. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nam at lectus urna duis convallis convallis tellus. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Fringilla ut morbi tincidunt augue interdum velit euismod. Congue quisque egestas diam in arcu cursus euismod. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Viverra vitae congue eu consequat. Adipiscing bibendum est ultricies integer quis auctor. Mauris pharetra et ultrices neque ornare aenean euismod elementum.[/div][/div]
	[div class=Line1][div class=Line2][div class=charactername]boop boop
	[/div][/div][/div][/nobr]
 
okay, so first thing i noticed in code two is that your 'artboard' and your 'background' class were written as follows: [class= Artboard] instead of [class=Artboard]. if you notice, the way the first class is written, there's a space between the "=" sign and the word, there shouldn't be one !

so your two classes "artboard" and "background" had those spaces where it shouldn't have been any!

there were some classes that were position absolute and some could have been position relative! that being said, i was able to fix the code ! the hidden scrolls aren't there since i generally use the hidden scroll div than classes for it , nevertheless, code should still scroll !

i fixed your character name area and had to position things around as well !

hopefully this is what you're looking for! used your image as a guide! i also fixed your photo as well !

Code:
[nobr]
[class=Artboard1]
        position: absolute;
        box-sizing: border-box;
        width: 403px;
        height: 279px;
        background-color:#B7C7AA;
        overflow: hidden;
         margin-right:auto;
        margin-left:auto;
        [/class]
       [class=background]
        position: absolute;
        width: 403px;
        height: 279px;
        box-sizing: border-box;
        background-color:#B7C7AA;
    [/class]
    [class=sidebar]
        position: relative;
        overflow: visible;
        width: 170px;
        height: 279px;
        left: 0px;
        top: 0px;
        background-color:#3C493F;
    [/class]
    [class=photo]
        position: absolute;
        width: 58px;
        height: 58px;
        left: 5px;
        top: 72px;
        border-radius: 100%;
        border: 4px solid #B7C7AA;
        background: url(https://i.pinimg.com/564x/86/0d/22/860d22e921fe83934372a5b2a3849851.jpg);
        background-size: 100%;
        [/class]
    [class=insertquotehere]
        position: absolute;
        left: 60px;
        top: 127px;
        overflow: hidden;
        width: 101px;
        height: 55px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 19px;
        color:#C8EAD2;
    [/class]
    [class=moodlocationmentionsoutfits]
        position: absolute;
        left: 3px;
        top: 182px;
        overflow: hidden;
        width: 158px;
        height: 19px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        color:#C8EAD2;
    [/class]
    [class=text]
        position: absolute;
        overflow-y: scroll;
        height: 180px;
        font-weight: normal;
        font-size: 10px;
        color:#C8EAD2;
        padding: 10px;
        text align: center;
    [/class]
      [class=textcontainer]
        position: absolute;
        overflow: hidden;
        overflow-x: hidden;
        width: 185px;
        height: 200px;;
        left: 185px;
        top: 40px;
        background-color: #7E8D86;
        border: 10px solid #3C493F; 
    [/class]
    [class=Line1]
        display: inline-block;
        overflow: visible;
        position: absolute;
        width: 96px;
        height: 1px;
        left: 67px;
        top: 95.5px;
        background-color: #B6C6A9;
        line height: 0px;
    [/class]
    [class=charactername]
        display: inline-block;
        position: absolute;
        left: 0px;
        top: -25px;
        width: 91px;
        height: 12px;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        color:#C8EAD2;
    [/class]
    [class=Line2]
        display: inline-block;
        overflow: visible;
        position: absolute;
        width: 96px;
        height: 1px;
        left: -5px;
        top: 30px;
        background-color: #B6C6A9;
        line height: 0px;
    [/class]
    [div class=Artboard1]
    [/div]
    [div class=background]
    [/div]
    [div class=sidebar]
    [/div]
    [div class=photo]
    [/div]
    [div class=name1]
    [/div]
    [div class=insertquotehere]"Shooting stars, pale moonlight"[/div]
    [div class=moodlocationmentionsoutfits]mood location mentions outfits
    [/div]
    [div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna et pharetra pharetra massa massa ultricies mi quis. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Est ultricies integer quis auctor elit sed. Odio aenean sed adipiscing diam donec. Massa massa ultricies mi quis hendrerit dolor magna. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Facilisi morbi tempus iaculis urna id volutpat. Et molestie ac feugiat sed lectus vestibulum mattis. Ullamcorper sit amet risus nullam. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Quis commodo odio aenean sed adipiscing diam donec. Penatibus et magnis dis parturient montes nascetur. Tempor id eu nisl nunc mi. Magna sit amet purus gravida quis blandit turpis cursus in. Felis eget velit aliquet sagittis id consectetur purus ut. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Odio eu feugiat pretium nibh ipsum consequat.

Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Vestibulum lectus mauris ultrices eros in. Ultrices tincidunt arcu non sodales neque. Dignissim suspendisse in est ante in. Enim blandit volutpat maecenas volutpat. Cum sociis natoque penatibus et magnis dis parturient. At auctor urna nunc id cursus metus. Tincidunt dui ut ornare lectus sit amet est. Tellus cras adipiscing enim eu turpis egestas pretium. Ut ornare lectus sit amet est. Vestibulum rhoncus est pellentesque elit ullamcorper. Tempus imperdiet nulla malesuada pellentesque elit eget. Nascetur ridiculus mus mauris vitae ultricies leo. Congue quisque egestas diam in arcu cursus euismod quis viverra. Scelerisque viverra mauris in aliquam.

Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Sed arcu non odio euismod lacinia. Molestie ac feugiat sed lectus vestibulum. Sagittis aliquam malesuada bibendum arcu vitae elementum. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Lacus viverra vitae congue eu consequat. Integer enim neque volutpat ac tincidunt vitae semper quis. Nisi lacus sed viverra tellus in hac habitasse platea. At augue eget arcu dictum. Mauris sit amet massa vitae tortor condimentum lacinia. Euismod lacinia at quis risus sed vulputate. Dui id ornare arcu odio. Nec feugiat in fermentum posuere urna. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Id consectetur purus ut faucibus pulvinar elementum integer enim. Eget mauris pharetra et ultrices neque ornare aenean. Amet risus nullam eget felis eget nunc.

Urna nec tincidunt praesent semper feugiat nibh sed. Vitae sapien pellentesque habitant morbi tristique. Mauris in aliquam sem fringilla ut morbi. Enim sed faucibus turpis in eu mi bibendum neque egestas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Enim diam vulputate ut pharetra. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Integer eget aliquet nibh praesent tristique magna sit. Eget dolor morbi non arcu risus. Adipiscing at in tellus integer feugiat. Tincidunt id aliquet risus feugiat. Interdum consectetur libero id faucibus. Aenean pharetra magna ac placerat vestibulum lectus mauris. Non nisi est sit amet facilisis magna etiam.

Convallis aenean et tortor at risus viverra. Vestibulum lectus mauris ultrices eros. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Proin fermentum leo vel orci porta non pulvinar neque. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nibh praesent tristique magna sit amet purus gravida. Adipiscing at in tellus integer feugiat scelerisque. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nam at lectus urna duis convallis convallis tellus. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Fringilla ut morbi tincidunt augue interdum velit euismod. Congue quisque egestas diam in arcu cursus euismod. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Viverra vitae congue eu consequat. Adipiscing bibendum est ultricies integer quis auctor. Mauris pharetra et ultrices neque ornare aenean euismod elementum.[/div][/div]
    [div class=Line1][div class=Line2][div class=charactername]boop boop
    [/div][/div][/div][/nobr]

Thank you so much for the help with the coding, cause honestly, I've been rather confused as to why my codes never seem to preview properly, lol. So thanks for the help so I guess I still have to keep on learning and trying.
 

Users who are viewing this thread

Back
Top