HOME | DD

Talei โ€” TUT: Using CSS Scroll Boxes

Published: 2008-05-15 19:51:11 +0000 UTC; Views: 46036; 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

Talei - Mr. Dinosaur

Talei - Rated

Talei - Boegg

Talei - Bumble-bee Eddy

Talei - Its cold out here mommy

Talei - POKEMON: Snorlax

Talei - Zooooomzoom

Talei - Addiction

Talei - Eddy the Bee

brynls - Stuff III

Kuribroh - Join our Palette Palace art discord server

Neuvo13 - Melt into you

brynls - Stuff III

l0dicko0l - Anime Girl | Loli - Animated Steam Artwork

brynls - Seedy Farmer [๐Ÿค–]

brynls - King Mixer

FlagsAreNice - Microsoft Teams 2004 Icon

UnicornReality - srs CSS Tutorial

annie252 - Autumn Dreams CSS

cc-Designs - +dklicious_Portfolio Layout.

litttle-princess - Points_journal CSS

theartofsin - making a website in Photoshop

blissart - Garden [DD]

pica-ae - CS3 InDesign Skin

Zilly-The-Jellyfish - Gimp Avatar Animation: 4 Types

cerena - CSS Journal Tutorial Part III
Comments: 546

Talei In reply to ??? [2009-11-21 23:56:20 +0000 UTC]

I'm glad

๐Ÿ‘: 0 โฉ: 0

TheChildInTheCorner In reply to ??? [2009-10-01 07:13:56 +0000 UTC]

thanks for making this I've been working on a CSS for a while and just couldn't figure out what I was doing wrong with the scrollbox - this cleared it up entirely. ^-^

๐Ÿ‘: 0 โฉ: 1

Talei In reply to TheChildInTheCorner [2009-10-26 18:55:49 +0000 UTC]

I'm glad its useful.

๐Ÿ‘: 0 โฉ: 0

DommiFox In reply to ??? [2009-09-20 13:25:00 +0000 UTC]

thanks so much for making this tutorial! Im new to css so this was quite tricky for me to figure out but it works perfectly now

๐Ÿ‘: 0 โฉ: 1

Talei In reply to DommiFox [2009-10-18 21:17:16 +0000 UTC]

Happy to help!

๐Ÿ‘: 0 โฉ: 0

Moogle-Empire In reply to ??? [2009-09-01 16:30:13 +0000 UTC]

: D This is great, I was wondering how people made these. Thank you

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Moogle-Empire [2009-10-18 21:13:12 +0000 UTC]

No problemo

๐Ÿ‘: 0 โฉ: 0

kkuffnerphotos In reply to ??? [2009-08-22 01:18:31 +0000 UTC]

Woot...success. Now I just need to get the second one to work, and I'll be set. Thanks so much

๐Ÿ‘: 0 โฉ: 2

Talei In reply to kkuffnerphotos [2009-10-16 14:52:36 +0000 UTC]

No problemo

๐Ÿ‘: 0 โฉ: 0

kkuffnerphotos In reply to kkuffnerphotos [2009-08-22 01:27:33 +0000 UTC]

Oh I got it..turns out I'm just stupid LOL Thanks again

๐Ÿ‘: 0 โฉ: 0

GabrieldlTC In reply to ??? [2009-08-19 22:46:37 +0000 UTC]

wow, thanks alot it work perfectly :3 iยดve been looking for a tutorial for a wile, but u explained it very well

๐Ÿ‘: 0 โฉ: 1

Talei In reply to GabrieldlTC [2009-10-16 14:49:59 +0000 UTC]

No problem. I'm glad it worked for you :'D

๐Ÿ‘: 0 โฉ: 0

Bunneh-World In reply to ??? [2009-08-03 21:21:57 +0000 UTC]

div.scrollbox {
background-attachment: scroll;
background-image: none;
width: 400px;
height: 500px;
border-width: 1px 1px 1px 1px;
border-color: transparent;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color: transparent;
overflow: auto;
}

I'm not sure what I'm doing wrong...

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Bunneh-World [2009-08-04 09:50:16 +0000 UTC]

Look a couple of comments below. Probably doing what the other person did. If so, I already explained it

๐Ÿ‘: 0 โฉ: 1

