r. scrollable text box inside a scrollable text box, on top of an image
TIRAMISU。 layout tutorials #hiatusHello again. I'm back with part two-ish of the last request: how to put a scrollable text box inside another scrollable text box, on top of an image. Confusing, I know. Just think of it as something like the foreword layout right now. Anyway, this is for phokyu who has been so patient with me. Thank you!
Anyway, before we start, I want you guys to remember that closing < div >'s is very important in order for this to work. If you open but do not close a < div >, there's a high chance, actually scratch that, there's no way you can make your layout work properly.
Also, if you don't know how to make a scrollable text box, please take a look at that tutorial first before you come here.
Step 1: Add your "base code"
The width of your first < div > will depend on your image's width. In this case, 800px.
< div style="width:800px;margin:auto;" >
< div style="width:800px;float:left;" >
< /div >
< /div >
Step 2: Add your image
For this, I'll use this image of Seventeen that I edited and never used. Add this after your second div.
This image is 800X600.
Step 3: Add a scrollable text box on top
If you recall the last tutorial, I explained how to do this. Just in case, I'll explain it again here.
In order to make a scrollable text box, and have it on top of your image (like my foreword layout), you need to make it the exact same size as your image, like this:
< div style="width:800px;height:600px;float:left;overflow:hidden;" >
< div style="width:820px;height:600px;float:left;overflow:auto;" >
< div style="width:800px;float:left;">
< /div >
< /div >
< /div >
Then you add 'margin-top:(add the height of your image)px' to your first div, like this:
< div style="width:800px;height:600px;float:left;overflow:hidden;margin-top:-600px;" >
< /div >
So far, your code should look like this:
< div style="width:800px;margin:auto;" >
< div style="width:800px;float:left;" >
< img src="http://i.imgur.com/InSZHoH.png" style="float:left;" >
< div style="width:800px;height:600px;float:left;overflow:hidden;margin-top:-600px;" >
< div style="width:820px;height:600px;float:left;overflow:auto;" >
< div style="width:800px;float:left;" >
< /div >
< /div >
< /div >
< /div >
< /div >
Now, let's say you want to add a title page or something of some sort. In order to make this, you will need to create another < div > with the exact size of your image, like this:
< div style="width:800px;height:600px;float:left;" >
< div style="font-family:arial;font-size:60px;color:#fff;text-align:center;margin-top:300px;letter-spacing:-2px;">
< strong >seventeen< /strong>
< /div >
< /div >
This is how your layout should look like so far:
I know, you must be thinking "this isn't scrollable!" Well, yeah. It isn't, yet.
Now, we'll add another < div > right underneath this one we just made, not inside it, where we'll add an "about" section that is scrollable.
To do this, create a new text box with the same height of your image, except with padding, like this:
< div style="width:600px;height:400px;float:left;padding:100px;" >
< /div >
Now, create a new < div > with padding, that equals the amount of your widthxheight of your div above, and a background color:
< div style="width:600px;height:400px;float:left;padding:100px;" >
< div style="width:560px;height:360px;float:left;padding:20px;background-color:#fff;" >
seventeen
< /div >
< /div >
This is how your layout will look like now:
Now, make this text box you created scrollable. Remember to close your < div >'s!
< div style="width:600px;height:400px;float:left;padding:100px;" >
< div style="width:560px;height:360px;float:left;padding:20px;background-color:#fff;overflow:hidden;" >
< div style="width:600px;height:360px;float:left;overflow:auto;" >
< div style="width:560px;float:left;" >
seventeen
< /div >
< /div >
< /div >
< /div >
Inside this scrollable text box, add another < div > (which is the same size as your div: 560X360) and inside add a scrollable text box, like this:
< div style="width:600px;height:400px;float:left;padding:100px;" >
< div style="width:560px;height:360px;float:left;padding:20px;background-color:#fff;overflow:hidden;" >
< div style="width:600px;height:360px;float:left;overflow:auto;" >
< div style="width:560px;float:left;" >
< div style="width:460px;height:260px;float:left;padding:50px;" >
< div style="width:200px;height:260px;float:left;overflow:hidden;" >
< div style="width:220px;height:260px;float:left;overflow:auto;" >
< div style="width:200px;float:left;" >
About: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
< /div >
< /div >
< /div >
< /div >
< /div >
< /div >
< /div >
< /div >
And it will look like this:
Now, let's say you also want to add "rules" underneath this. Just copy the code for the about section, and paste it below, still inside the box you created (< div style="width:560px;float:left;" >). Adjust it to your liking. It will look somewhat like this:
And ta-da! You're done with the basics! Now all you have to do is style your text, add borders, change colors, etc. This is an example of how it can turn out:
Hopefully you can add more things with the help of other tutorials. I'm so tired now. This is the longest tutorial I've made so far.
Here's the base code: CLICK!
Next we'll be learning how to make full-screen layouts! Thanks to debbiesiro-official for requesting that tutorial!
Comments