Help How do you make nice tabs?

[OrganicUFO]

Hi! I know I've been posting a lot here but I really haven't been able to figure this out and I'd love some help when it comes to tabs. I don't understand how people are able to customize them. How do you make tabs with different backgrounds, no borders...etc. I see people who have tabs stacked, others who have them on the sides... etc. and what I've noticed too is that the tabs always open where they should (so if a tab is in column 1 it'll still open up in column 2). Basically, I've seen people make tabs look absolutely stunning and I have no idea how to do it. I've tried my hand at picking apart codes to try and understand but I can't. All the youtube videos I watch require divs too, so I'm truth be told at a loss. This feels like my white whale and I'm ready to conquer it. If anyone knows any links to tutorials that could help, I'd also love those.

I used this tutorial: freebies 3.0 however I found I couldn't customize or move anything so I'm still pretty stumped.

 

[Uxie]

it's super late at night right now so apologies if this tutorial is somewhat brief!!! i have plans to make a more in-depth one in the future (plans that may never come to fruition (´-ω-`) ), but for now i hope this helps! (´･ᴗ･ ` )

so there are actually a few different ways to make custom tabs, one of the ways being the one pasta's made a tutorial on. i'll try to explain the method i use in most of my codes, but note that it has it's own drawbacks as well! it's just the most convenient for me in terms of getting consistent results across devices/browsers!

i'll direct you to this page for you to understand the different position properties: here!, noting in particular position:absolute and position:relative. I'm a little lazy to explain it all right now, but once you understand those the next parts should make sense to you once you mess around a little!

loosely, the way i do tabs is by putting position:absolute on my tab contents and a position:relative on the container where the tabs will be aligned to, if that makes sense. here's a very small example:

Spoiler: basics

