CSS Code for Tabs

June 13, 2010 - 5:04pm — Unplugged

This code is mostly outdated at this point. If you want to use tabs, I suggest you use the way superior Javascript Tabs originally discovered by Hraeth/Shamiya and alternatively coded by AlisonRobin.

So due to popular demand I decided to post the code for tabs for everyone. Enjoy! :D

I II III IV

TEXT ONE
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

TEXT TWO
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

TEXT THREE
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

TEXT FOUR
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code

<a href="#1">I</a> <a href="#2">II</a> <a href="#3">III</a> <a href="#4">IV</a> 
<div style="width:500px;height:300px;overflow:hidden;"><a name="1"></a>
<div style="height:230px;overflow:auto;background:#231B17;padding:20px">
TEXT ONE

</div>




<a name="2"></a>
<div style="height:230px;overflow:auto;background:#231B17;padding:20px">
TEXT TWO

</div>




<a name="3"></a>
<div style="height:230px;overflow:auto;background:#231B17;padding:20px">
TEXT THREE

</div>




<a name="4"></a>
<div style="height:230px;overflow:auto;background:#231B17;padding:20px">
TEXT FOUR

</div>




</div>

Parts to change:

FIRST DIV
<div style="width:500px;height:300px;overflow:hidden;">
Adjust width and height to whatever size you want, but always keep its height slightly bigger (min 50px) than the size of your second div.

SECOND DIV
<div style="height:230px;overflow:auto;background:#231B17;padding:20px">
Adjust your height to whatever size you want. Keep the sizes of all second divs the same unless you really want different-sized boxes.

Miscellaneous

Unplugged's blog
Login to post comments

June 13, 2010 - 5:06pm — ShadowsofLight

YAYYY~ Ilu Unplugged.

—

Mick Kreiger: You Know You Love Me XOXO

June 13, 2010 - 5:24pm — Unplugged

Yep, I think I got it now. :D

June 13, 2010 - 6:44pm — ShadowsofLight

teeny question. where do you

teeny question. where do you put in code if you want a border?

—

Mick Kreiger: You Know You Love Me XOXO

June 13, 2010 - 6:45pm — Unplugged

I think you should add that

I think you should add that to all of the second divs.

June 13, 2010 - 6:49pm — ShadowsofLight

i put in the normal border

i put in the normal border code. i.e. border: 1pt #fffffff but i got nada.

—

Mick Kreiger: You Know You Love Me XOXO

June 13, 2010 - 6:52pm — Unplugged

You need to add the border

You need to add the border style too.

Like "border:1px solid #ffffff" or "border:1px dotted #ffffff".

June 13, 2010 - 6:53pm — ShadowsofLight

ah arigato

—

Mick Kreiger: You Know You Love Me XOXO

June 13, 2010 - 7:05pm — Reyy

(No subject)

June 13, 2010 - 7:23pm — Iaurdagnire

o: ..... C: Thank you for

o: ..... C:

Thank you for this <3

June 13, 2010 - 8:23pm — DonQuixote

8DD!

June 13, 2010 - 8:26pm — Flyra

Oh god that is so amazing. I

Oh god that is so amazing. I always wanted to know how to do such, eww! Thank you so much for sharing this, you're awesome~ <3

—

f l y r a b l o g _{avatar by tinkee, sig by Quamar}

June 13, 2010 - 8:40pm — Apparanza

/tracking in case I use it

/tracking in case I use it sometime 8D Thanks so much for sharing &hearts

—

By Leuvr ♥

June 13, 2010 - 8:42pm — Unplugged

Glad it's coming useful.

July 6, 2010 - 3:56am — Reyy

Hi. I feel like this is very

Hi.
I feel like this is very important and that I should tell you so no one else makes the same mistake I did.

Well, the reason why my tabs weren't working for IE was because I put:

This: <a name="1"></a>
Under this: <div style="height:230px;overflow:auto;background:#000000">

*Feels accomplished* Haha.

July 6, 2010 - 3:58am — ocean

Thank you! ^^ -bookmark-

July 6, 2010 - 12:53pm — Unplugged

