Tabbed navigation with css

[Fangorn]

Hello everybody,

I would like to create tabs and use css to switch from tab to tab.
I read the following article:

https://css-tricks.com/css3-tabs/

It looks what I am looking for. The only problem is that I could not understand it completely.

I started to study html and css about three months ago, so I suppose I have to consider that at the moment I have short limits.

Anyway I tried some reverse engineering and arrived at one point and stopped there: class .tabbed-area
I cannot understand how it works, why Chris Coyier decided to wrap everything with it and why, doing so, all the panels will “positioned exactly on top of each other”; and again why I see only one box of the three.

I also cannot understand the use of the double div in .tabbed-area div div

Is there anyone of you who has the patience to explain me this part of Chris Coyier’s tabbed navigation?
Surely I would like to be able to go on with this topic and learn also about tab highlighting, but I am stuck at this point and cannot move forward without understanding.

Suggestions about a study path to follow in order of having a full understanding of the topic are welcome.

Many thanks in advance for your help

[Paulie_D]

Reverse engineering is a little tough when you don’t have the basics down so this could take a while.

I cannot understand how it works, why Chris Coyier decided to wrap everything with it and why, doing so, all the panels will “positioned exactly on top of each other”; and again why I see only one box of the three.

It’s due to positioning…Chris said

The purpose of that is to set a relative positioning context so we can absolutely position panels inside of it. All the panels will be of equal height and width and positioned exactly on top of each other.

Without getting into a long discussion, here’s Chris’ video on positioning.

https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

A couple of other links you might want to take a look at

http://learnlayout.com/

http://learn.shayhowe.com/html-css/

[nixnerd]

Why do you want a pure css tabbed nav? There are easier ways…

[Fangorn]

Hello Paulie_D.

I know a little about positioning, the little that is taught on tutorials on css like those you mentioned, certainly not enough for me to understand te trick used by Chris.

I will watch the video, of course.

I understand that positioning should be involved in the result but I did not understand how. I understand the principle behind the switching of the tabs… Primarily I am unable to understand why opening the page I see only one of the boxes, what makes the panels position on top of each other, why I see only one panel.

I wanted to use css because I am studying css, Nix.

I know that often people use JavaScript for tabbed navigation, even Chris Coyier wrote it in his article.

I had a look at JS and it did not impress me positively, it did not impress me at all… I would say that I would always look for an alternative to JS if it exists: is there any other apart from css for tabbed navigation? What would you suggest me?

[nixnerd]

You can do a pure css nav easily… But it requires a page load. Other way is harder. I think it involves radio buttons.

[Paulie_D]

Primarily I am unable to understand why opening the page I see only one of the boxes, what makes the panels position on top of each other, why I see only one panel.

Frankly, this is not the forum for long explanations of why CSS works the way it does nor, unfortunately, do we really have the time to educate you in any sort of depth.

There are dedicated sites and resources for that. Try CodeAcademy, Treehouse, Lynda and a host of others.

Get the basics down before diving into something as relatively complex as CSS tabs.

As for Javascript…the web runs on it…it might not impress but you’re gonna need it sometime and you’d better get used to it.

HTML provides structure
CSS provides styling & presentation
Javascript provides functionality and interaction.

[__]

I had a look at JS and it did not impress me positively, it did not impress me at all…

There are bad parts, but you don’t have to use them. JavaScript actually an awesome language.

Real JS problems come from different browser’s DOM implementations, which is not something you will avoid by switching languages (even if there was another language to switch to).

[Author]

Posts