Bunneh-World In reply to Talei [2009-08-04 16:11:34 +0000 UTC]

Well, I did look at them, and I had nothing to change...

For the

, I put it on the journal entry itself, and not the CSS area. Was I supposed to do it the other way around?

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Bunneh-World [2009-08-04 19:16:14 +0000 UTC]

Look again.
*Sigh* I'll repeat myself.
div.scrollbox in your CSS, yes?


How are window and scrollbox the same? As I've said, the classes must match to work, which is one of the main things this teaches as a tutorial, to try and stop people just taking my code. It make sense now? If you make sure they match, it should work.

๐Ÿ‘: 0 โฉ: 1

Bunneh-World In reply to Talei [2009-08-04 20:52:29 +0000 UTC]

Oh! Now I get it!! Thanks so much. I'm sorry I took up your time.

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Bunneh-World [2009-08-05 14:17:11 +0000 UTC]

Glad to hear Tis alright. Just fustrating stuck with a crappy laptop but I gots a new one

๐Ÿ‘: 0 โฉ: 1

Bunneh-World In reply to Talei [2009-08-05 21:42:35 +0000 UTC]

That's good then! I wish I had a laptop. Then I could take my PC anywhere with me.

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Bunneh-World [2009-08-05 21:45:52 +0000 UTC]

Haha, well my laptop before was completley ruined D: And then I had to use our crappy family PC. And I'm incredibly impatient.

๐Ÿ‘: 0 โฉ: 1

Bunneh-World In reply to Talei [2009-08-05 23:00:45 +0000 UTC]

Wow. That sounds a bit painful. I know it would be to me. I hate waiting!

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Bunneh-World [2009-08-09 16:36:17 +0000 UTC]

Haha, well, I have my new laptop now so all is well.

๐Ÿ‘: 0 โฉ: 0

KaleyAngela In reply to ??? [2009-07-31 04:08:08 +0000 UTC]

div.scrollbox {
background-attachment: scroll;
width: 400px;
height: 500px;
border-width: 1px 1px 1px 1px;
border-color: #CCD9CB;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color: #E6EDE4;
overflow: auto;

}

๐Ÿ‘: 0 โฉ: 1

Talei In reply to KaleyAngela [2009-07-31 21:53:19 +0000 UTC]

Uhmmm? You pasted that as a comment becausee....?

๐Ÿ‘: 0 โฉ: 1

KaleyAngela In reply to Talei [2009-07-31 22:56:25 +0000 UTC]

Well, That's the code I've got. And It hasn't seemed to be working. I was wondering what's wrong with it. ):

๐Ÿ‘: 0 โฉ: 1

Talei In reply to KaleyAngela [2009-08-01 13:10:04 +0000 UTC]

What are you putting in to the journal body?
Cus you have to make sure the div classes match ;]

๐Ÿ‘: 0 โฉ: 1

KaleyAngela In reply to Talei [2009-08-01 14:12:39 +0000 UTC]



(Content Here)





I already have the < div align="center" > Up in my header from Previous CSSs I made, Should I remove it and put it next to the
?

๐Ÿ‘: 0 โฉ: 1

Talei In reply to KaleyAngela [2009-08-01 21:21:24 +0000 UTC]

No.

Considering in your CSS, you're using
div.scrollbox?

and your divtag says window? They need to be the same Which is the main point of the tutorial

๐Ÿ‘: 0 โฉ: 1

KaleyAngela In reply to Talei [2009-08-01 21:23:17 +0000 UTC]

Haha, Oh!

I get it. :'D

Thank you so much!

๐Ÿ‘: 0 โฉ: 1

Talei In reply to KaleyAngela [2009-08-01 23:16:57 +0000 UTC]

No problemo ^_^

๐Ÿ‘: 0 โฉ: 0

Tipu-neko In reply to ??? [2009-07-03 13:22:51 +0000 UTC]

Ooh, thank you for making this (altough you made this over a year ago, I just found it recently..). *w* I'm sure this will be very useful~

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Tipu-neko [2009-08-05 14:48:52 +0000 UTC]

I'm so glad it was useful!

๐Ÿ‘: 0 โฉ: 0

Petit-Marionette In reply to ??? [2009-07-02 21:33:59 +0000 UTC]

