CSS Code for Tabs

Unplugged's picture


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.
ShadowsofLight's picture

YAYYY~ Ilu Unplugged.

YAYYY~ Ilu Unplugged.

Mick Kreiger: You Know You Love Me XOXO
Unplugged's picture

Yep, I think I got it now. :D

Yep, I think I got it now. :D
ShadowsofLight's picture

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
Unplugged's picture

I think you should add that

I think you should add that to all of the second divs.
ShadowsofLight's picture

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
Unplugged's picture

You need to add the border

You need to add the border style too. Smiling
Like "border:1px solid #ffffff" or "border:1px dotted #ffffff".
ShadowsofLight's picture

ah arigato

ah arigato

Mick Kreiger: You Know You Love Me XOXO
Ravyn's picture

(No subject)

<3
Iaurdagnire's picture

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

o: ..... C:

Thank you for this <3
DonQuixote's picture

8DD!

8DD!
Flyra's picture

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
Apparanza's picture

/tracking in case I use it

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

By Leuvr
Unplugged's picture

Glad it's coming useful.

Glad it's coming useful. Laughing out loud
Ravyn's picture

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.
ocean's picture

Thank you! ^^ -bookmark-

Thank you! ^^ -bookmark-
Unplugged's picture

Awesome Ravynn! Glad you

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

amazing amazing

amazing amazing

ahh I could use this, thank

ahh I could use this, thank you for posting

*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?

Unplugged's picture

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?

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.

Unplugged's picture

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. Smiling
Hmm. I'm not sure then. Maybe it doesn't work in Google Chrome. :/
Do tabs work for you in other blogs?

Yep, I can normally view them

Yep, I can normally view them without an issue.

Unplugged's picture

Can you link me to the blog

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

Yes, here it is

Yes, here it is

Unplugged's picture

Don't put it between the

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

*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?

Unplugged's picture

Change the title to a ".",

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

alright, thank-you ^-^

alright, thank-you ^-^

gone's picture

Thank you ^^ I love the tab

Thank you ^^ I love the tab design.
Tenley's picture

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

Unplugged's picture

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. Smiling
For further CSS questions please comment in that blog too as this one is only about Tabs. I'd like to keep things organized. Laughing out loud
Tenley's picture

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

Witcher's picture

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?
by saturnia

Unplugged's picture

Sorry Tenley, I don't have

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

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

Oh, I see. o: Thanks ^^

Oh, I see. o: Thanks ^^
by saturnia

Tenley's picture

ok....

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

...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-
Unplugged's picture

No, you don't need to make a

No, you don't need to make a new blog for every category. Laughing out loud
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. Smiling
PriyeVodou's picture

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.
Unplugged's picture

You need to work with this

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

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.

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?
Unplugged's picture

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?

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
PriyeVodou's picture

@Unplugged: Ahhhh, gotcha.

@Unplugged: Ahhhh, gotcha. Thanks once again!
Unplugged's picture

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. Sticking out tongue

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 (:

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 (:

*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!
Unplugged's picture

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.