r. scrollable text boxes on top of an image
TIRAMISU。 layout tutorials #hiatusHey guys, sorry for being so inactive... school's been busy and my revamp everything out of me and some other stuff came up, but I'm a bit free to post another tutorial. This tutorial was requested by phokyu and someone else who pm'd(?) me once, but I can't seem to find them in my messages... ._.
Anyways, in order to be able to make a scrollable text box on top of an image, you'll need to know how to make a scrollable text box... please go back to chapter 3 (tutorial two) if you don't know how to make one. You'll also need to know how to insert an image, and I'll go over that just briefly.
Adding an Image:
When adding an image, I don't like using that little picture image thingy in the editor to insert it. Why? Well, I mess up a lot when using it, and it usually creates
tags (which I happen to hate with all my soul). Also, it's easier to add images (for me) in the source code. Enough about me blabbering, let's move on.
Code:
< img src="yourimageurl.com" >
Very simple, yes indeed. If you want to change your image's size in the code, add borders, margin, etc. you do this:
< img src="yourimageurl.com" style="width:300px;border:1px solid #000;margin:2px;float:left;" >
I'd recommend just adding either the preffered width or height according to what you're doing. If you want to add an image with a width of 300px, just leave it at that so that the image will appear as it should be (proportional? I can't english right now).
Margin and borders still affect width, so... make sure to adjust the width of the image accordingly.
Scrollable text box on top of an image:
To do this, first add a simple box div that is the width of your image. Supposing that the width is 356px (the width of my image, lol) do this:
< div style="width:365px;float:left;" >
Then add the desired image (or in this case gif) in your source code, and make sure that you know the height of your image. You will need to add float:left for this as well.
< img src="http://24.media.tumblr.com/530ba45862d1b0913b24a427ac6983f5/tumblr_mmt224PuMu1qlgh81o1_500.gif" style="height:200px;float:left;" >
Then, create a text box with the exact or smaller height of your image, and add the scrollableness inside it (along with lorem ipsum):
< div style="width:200px;height:200px;border:1px solid #ff9999;float:left;overflow:hidden;" >
< div style="width:220px;height:200px;float:left;overflow:auto;" >
< div style="width:200px;float:left;" >
< p > 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. < /p >
< /div >
< /div >
< /div >
Now, add this very important part of the code on the outer div of your text box:
< div style="width:200px;height:200px;border:1px solid #ff9999;float:left;overflow:hidden;margin-top:-200px(your image's height);">
You can always adjust the margin according to what you need, of course. It doesn't always have to be the height of your image. If you want to center it, subtract the height of your text box from the height of your image, and divide this by two, then subtract it to the height of your image.
Your code will now look like this:
< div style="width:365px;float:left;" >
< img src="http://24.media.tumblr.com/530ba45862d1b0913b24a427ac6983f5/tumblr_mmt224PuMu1qlgh81o1_500.gif" style="height:200px;float:left;" >
< div style="width:200px;height:200px;border:1px solid #ff9999;float:left;overflow:hidden;margin-top:-200px;" >
< div style="width:220px;height:200px;float:left;overflow:auto;" >
< div style="width:200px;float:left;" >
< p > 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. < /p >
< /div >
< /div >
< /div >
Now this is how it'll look:
It's not reallly pretty right now, but if we fix up a few things, it'll look better. The border I used was just so you guys could see where the text box is, just in case you were wondering. Now, this is how it can turn out to look like:
The base code for this is here.
Anyways, I hope this somewhat explains how to do this. Would you guys like to see a tutorial about font styling or how to make any specific type of text box? I don't know, something like that..?
Next tutorial (another request) will be adding scrollable text boxes to a text box, on top of an image... if that makes any sense. Something like my foreword layout (which I really want to change).
Ps. If this is too confusing, please let me know and I'll try to explain it more.
Comments