div.scrollbox {
background-attachment: scroll;
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: #E0C4B0;
border-style: solid;
background-repeat : no-repeat;
background-position : scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color:#F2E6E0;
overflow: auto;
}



My entry



:\ Im lost. In the
i replaced window with scrollbox aswell its just not working @@

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Petit-Marionette [2009-07-03 10:08:24 +0000 UTC]

Heres your issues
background-repeat : no-repeat;
background-position : scroll;

You have a space before the colons =]

background-repeat: no-repeat;
background-position: scroll;

๐Ÿ‘: 0 โฉ: 1

Petit-Marionette In reply to Talei [2009-07-03 16:04:21 +0000 UTC]

thank you!!!

๐Ÿ‘: 0 โฉ: 0

Zeekeh In reply to ??? [2009-06-24 16:12:39 +0000 UTC]

Thanks!

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Zeekeh [2009-08-05 14:47:26 +0000 UTC]

No problemo!

๐Ÿ‘: 0 โฉ: 0

FlamesOfZero In reply to ??? [2009-06-02 14:32:53 +0000 UTC]

Thanks, I'm sure this'll help me alot!

๐Ÿ‘: 0 โฉ: 1

Talei In reply to FlamesOfZero [2009-06-22 08:58:17 +0000 UTC]

No problem!

๐Ÿ‘: 0 โฉ: 0

SiSero In reply to ??? [2009-05-28 02:53:00 +0000 UTC]

this is AMAZING!! thank you so MUCH for creating it ; U ; and congrats on the DD too!! it totally deserves it!! totally faved this btw

i'm so sorry if i'm bothering you by asking this, but i've been having a hard time looking for a tutorial on how to add a picture as your header (so the the title and date etc. appear on top of the illustration. do you have a tutorial on that or know somewhere i can learn about this?

again, so sorry to bother you

๐Ÿ‘: 0 โฉ: 1

Talei In reply to SiSero [2009-06-22 08:57:35 +0000 UTC]

I saw your other comment. Tis no problem. I'm glad you found it ^_^

Thank you very much. I was shocked when it got a DD.
You're very welcome!

๐Ÿ‘: 0 โฉ: 0

Wakayama-Pirate [2009-05-27 20:34:39 +0000 UTC]

This was so useful! Thank you! :>

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Wakayama-Pirate [2009-06-22 08:56:49 +0000 UTC]

Happy to help! You're welcome!

๐Ÿ‘: 0 โฉ: 0

unrelatedcolours In reply to ??? [2009-05-20 18:31:53 +0000 UTC]

Thank you very much for this! I used it, and now I feel a little bit smarter about CSS codes. Yay!

๐Ÿ‘: 0 โฉ: 1

Talei In reply to unrelatedcolours [2009-06-22 08:50:43 +0000 UTC]

I'm so glad my tutorial helped you. You're very welcome

๐Ÿ‘: 0 โฉ: 0

Raucais In reply to ??? [2009-05-19 18:21:07 +0000 UTC]

Hero. Now I know about it thanks to this.

๐Ÿ‘: 0 โฉ: 1

Talei In reply to Raucais [2009-06-22 08:50:25 +0000 UTC]

No problem! Happy to help

๐Ÿ‘: 0 โฉ: 0

BatmanFreak In reply to ??? [2009-05-17 18:41:16 +0000 UTC]


div.scrollbox {background-attachment: scroll;
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-style: solid;
background-position : scrolladding: 10px 10px 10px 10px;
margin-top: 1px;
background-color:#000000;
overflow: auto;}



Isnt working. I'm new to this stuff, so I'm not the smartest when it comes to CSS, but I tried and it still wont work. (Your TUT is awesome though, and it helped me to this point!)

๐Ÿ‘: 0 โฉ: 1

Talei In reply to BatmanFreak [2009-05-17 22:16:22 +0000 UTC]

You don't put the

and
around the actual CSS code. Try removing them.

๐Ÿ‘: 0 โฉ: 1

BatmanFreak In reply to Talei [2009-05-17 23:17:09 +0000 UTC]

Thanks a bunch, I really appreciate it!

๐Ÿ‘: 0 โฉ: 1


<= Prev | | Next =>