HOME | DD
Talei —
TUT: Using CSS Scroll Boxes
Published: 2008-05-15 19:51:11 +0000 UTC; Views: 46040; Favourites: 907; Downloads: 4716
Redirect to original
Description
Quite a few people have asked me about this now. So here is a full tutorial/documentation on how to do it, with complete instructions, including how to use multiple boxes of different sizes.
This includes the following files;
Scrolling Boxes CSS
Using more than one box
Journal Entry
Preview
This is now a .zip file. If you would prefer a .rar, just drop a comment and I'll up one for you.
DO NOT USE MY CODES. IT WILL NOT WORK. IF YOU FOLLOW THE DOCUMENTATION YOU WILL KNOW WHY RATHER EASILY. ITS A MATTER OF CLASS NAMES, AND IF YOU DON'T UNDERSTAND WHAT I'M ON ABOUT, YOU OBVIOUSLY DIDN'T LEARN SO GO OVER IT UNTILL YOU DO. IF YOU TRY AND COME TO ME LIKE THE PAST FEW HUNDRED PEOPLE SAYING "IT DOESN'T WORK!" I'M GOIN TO SCREAM. YOU'RE SUPPOSED TO LEARN HOW TO DO IT YOURSELF, NOT TAKE MY CODE.
You do not have to credit me in your Journal CSS if you use this if you do not want to, but I'd appreciate it if you left a comment to let me know you used it and added it to your favourites if it was useful. Especially if you use my template!
Please don't note me with questions about using this, please leave a comment on this deviation. That way, if someone else has a similar issue, I can try and avoid repeating myself.
In the preview, a header THEN the scroll box is shown.
This tutorial is for the SCROLLBOX ONLY.
If you're looking for the header tutorial that matches, please check in my gallery. You can find it here [link]
EDIT: HOLY CRAP A DD. I'm gobsmacked. I went to sleep feeling like shap last night. Yes shap, its a word I invented, and if you can't guess what words I put together there, you may still be calling people "poo-poo head"
But yez, so to wake up to a DD was a really, really nice surprise, it hadn't ever even crossed my mind, so seeing some "congrats on the DD" comments made me have to check and do a double take! Thank you, Anni, for suggesting me! If you don't know her already, go and visit her over at =soulful-tears because she's so damn lovely.
Related content
Comments: 546
o.o Well it should work. Are you trying to just copy and paste my codes? Like I said, that wont work. The codes are right if they're on there own, but putting them together to use makes them incorrect and this is deliberate so people learn about custom classes and the importance of having correct divtags.
👍: 0 ⏩: 0
i'm about to attempt this! thanks for creating the tutorial!
👍: 0 ⏩: 1
Good luck. Hope its useful ^^
👍: 0 ⏩: 0
Thanks so much for this! I had one trouble though. When i tried to do the second scrollbox, it wouldnt let me. It told me:
CSS Error:
Forbidden property (token: div.scrollbox2 { background-attachment)
any ideas on that? I'm kinda stupid when it comes to CSS, so i'm lost on this lol
👍: 0 ⏩: 1
You're probably buggered up the background part. Paste to me the whole paragraph and I'll fix it for you.
👍: 0 ⏩: 1
i tried even removing the background part, and then it just gave me an error for the next line down. :\ CSS is not my friend lol I've been trying and trying for ages to make a 2 column layout. couldnt get it no matter how many tuts. so figured i'd try a one column with scrollboxes. still looks horrid lol
is this the part you mean:
div.scrollbox {
background-attachment:scroll;
width:300px;
height:400px;
border-width:1px 1px 1px 1px;
border-color:#f4d9a0;
border-style:solid;
background-repeat:no-repeat;
background-position:scroll;
padding:10px 10px 10px 10px;
margin-top:1px;
background-color:#4b779c;
overflow:auto;
}
then i did the same one, but changed it to div.scrollbox2 {. tried alternating the "scrollbox2" part with different names, but no luck still, same error. *confused*
👍: 0 ⏩: 1
Strange. I think its your spacing.
Try this;
div.scrollbox {
background-attachment: scroll;
width:300px;
height:400px;
border-width: 1px 1px 1px 1px;
border-color: #f4d9a0;
border-style: solid;
background-repeat : no-repeat;
background-position : scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color: #4b779c;
overflow: auto;
}
👍: 0 ⏩: 1
that did it. my journal still looks horrid, but at least its functional with scrollboxes lol thanks so much.
👍: 0 ⏩: 1
Its not that bad.
👍: 0 ⏩: 0
I have been looking for a scrollbox tut.!! I am def. gonna try this. Thanks!!
👍: 0 ⏩: 1
Glad to be of help! Hope its useful!
👍: 0 ⏩: 0
This tut was great. <3 I'm using it on my journal now. 8D (well, not that anyone can see yet but it will soon! lol). Thanks so much for this. ^_^
👍: 0 ⏩: 1
very cool... i'm going to try to learn this!!
👍: 0 ⏩: 1
Good luck! 
👍: 0 ⏩: 1
thanks! i'm trying >w<~~!!
👍: 0 ⏩: 1
wow this helped me added in favorites
👍: 0 ⏩: 1
It doesnt work with the html rite?
👍: 0 ⏩: 1
Yes it does...you need to correct the class name.
The class name in the HTML and the class name in the CSS are different where they need to be the same. Its to try stop people from just taking my code and claiming its theirs.
👍: 0 ⏩: 1
Most people do that
I am kinda new in HTML tningy so i will try some out and i will not say it is mines!
👍: 0 ⏩: 1
Yeah. 
Well, good luck.
👍: 0 ⏩: 0
could you put it in a zip file for me please!!
👍: 0 ⏩: 1
I was wondering how to add a scroll! Thanks!
What are the CSS codes for colors? Are they the same as for HTML?
👍: 0 ⏩: 2
They're #------ hex numbers.
Glad its helpful ^^
👍: 0 ⏩: 0
I had a few more questions about using this:
The scroll code goes here?
Also, does the above code go before, after, or in between the CSS I already have?
Sorry for all the questions. I'm not familiar with CSS
👍: 0 ⏩: 1
Sorry, didn't see you'd added on another comment.
The scroll code goes IN the CSS you have.
Journal content
I thought it was clearly explained tbh. Sorry
👍: 0 ⏩: 0
thnx a lot for this great tut
👍: 0 ⏩: 1
No problem. Glad its helpful.
👍: 0 ⏩: 0
Your wonderful tutorial has been featured here.[link]
Thank you for providing the gallery with such awesome Resources.
👍: 0 ⏩: 1
This was very useful! Thank you for making this tutorial
👍: 0 ⏩: 1
I love you!
D: This has helped me so much!
👍: 0 ⏩: 1
I'm so glad you found it helpful
👍: 0 ⏩: 0
i'm kind of confused here
how can you just make a simple, plain scroll box in your journal?
DA FAQ's are useless! I wondered if you could tell me the basic thing?
I don't know how to open those types of files and neither does my dad
sorry to be a pain.
👍: 0 ⏩: 1
Download WinRAR from google, and then open it with that.
👍: 0 ⏩: 1
<= Prev | | Next =>