[border=transparent; /*the big container that controls the limits of your tab contents*/  padding:0; height:220px; width:220px; padding:0; background:red; position:relative; line-height:0;]
   [border=transparent; /*the tab container*/ height:30px; width:100%; padding:0; overflow:hidden;][tabs]
      [tab=a][border=transparent; height:180px; width:180px; padding:10px; box-sizing:border-box; background:blue; position:absolute; bottom:0; left:0; line-height:100%; font-size:14px; color:#fff;]i can go wherever i want within the red box since i have position:absolute![/border][/tab]

      [tab=a][border=transparent; height:140px; width:120px; padding:10px; box-sizing:border-box; background:blue; position:absolute; top:0; left:10px; line-height:100%; font-size:14px; color:#fff; pointer-events:none;]even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work![/border][/tab]

      [tab=a]you can't see this content because of the overflow:hidden![/tab]
   [/tabs][/border]
[/border]

• a
• a
• a

• i can go wherever i want within the red box since i have position:absolute!
• even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work!
• you can't see this content because of the overflow:hidden!

key points on this are the overflow:hidden on the tabs container, which i use as a handy way to hide the line that appears under most tabs as well as shrink the height of buttons, since the cut-off won't affect the use of the buttons! it does, in turn, hide content that is not enclosed in the borders you see, but position:absolute on the tab contents allows it to bypass the overflow:hidden on the tabs container as well as its confines. so you'll notice the buttons themselves are actually only the green element in the example, but the tab contents are able to go beyond just the fixed area normal tabs are restricted to.

to customise the tabs, i make use of a position:absolute element with a background (placed outside of the tab containers) that covers the buttons through the position values. see below:

Spoiler: customisation

[border=transparent; /*the big container that controls the limits of your tab contents*/  padding:0; height:220px; width:220px; padding:0; background:red; position:relative; line-height:0;]
   [border=transparent; /*the tabs container*/ height:30px; width:100%; padding:0; overflow:hidden; background:green;][tabs]
      [tab=a][border=transparent; /*these are the tab contents*/ height:180px; width:180px; padding:10px; box-sizing:border-box; background:blue; position:absolute; bottom:0; left:0; line-height:100%; font-size:14px; color:#fff;]i can go wherever i want within the red box since i have position:absolute![/border][/tab]

      [tab=a][border=transparent; /*these are the tab contents*/ height:140px; width:120px; padding:10px; box-sizing:border-box; background:blue; position:absolute; top:0; left:10px; line-height:100%; font-size:14px; color:#fff; pointer-events:none;]even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work![/border][/tab]

      [tab=a]you can't see this content because of the overflow:hidden![/tab]
   [/tabs][/border]

   [border=transparent; /*the tab covers*/ height:30px; width:100%; padding:10px; box-sizing:border-box; background:blue; opacity:0.8; position:absolute; top:0; left:0; pointer-events:none;]
      [border=transparent; height:auto; width:50px; padding:0; float:left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]hey[/border]
      [border=transparent; height:auto; width:50px; padding:0; float:left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]wow[/border]
   [/border]
[/border]

• a
• a
• a

• i can go wherever i want within the red box since i have position:absolute!
• even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work!
• you can't see this content because of the overflow:hidden!

hey

wow

you'll see the dimensions of the tabs cover match the tabs container in this scenario, but you can change it to fit your needs. just ensure that position:absolute and pointer-events:none are both present, the former to ensure it can cover the tabs and the latter to ensure your buttons work underneath it. cool! (^人^)

hopefully all of that makes sense, but if you need further explanations just ask away! i'll do my best to answer ;;

otherwise, to address your other questions: stacking buttons are simple, which can be done simply by restricting the width of your tabs container:

Spoiler: stacking

[border=transparent; padding:0; height:100px; width:25px; padding:0;][tabs]
   [tab=a]hello![/tab]
   [tab=a]hello![/tab]
   [tab=a]hello![/tab]
[/tabs][/border]

• a
• a
• a

• hello!
• hello!
• hello!

you can achieve the tabs on the sides (which i assume refers to a right angle flip such as this, maybe? let me know if I'm wrong!!!) by either using the stacking method alongside line-height (within the tabs container, since buttons are actually affected by both line-height & letter-spacing!) and rotating the tab covers instead or by making use of a transform:rotate, the latter of which requires a.... somewhat more tedious process that i can't fully explain myself either, so if someone else wants to explain that.. that would be.. great (´｡• ω •｡`)

sorry for the long post, and i hope this helps!!! (* ^ ω ^)

 

[OrganicUFO]

it's super late at night right now so apologies if this tutorial is somewhat brief!!! i have plans to make a more in-depth one in the future (plans that may never come to fruition (´-ω-`) ), but for now i hope this helps! (´･ᴗ･ ` )

so there are actually a few different ways to make custom tabs, one of the ways being the one pasta's made a tutorial on. i'll try to explain the method i use in most of my codes, but note that it has it's own drawbacks as well! it's just the most convenient for me in terms of getting consistent results across devices/browsers!

i'll direct you to this page for you to understand the different position properties: here!, noting in particular position:absolute and position:relative. I'm a little lazy to explain it all right now, but once you understand those the next parts should make sense to you once you mess around a little!

loosely, the way i do tabs is by putting position:absolute on my tab contents and a position:relative on the container where the tabs will be aligned to, if that makes sense. here's a very small example:

Spoiler: basics

[border=transparent; /*the big container that controls the limits of your tab contents*/  padding:0; height:220px; width:220px; padding:0; background:red; position:relative; line-height:0;]
   [border=transparent; /*the tab container*/ height:30px; width:100%; padding:0; overflow:hidden;][tabs]
      [tab=a][border=transparent; height:180px; width:180px; padding:10px; box-sizing:border-box; background:blue; position:absolute; bottom:0; left:0; line-height:100%; font-size:14px; color:#fff;]i can go wherever i want within the red box since i have position:absolute![/border][/tab]

      [tab=a][border=transparent; height:140px; width:120px; padding:10px; box-sizing:border-box; background:blue; position:absolute; top:0; left:10px; line-height:100%; font-size:14px; color:#fff; pointer-events:none;]even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work![/border][/tab]

      [tab=a]you can't see this content because of the overflow:hidden![/tab]
   [/tabs][/border]
[/border]

• a
• a
• a

• i can go wherever i want within the red box since i have position:absolute!
• even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work!
• you can't see this content because of the overflow:hidden!

key points on this are the overflow:hidden on the tabs container, which i use as a handy way to hide the line that appears under most tabs as well as shrink the height of buttons, since the cut-off won't affect the use of the buttons! it does, in turn, hide content that is not enclosed in the borders you see, but position:absolute on the tab contents allows it to bypass the overflow:hidden on the tabs container as well as its confines. so you'll notice the buttons themselves are actually only the green element in the example, but the tab contents are able to go beyond just the fixed area normal tabs are restricted to.

to customise the tabs, i make use of a position:absolute element with a background (placed outside of the tab containers) that covers the buttons through the position values. see below:

Spoiler: customisation

[border=transparent; /*the big container that controls the limits of your tab contents*/  padding:0; height:220px; width:220px; padding:0; background:red; position:relative; line-height:0;]
   [border=transparent; /*the tabs container*/ height:30px; width:100%; padding:0; overflow:hidden; background:green;][tabs]
      [tab=a][border=transparent; /*these are the tab contents*/ height:180px; width:180px; padding:10px; box-sizing:border-box; background:blue; position:absolute; bottom:0; left:0; line-height:100%; font-size:14px; color:#fff;]i can go wherever i want within the red box since i have position:absolute![/border][/tab]

      [tab=a][border=transparent; /*these are the tab contents*/ height:140px; width:120px; padding:10px; box-sizing:border-box; background:blue; position:absolute; top:0; left:10px; line-height:100%; font-size:14px; color:#fff; pointer-events:none;]even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work![/border][/tab]

      [tab=a]you can't see this content because of the overflow:hidden![/tab]
   [/tabs][/border]

   [border=transparent; /*the tab covers*/ height:30px; width:100%; padding:10px; box-sizing:border-box; background:blue; opacity:0.8; position:absolute; top:0; left:0; pointer-events:none;]
      [border=transparent; height:auto; width:50px; padding:0; float:left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]hey[/border]
      [border=transparent; height:auto; width:50px; padding:0; float:left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]wow[/border]
   [/border]
[/border]

• a
• a
• a

• i can go wherever i want within the red box since i have position:absolute!
• even over the buttons! but i would advise adding pointer-events:none to this so your buttons still work!
• you can't see this content because of the overflow:hidden!

hey

wow

you'll see the dimensions of the tabs cover match the tabs container in this scenario, but you can change it to fit your needs. just ensure that position:absolute and pointer-events:none are both present, the former to ensure it can cover the tabs and the latter to ensure your buttons work underneath it. cool! (^人^)

hopefully all of that makes sense, but if you need further explanations just ask away! i'll do my best to answer ;;

otherwise, to address your other questions: stacking buttons are simple, which can be done simply by restricting the width of your tabs container:

Spoiler: stacking

[border=transparent; padding:0; height:100px; width:25px; padding:0;][tabs]
   [tab=a]hello![/tab]
   [tab=a]hello![/tab]
   [tab=a]hello![/tab]
[/tabs][/border]

• a
• a
• a

• hello!
• hello!
• hello!

you can achieve the tabs on the sides (which i assume refers to a right angle flip such as this, maybe? let me know if I'm wrong!!!) by either using the stacking method alongside line-height (within the tabs container, since buttons are actually affected by both line-height & letter-spacing!) and rotating the tab covers instead or by making use of a transform:rotate, the latter of which requires a.... somewhat more tedious process that i can't fully explain myself either, so if someone else wants to explain that.. that would be.. great (´｡• ω •｡`)

sorry for the long post, and i hope this helps!!! (* ^ ω ^)

Oh man, there's no need to apologize! Honestly I'm super excited to delve into this and I can't tell you how much I appreciate the help. Your tabs are really gorgeous and I can't wait to practice working on making my own! I hope you have a good evening and I hope it's alright but if I have any further questions would it be alright if I tagged you here?

 

[Uxie]

Oh man, there's no need to apologize! Honestly I'm super excited to delve into this and I can't tell you how much I appreciate the help. Your tabs are really gorgeous and I can't wait to practice working on making my own! I hope you have a good evening and I hope it's alright but if I have any further questions would it be alright if I tagged you here?

of course! ( ´ ω ` ) full disclaimer that i have no real training in css so some of my explanations will be kinda scuffed, but i'll do my best within my abilities!!

 

[OrganicUFO]

of course! ( ´ ω ` ) full disclaimer that i have no real training in css so some of my explanations will be kinda scuffed, but i'll do my best within my abilities!!

That's no worries! Honestly this alone has been hugely helpful! I'm just trying to figure out how to meddle around with the customization bits since I'm still struggling a bit with those