Awesome Ravynn! Glad you

Awesome Ravynn! Glad you managed to solve it. IE is weird though.

July 8, 2010 - 10:04pm — tanyak

amazing amazing

July 16, 2010 - 10:50am — Siellby

ahh I could use this, thank

ahh I could use this, thank you for posting

July 26, 2010 - 6:08am — Kittyo8

hand raise If it's okay to

*hand raise* If it's okay to ask, I tried using your code for the tabs and it didn't work :\ Any ideas on what I might be doing wrong?

—

July 26, 2010 - 5:57pm — Unplugged

Did you copy all of it? Did

Did you copy all of it? Did you just preview your blog or update it? Tabs don't work in the preview. Did you change the links? What browser do you use?

July 26, 2010 - 7:08pm — Kittyo8

Yes I copied all of it, Yes I

Yes I copied all of it, Yes I changed the links (does it have to be a node link?), I use Google Chrome, and no, I didn't use preview.

—

July 26, 2010 - 7:15pm — Unplugged

No, it doesn't have to be a

No, it doesn't have to be a node but it's easier that way in case your title changes.

Hmm. I'm not sure then. Maybe it doesn't work in Google Chrome. :/
Do tabs work for you in other blogs?

July 26, 2010 - 7:17pm — Kittyo8

Yep, I can normally view them

Yep, I can normally view them without an issue.

—

July 26, 2010 - 7:19pm — Unplugged

Can you link me to the blog

Can you link me to the blog where you used the code then?

July 26, 2010 - 7:24pm — Kittyo8

Yes, here it is

—

July 26, 2010 - 7:27pm — Unplugged

Don't put it between the

Don't put it between the style-tags! It's a normal code. :b

July 26, 2010 - 7:31pm — Kittyo8

facepalm OH... Edit: It

*facepalm* OH...

Edit: It works! Thank-you sooo much <3333333

Edit again: Also how to you publish a post as a node?

—

July 26, 2010 - 7:36pm — Unplugged

Change the title to a ".",

Change the title to a ".", then change it back to normal again.

July 26, 2010 - 7:38pm — Kittyo8

alright, thank-you ^-^

—

July 29, 2010 - 3:11pm — gone

Thank you ^^ I love the tab

Thank you ^^ I love the tab design.

—

July 31, 2010 - 5:13am — Tenley

How do you make the backround

How do you make the backround of a blog black?

—

Walking into a room and saying, " I should clean this! " Then walking out. -lily

July 31, 2010 - 12:17pm — Unplugged

Just the blog or the whole

Just the blog or the whole page?
Here is a full Blog CSS-Help. Simply copy the blog code and edit however you want. The colours show you which part is which.

For further CSS questions please comment in that blog too as this one is only about Tabs. I'd like to keep things organized.

July 31, 2010 - 8:15pm — Tenley

whole page but i want it to

whole page but i want it to be a black backround with purple text and thats it. Can you give me the url or link or whatever? I mean, make it for me?

—

Walking into a room and saying, " I should clean this! " Then walking out. -lily

August 2, 2010 - 12:40pm — Witcher

Ooh, I have a question :3 Is

Ooh, I have a question :3
Is there a way to add tabs without making scrollboxes? Just text?

August 2, 2010 - 12:55pm — Unplugged

Sorry Tenley, I don't have

Sorry Tenley, I don't have the time to do a lot of CSS right now.

Witcher-- There is, but it takes a good amount of adjusting depending on how much text you got. :/

August 2, 2010 - 12:57pm — Witcher

Oh, I see. o: Thanks ^^

August 5, 2010 - 6:03am — Tenley

ok....

—

Walking into a room and saying, " I should clean this! " Then walking out. -lily

August 22, 2010 - 11:34am — Rhyolite

...I'm still confused. Do you

...I'm still confused. Do you have to start a new blog entry and then just copy the link etc.? Someone explain this to me in easy to follow steps!
-dies-

August 22, 2010 - 11:55am — Unplugged

No, you don't need to make a

No, you don't need to make a new blog for every category.

