lesson 7: Scroll And Overflow
ドリーミン (Dreamin') Tutorial
now playing NCT127 - Limitless
LESSON 7: SCROLL AND OVERFLOW
Before I do the graphic tutorial, I'll do this one first since someone has asked for it. So scroll and overflow are related. To make your text box scrollable/ scroll-able (idk which one is true xD) you have to use the overflow in your coding. So today I'll teach you on how to make your text box scrollable both visible and invisible (the scroll thingie).
1. INTRODUCTION
Before I can teach you about scrollable feature, I will tell to you about overflow. Overflow is used to add the scroll and allow your text box to be scrollable. There are two types of overflow that can be used in asianfanfics (there three tbh but i just teach you two, there other one is not really useful).
1. OVERFLOW:AUTO
This one will automatically add a scroll to your text box when its content exceed the size of the box. Below are examples.
2. OVERFLOW:HIDDEN
This one don't allow your text box to be scrollable. But it is useful. How??!! If you want to make the scroll thingie in your text box invisible, you can use this code to help you. Below are examples.
2. SCROLLABLE TEXT BOX
1. Click on Source. Copy and paste the code.
Before I do the graphic tutorial, I'll do this one first since someone has asked for it. So scroll and overflow are related. To make your text box scrollable
1. INTRODUCTION
Before I can teach you about scrollable feature, I will tell to you about overflow. Overflow is used to add the scroll and allow your text box to be scrollable. There are two types of overflow that can be used in asianfanfics (there three tbh but i just teach you two, there other one is not really useful).
1. OVERFLOW:AUTO
This one will automatically add a scroll to your text box when its content exceed the size of the box. Below are examples.
Without overflow:auto
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
With overflow:auto
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
2. OVERFLOW:HIDDEN
This one don't allow your text box to be scrollable. But it is useful. How??!! If you want to make the scroll thingie in your text box invisible, you can use this code to help you. Below are examples.
With overflow:auto
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
YAMADA RYOSUKE
HEY! SAY! JUMP
9th May 1993
2. SCROLLABLE TEXT BOX
1. Click on Source. Copy and paste the code.
< div style="background-color:#dde2fc;height:300px;width:300px;" >ttt < /div >
(remove all of the spaces)
2. Click on Source again and you will get like this.
3. First add any word to your layout. Copy these long texts and paste them. You may change the text font and size as you want.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar lacinia justo, sit amet vestibulum ex pulvinar vel. Aliquam varius magna et ante feugiat iaculis. Cras vestibulum risus quis leo laoreet, vitae sagittis urna placerat. Aliquam quam neque, accumsan vel tempus nec, faucibus et eros. Vivamus a consequat velit, eget dapibus nulla. Cras feugiat blandit massa vel pretium. Suspendisse commodo tellus vel quam tincidunt vestibulum. Pellentesque mattis finibus lacinia. Sed eu arcu eu risus consequat pulvinar. Quisque non lacus vehicula, pretium dui eget, suscipit tortor. Nam feugiat eros ut metus aliquam lobortis. Maecenas maximus vel metus sed tristique. Aliquam dolor arcu, auctor eu pretium vehicula, lobortis ac dui. Duis felis sem, lobortis lobortis feugiat sit amet, suscipit vitae purus. Donec imperdiet eget tellus et blandit. Suspendisse sed blandit mauris, eget ornare odio.
4. As you see in second photo in step 4, the text is too long and some text is out of the box. We are going to fix it.
Now go back to source. Add the code after width:300px;.
overflow:auto;
5. There you go your scrollable text box/ layout!!! It's simple and easy.
3. HIDDEN SCROLLABLE TEXT BOX
1. Now go to Source. Then copy and paste this code.
< div style="background-color:#dde2fc;width:300px;height:300px;overflow:hidden" > ttt < /div >
(remove all of the spaces)
2. Click on Source and your layout will be look like this.
3. Now copy the code below. At Source, select the ttt and change it with the code.
< div style="background-color:transparent;width:300px;height:300px;overflow:auto;" >ttt< /div >
(remove all the spaces)
4. Now add the lorem ipsum thingie in the text box. Copy them below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar lacinia justo, sit amet vestibulum ex pulvinar vel. Aliquam varius magna et ante feugiat iaculis. Cras vestibulum risus quis leo laoreet, vitae sagittis urna placerat. Aliquam quam neque, accumsan vel tempus nec, faucibus et eros. Vivamus a consequat velit, eget dapibus nulla. Cras feugiat blandit massa vel pretium. Suspendisse commodo tellus vel quam tincidunt vestibulum. Pellentesque mattis finibus lacinia. Sed eu arcu eu risus consequat pulvinar. Quisque non lacus vehicula, pretium dui eget, suscipit tortor. Nam feugiat eros ut metus aliquam lobortis. Maecenas maximus vel metus sed tristique. Aliquam dolor arcu, auctor eu pretium vehicula, lobortis ac dui. Duis felis sem, lobortis lobortis feugiat sit amet, suscipit vitae purus. Donec imperdiet eget tellus et blandit. Suspendisse sed blandit mauris, eget ornare odio.
5. Your layout will look like this. Next step we will make the scroll thingie to be hidden.
6. At source, now in the second text box (the one with overflow:auto) change the width from 300px to 317px.
7. Click on Source again and tadaaaa!!!! Your text box is now scrollable with scroll thingie is hidden.
EXTRAAAA!!!!
8. You can make the scroll thingie to be appear but only a little. All you have to do is change the 317px to 313px.
9. Click on source again. Tadaa!! Did you see the scroll thingie there. It's smaller right? There, you are done!
Tadaaaa!!!! Finally it's done. It took long times because I'm in my lazy state xp *slap myself*. So for next chapter I'm going to make a graphic tutorial for simple poster. After the Simple Poster tutorial I'll do layout lesson again. About the render, still on going haha ene. I make Pentagon renders....because I'm in love with WOOSEOK and YEO ONE!!!! Fangirl's life T0T. The render I'll make is taken from the elite uniform (the one with I.O.I) but I make for Pentagon only. Even just Pentagon there are a lot ==. And last but not least about today lesson. In examples our model (wow model xD) is my ultimate jpop bias!! YAMADA RYOSUKE. He's my ultimate bias since 2012 haha x3. Okay I have to stop or else I can't stop fangirling *kick myself*. If you guys have any problem with today's lesson. Comment below I'll help you ASAP.
(remove all of the spaces)
2. Click on Source again and you will get like this.
3. First add any word to your layout. Copy these long texts and paste them. You may change the text font and size as you want.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar lacinia justo, sit amet vestibulum ex pulvinar vel. Aliquam varius magna et ante feugiat iaculis. Cras vestibulum risus quis leo laoreet, vitae sagittis urna placerat. Aliquam quam neque, accumsan vel tempus nec, faucibus et eros. Vivamus a consequat velit, eget dapibus nulla. Cras feugiat blandit massa vel pretium. Suspendisse commodo tellus vel quam tincidunt vestibulum. Pellentesque mattis finibus lacinia. Sed eu arcu eu risus consequat pulvinar. Quisque non lacus vehicula, pretium dui eget, suscipit tortor. Nam feugiat eros ut metus aliquam lobortis. Maecenas maximus vel metus sed tristique. Aliquam dolor arcu, auctor eu pretium vehicula, lobortis ac dui. Duis felis sem, lobortis lobortis feugiat sit amet, suscipit vitae purus. Donec imperdiet eget tellus et blandit. Suspendisse sed blandit mauris, eget ornare odio.
4. As you see in second photo in step 4, the text is too long and some text is out of the box. We are going to fix it.
Now go back to source. Add the code after width:300px;.
overflow:auto;
5. There you go your scrollable text box/ layout!!! It's simple and easy.
3. HIDDEN SCROLLABLE TEXT BOX
1. Now go to Source. Then copy and paste this code.
< div style="background-color:#dde2fc;width:300px;height:300px;overflow:hidden" > ttt < /div >
(remove all of the spaces)
2. Click on Source and your layout will be look like this.
3. Now copy the code below. At Source, select the ttt and change it with the code.
< div style="background-color:transparent;width:300px;height:300px;overflow:auto;" >ttt< /div >
(remove all the spaces)
4. Now add the lorem ipsum thingie in the text box. Copy them below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar lacinia justo, sit amet vestibulum ex pulvinar vel. Aliquam varius magna et ante feugiat iaculis. Cras vestibulum risus quis leo laoreet, vitae sagittis urna placerat. Aliquam quam neque, accumsan vel tempus nec, faucibus et eros. Vivamus a consequat velit, eget dapibus nulla. Cras feugiat blandit massa vel pretium. Suspendisse commodo tellus vel quam tincidunt vestibulum. Pellentesque mattis finibus lacinia. Sed eu arcu eu risus consequat pulvinar. Quisque non lacus vehicula, pretium dui eget, suscipit tortor. Nam feugiat eros ut metus aliquam lobortis. Maecenas maximus vel metus sed tristique. Aliquam dolor arcu, auctor eu pretium vehicula, lobortis ac dui. Duis felis sem, lobortis lobortis feugiat sit amet, suscipit vitae purus. Donec imperdiet eget tellus et blandit. Suspendisse sed blandit mauris, eget ornare odio.
5. Your layout will look like this. Next step we will make the scroll thingie to be hidden.
6. At source, now in the second text box (the one with overflow:auto) change the width from 300px to 317px.
7. Click on Source again and tadaaaa!!!! Your text box is now scrollable with scroll thingie is hidden.
EXTRAAAA!!!!
8. You can make the scroll thingie to be appear but only a little. All you have to do is change the 317px to 313px.
9. Click on source again. Tadaa!! Did you see the scroll thingie there. It's smaller right? There, you are done!
Tadaaaa!!!! Finally it's done. It took long times because I'm in my lazy state xp *slap myself*. So for next chapter I'm going to make a graphic tutorial for simple poster. After the Simple Poster tutorial I'll do layout lesson again. About the render, still on going haha ene. I make Pentagon renders....because I'm in love with WOOSEOK and YEO ONE!!!! Fangirl's life T0T. The render I'll make is taken from the elite uniform (the one with I.O.I) but I make for Pentagon only. Even just Pentagon there are a lot ==. And last but not least about today lesson. In examples our model (wow model xD) is my ultimate jpop bias!! YAMADA RYOSUKE. He's my ultimate bias since 2012 haha x3. Okay I have to stop or else I can't stop fangirling *kick myself*. If you guys have any problem with today's lesson. Comment below I'll help you ASAP.
Layout by minocha99 | 2017
To all subbies~~ Finally i'm back! My semester break has start since last two weeks but i was busy and just got my free time. I'm not sure how many updates i can make. But I try my best to update as many as i can. I haven't finish my render too. I just try to finish it as soon as i can.
Comments