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

August 29, 2010 - 2:18pm — Rhyolite

Thanks Unplugged, I owe you

Thanks Unplugged, I owe you so much!

Thats ok about the scroll box, I dont need it much anyway ahaha (:

Thanks again!

August 29, 2010 - 2:25pm — Unplugged

Glad I could help with that.

September 18, 2010 - 4:21pm — BambooKirin

-track- I am having trouble

-track-

I am having trouble making more than four tabs, I always think I copy everything correctly...
could you help?

September 19, 2010 - 1:34pm — Unplugged

What exactly do you copy and

What exactly do you copy and change to add another tab?

September 27, 2010 - 8:46pm — OokamiAzura

-Bookmarks for future

-Bookmarks for future reference-

&hearts

—

September 27, 2010 - 8:48pm — ClosetMonkey

After reading this... I might

After reading this... I might just colour the background.... o_o

—

Check your closet. I might be in there x3

September 27, 2010 - 9:19pm — Unplugged

Haha ClosetMonkey. It's not

Haha ClosetMonkey. It's not that complicated.

September 28, 2010 - 4:59pm — ClosetMonkey

Tee hee

Tee hee <3

—

Check your closet. I might be in there x3

December 14, 2010 - 7:11pm — OkamiLugia

How can I not have have the

How can I not have have the boxes? I feel like there is something really simple I'm missing xD

Here is the page I'm working on: http://endlessforest.org/community/css-stuff-0

I just want each tab to look like a new page if that makes any sense.

December 14, 2010 - 7:14pm — Unplugged

You mean having tabs without

You mean having tabs without scrollboxes? You'll need to remove all your second divs ((but leave the <a name="1"></a>-codes)), and adjust size of the first div so the part with your most text fits in. The problem with this method though is that if you have one tab with very few text and another one with alot of text, you will have a big white space when viewing the tab with less text.
Hope this wasn't confusing. :b

December 14, 2010 - 7:29pm — OkamiLugia

Ah, I'll try that! All the

Ah, I'll try that! All the tabs should have around the same amount of text, so hopefully it'll work out. Thanks!

Edit: I think I'm almost there, but now something weird is happening. The "TEXT ONE" and "TEXT TWO" are appearing on tab 1 and so on. Maybe I deleted too much?

December 14, 2010 - 7:35pm — OkamiLugia

Oh, wait... I think I deleted

Oh, wait... I think I deleted too much. Are the second divs the ones with the background codes? I deleted all of those.

December 14, 2010 - 7:45pm — Unplugged

Yeah, those are the ones with

Yeah, those are the ones with the bgcodes. What exactly did you delete?
[e]: Oh wait actually. If you're still having the problem with Text 2 appearing on the First tab, you need to add many many <br>s (and I mean lots of them) inbetween.

Just try it out and see how many brs you'll need.

December 14, 2010 - 7:54pm — OkamiLugia

Oh lolz I killed the blog...

Oh lolz I killed the blog... Guess I'll start over.

I deleted the second divs from the beginning of the bracket to the end, and then all the text appeared on all the tabs. Hmmm I might be able to just change the bg of the box to match the blog body and make it big enough to where there isn't much or any scrolling.

December 22, 2010 - 8:58pm — llequinoxll

i has a question. i was

i has a question. i was trying to do the tabs and they work fine but under the box it has another smaller one that says the name of the next tab. i have no idea what happened or what i did O.O but here in case you want to see or what i said made no sense. how can i fix it? >.<

December 22, 2010 - 9:25pm — Unplugged

Try changing the height of

Try changing the height of the first div from "height:300px" to "height:270px" or some other smaller number.

December 22, 2010 - 9:34pm — llequinoxll

oh ok thank you ^-^

December 23, 2010 - 4:44pm — Kittyo8

I've found out that by

I've found out that by clicking "Enter" whilst viewing tabs on 'preview' you can navigate through them without saving :3

~I'm not sure if that's something everyone already knew though ;-;

—

December 24, 2010 - 8:19pm — EternalWanderer

Quick help? :o How do I put

Quick help? :o

How do I put the divs beside the node links instead of above? Nothing of what I try seems to work D:

December 24, 2010 - 8:22pm — Unplugged

Just use a table, left side

Just use a table, left side for links right side for divs or the other way around.

That's pretty cool kittyo8, doesn't work for me though? I can use the Tab-key though to browse through them.

December 24, 2010 - 8:23pm — EternalWanderer

-feels dumb- thank-youu

-feels dumb- thank-youu ☆ merry christmas :D

December 24, 2010 - 8:30pm — Unplugged

That star always looks like a

That star always looks like a miniature fish. :b Merry Christmas to you too!

January 3, 2011 - 1:32am — GanzfeldEffect

\

January 3, 2011 - 1:47pm — Wotsits

The ability to comment and to

The ability to comment and to see the comments disappears when I put the tabs in. I don't know what I did.. The blog is this.

—

January 3, 2011 - 4:18pm — Unplugged

You seem to have a first div

You seem to have a first div ("width:500px;height:300px;overflow:hidden;") before every "a name". Remove them all except for the first one that comes before a name="1". That could be the cause.

January 3, 2011 - 4:21pm — Wotsits

Ah ok, I'll try that. Edit:

Ah ok, I'll try that.

Edit: It works! Thank you (:

—

February 6, 2011 - 10:05am — Beaumont13

raises hand ^^ A couple of

*raises hand* ^^
A couple of questions...

1. I've got the tabs working and all that. But the music I've put on the first tab only plays on that tab which confuses me because the songs I put as my character's voices play no matter what tab you click on. I was just wondering why it does that and if you could maybe help me figure out what's wrong?
&
2. On the last tab there is a line that is the same color as the background above the box and I can't get rid of it.

The bios are...
Kaides
Wings

February 6, 2011 - 4:55pm — Unplugged

There's nothing wrong. The

There's nothing wrong. The songs keep on playing because all that Tab Links do is jump to another part of the site which you have hidden (and therefore only accessable through the links). I know they stop playing when the page isn't fully loaded and you click on a tab, but as soon as the page loaded they keep on playing.

I'm not sure what line you mean though. Maybe it depends on your browser. Can you show me a screenshot of it?

February 8, 2011 - 3:35pm — Beaumont13

Ok... I guessed that. But

Ok... I guessed that.
But the only songs that keep playing, no matter what tab, are the ones that aren't on the first tab. ^^'
I even waited for the "intro" tab to fully load on two different browsers and it didn't work on either.

EDIT: I figured out what the line was and I fixed it. But the music still confuses me.

February 8, 2011 - 9:38pm — Unplugged

I'm not at home this week so

I'm not at home this week so I can't look into this much at the moment. I didn't know about the music. Sorry I can't help you right now but if you could remind me someday next week I'll see what's up with that.

February 9, 2011 - 8:13am — Beaumont13

Okie. ^^ Hopefully I

Okie. ^^
Hopefully I remember. XD

April 15, 2011 - 4:28am — WonderfullySarcastic

I will be stalking this blog

I will be stalking this blog for a while, unfortunately ;; Thank you so much!

—

#1354
.

April 19, 2011 - 10:03pm — bluejay17

have to track; not yet

have to track; not yet finished a load of CSS stuff

—

The Nest

May 20, 2011 - 8:30am — Graveyard

Edit: Nevermind I just got

Edit: Nevermind I just got rid of the tabs on the blog I was working on, for some odd reason tabs were eating the comments and turning them invisible O-o

—

"Your efforts are insignificant! I carry you to your deaths!"

July 25, 2011 - 5:51am — Nineve

Hey I was wondering if you

Hey I was wondering if you could take a look at this for me: http://endlessforest.org/community/node/61617/#1 I'm having some odd problems and no matter what I try, it seems to be unchanged, or just get worse.
I'd really appreciate it! (:

—

July 25, 2011 - 6:32am — liviasyran

Hi Gladiator, Hope this isn't

Hi Gladiator,
Hope this isn't invasive, I just figured I'd see if I could help you out, since I love playing with tab CSS. (: I think I cleared up your layout to work right, do you have an email I could send it to?

A lot of what was irritating the code (besides a missed closed DIV tag here and there,) were the span codes... Instead, you might want to use font style codes for your text formatting, or use BBCode. It makes for a lot less conflict.

—

July 25, 2011 - 10:52am — Nineve

Hey, you're not being

Hey,
you're not being invasive at all! I really appreciate the help. And yes I do have an email, you can send it to .
I'm fairly new with the CSS though, so I'm not sure I follow what you're saying. However, anything to make this easier would be wonderful! I'm not really aware of the differences between the code I'd been using and BBCode, or what font style codes or span codes are, but I know you'll elaborate.
Thanks so much for taking the time to help me (:

—

July 25, 2011 - 11:07am — Unplugged

liviasyran no it's not

liviasyran no it's not invasive

I appreciate it in fact. But just for reference, if you're checking through the source code, BBCodes get turned into spans automatically as well as breaks turn into br /s, they're not in her actual code. You could ask her to give you her code though, which is what I usually do.

Gladiator, like liviasyran said the problem lies in that you forgot to close one or some div tags properly. But liviasyran will help you with that I think?

July 25, 2011 - 10:59pm — Nineve

Well, here's the CSS:

Well, here's the CSS: http://textuploader.com/?p=6&id=stKdZ
I've looked for any open divs, etc. but I haven't been able to locate anything, then again I'm not too experienced with it- I'm sure you'll probably find what I'm missing!
EDIT- Ah never mind, I found it! Well, atleast I know now what to look for when something like that happens, but maybe liviasryan, you could still explain to me what BBCode is? If it makes coding easier, I'm all for it.

—

July 27, 2011 - 10:45pm — liviasyran

Unplugged - Oh! Haha, I

Unplugged - Oh! Haha, I didn't notice the codes changed when you look it up. Thanks, I'll keep that in mind in the future, makes a LOT more sense. But yes, I'd like to try and help out if I can, too, since I do like playing with this code, and I'm sure you get busy. :>

Gladiator - I'm sorry it took so long to get back to you! I've been moving, heh... But yes, I'm glad you found the problem. BBCode is basically the stuff you use to format font in the [] brackets, I believe. If you haven't already, you can look up basic instruction on them all here! I wouldn't worry much about span codes since they get a little out there, haha... But when it comes to the tab css, the BBCode just helps with styles of font and all, when you don't want to change the entire tab's layout/font format.
...And I hope that made sense. :I; Let me know if not, hah.

—

July 28, 2011 - 2:09am — Nineve

Liviasryan- That made perfect

Liviasryan-
That made perfect sense! Thank you so much, I'll read up on the BBCode. It sounds helpful (:

—

August 1, 2011 - 7:48am — mismatched

I need some help... For some

I need some help...

For some reason, all my text looks normal (on the page, you know) and when I click a link, it just jumps down to that section of the page. This is very nice, however, it's not what I want on this layout. Here's a link to the page: http://endlessforest.org/community/node/62693 Could you, perhaps, help me out a little?

—

August 1, 2011 - 11:03am — Unplugged

Change your Input Format to

Change your Input Format to BBCode.

August 1, 2011 - 12:13pm — mismatched

Oh my muffin, duh! >_> and

Oh my muffin, duh! >_> and one more question, if it's not too much to ask, you have a lot of partially-transparent backgrounds and such, is there a way I can put this as a background to my tabs?

—

August 29, 2011 - 7:41pm — Aivilo

Tracking this for later~

—

♥

August 29, 2011 - 8:24pm — Dinamo

tracking.

tracking. <3

August 30, 2011 - 1:23am — Dinamo

How do I fix this? Its

How do I fix this?

Its starting to annoy me. xD

September 16, 2011 - 10:37pm — gglidden

The tabs in this bio are

The tabs in this bio are appearing as a list (the tabs are right underneath the image)? How do I fix this? Is there's something simple I have to do? Im using google chrome.

Edit: A friend helped me to get them to work. Now I have another question. How do I lower the opacity of the foreground so I can see more of the background image? Also how do I change the color of the foreground once the opacity is lowered?

—

Ring The Bells That Still Can Ring.
Forget Your Perfect Offering.
There Is A Crack In Everything.
That's How The Light Gets In.

(A part of the lyrics of Leonard Cohen's Song "Anthem")

October 28, 2012 - 10:41pm — Ponyo