Just copy the code into your blog and follow the instructions of which part you need to change.

Your first tab is everything that follows after

<a name="1"></a>

The second tab is everything after

<a name="2"></a>

The third is after "name=3"" etc etc.

On the beginning of this code you got the ONE-TWO-THREE-Links.
In this code these links lead to #1 (first tab), #2 (second tab) of THIS blog. You need to change those links to the URL of YOUR blog.
So you get your node-link by renaming your blog to ".", then back to the original name. Your blog URL should now have a "node" in it.
Like in the instruction, change the URL in the code to your blog-link, but leave the #1, #2 etc. at the end of it.

All of this doesn't work in preview.

If there's anything else you're confused about feel free to ask.

August 23, 2010 - 2:09am — PriyeVodou

This code is so perfect.

This code is so perfect. Thanks!

I do have a question, though. How would I go about centering the text-box-area part? [*center][*/center] just seems to centre the links and the text within the box, but not the box itself.

—

.a biography.

August 23, 2010 - 1:40pm — Unplugged

You need to work with this

You need to work with <*center><*/center> this kind of centering code here.

If you use firefox these tags will center both, the box and the text. If you want to prevent the centering of the text you will need to add a "text-align:center;" to the div style.

August 26, 2010 - 11:49am — Rhyolite

Hey unplugged (: Thanks for

Hey unplugged (:
Thanks for the help!! I got it working in the end but one problem... it's not doing the whole scroll box? Its just cutting of half of what I actually wrote.... is it meant to do that? How do I get the scroll button again?

August 26, 2010 - 5:54pm — Unplugged

I'm not sure. Maybe you

I'm not sure. Maybe you accidentally deleted something in the code? :x Or maybe you need to mess a bit with the width and height numbers. Can I take a look at your code?

August 27, 2010 - 10:21am — Rhyolite

just typed the numbers in

<''div style''="height:three nine zeropx; width:two five zeropx; background:#ffffff;overflow:hidden; padding:10px; text-align:center; font: tenx verdana; color:#000000">

<''div style''="height:three nine zeropx; width:two five zeropx; background:#ffffff;overflow:hidden; padding:10px; text-align:center; font: tenpx verdana; color:#000000">

just typed the numbers in words xD
this is the first text box, in the biography i deleted most of the writing until i fix the scroll button :/
haha

August 27, 2010 - 5:49am — PriyeVodou

@Unplugged: Ahhhh, gotcha.

@Unplugged: Ahhhh, gotcha. Thanks once again!

—

.a biography.

August 27, 2010 - 5:29pm — Unplugged

Rhyolite, does using my code

Rhyolite, does using my code without any width and height changes work for you?
What was the code that didn't work? I can't fix stuff that has no flaws.

August 28, 2010 - 2:09am — Rhyolite

Sorry, haha... :/ I think

Sorry, haha... :/
I think its both... because I copied the text box I used for my old biography... So I'm not too sure
I think its my own at the bottom... :/
Sorry about that!
And sorry for stressing you with stuipid questions ahaha, my apologies (:

August 28, 2010 - 2:10am — Rhyolite

Sorry, haha... :/ I think

August 28, 2010 - 11:34am — Rhyolite

*Also another question (nag

*Also another question (nag nag nag - so sorry!)
How do I make an image go next to the text box? I've tried using left and right tags etc but its too far away? I just want the image to be next to the text box. Any ideas?
Also, do you have the code for a simple scroll box used for putting traits in?
Like:
'Charming 'Luring etc. And it scrolls across?
Sorry for all the questions I'm asking you, and thanks again for all your help!

August 29, 2010 - 12:11pm — Unplugged

As for the image, try putting

As for the image, try putting everything in a table maybe. Like this:

<table style="border:hidden">
<tr>
<td>
your "<div ..." box goes here
</td>

<td>
your image goes here
</td>
</tr>
</table>

I have no clue how others do that trait thing, easiest way I can think of is making a simple text box and leaving no spaces between the traits. This way it's going to scroll sideways.

The Endless Forest

CSS Code for Tabs

Code

Parts to change: