• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help fake tabs

ewolf20

the aspiring roleplayer
i know i honestly don't feel like coding anymore, if i were to want to stylize my tabs by using fakes one, what are the methods to do so?
 
There are three different methods.

Using the original Tab tag and covering the buttons with well placed divs. This literally just putting a div box that you want the button to look like over the actual button.

Using goto and anchor links on a scroll box. This is probably the easiest, since every part of it can be placed anywhere, and the scroll box will just hold all the content. The problem is that the page will jump, and without some margin trickery, the content might be hidden behind the nav bar at the top of the screen.

Using accordions and absolute positioning. This is quite difficult and requires the absolute positioning of the content and the accordion titles. It is basically forcing every part of an accordion out of an accordion. While it is the most difficult, when done well, it makes a really nice tab system.
 
There are three different methods.

Using the original Tab tag and covering the buttons with well placed divs. This literally just putting a div box that you want the button to look like over the actual button.

Using goto and anchor links on a scroll box. This is probably the easiest, since every part of it can be placed anywhere, and the scroll box will just hold all the content. The problem is that the page will jump, and without some margin trickery, the content might be hidden behind the nav bar at the top of the screen.

Using accordions and absolute positioning. This is quite difficult and requires the absolute positioning of the content and the accordion titles. It is basically forcing every part of an accordion out of an accordion. While it is the most difficult, when done well, it makes a really nice tab system.
i'm a bit of visual learner honestly and sometimes i learn through observation and dissection, could give some examples? the ones not behind a no touchy sign (not free to use.)
 
Cover up tab method:
Queen of Chaos
when it's all done

Goto and Anchor method:
Dynastic Silk
Pseudo-tabs with Anchor links

Accordion Method:
Of Glass and Steel (isn't the best example because of how complicated the entire code is...)
Pseudo-tabs using Accordions (tbh, I'm not really a big fan of this one cause it doesn't use the full power of the accordion

I could've sworn there were a lot more people who mastered the accordion method and made freebies for it... I know there are lot more people using the Goto and Anchor method, but I can't find ones that are freebies, and its frustrating me cause I saw a beautiful one with a leaf design and I can't find it anymore! There are people like Lyro Lyro (Lyrositor's Coding Repository | I'll refrain from categorizing it above since they all seem to be made using Lyro's BBcoder, but they're a good learning tool nonetheless) and IctoraPost IctoraPost (links already above) who know how to do the Accordion method.
 
This is a very simplified version of what I think they were asking. TBH, the overlay tab covers aren't the best because the only work on browsers on a normal monitor. Anything on a mobile browser doesn't work.

That being said, this way of doing it isn't the easiest one. The preview doesn't reflect the "live" version. You can use the code I posted to learn from if you want. -shrug-

Tab One
Tab Two

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat velit id turpis feugiat lobortis. Donec et venenatis ante. Cras finibus nulla id sem hendrerit, porta facilisis turpis semper. Integer aliquam fermentum odio, ac imperdiet massa malesuada et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. In ut vulputate nisi. Integer convallis urna sit amet turpis pellentesque cursus. Nam faucibus quam quis cursus dictum. Fusce vestibulum euismod condimentum.

    Quisque condimentum suscipit pellentesque. Donec dictum posuere felis, id interdum felis mattis vitae. Aliquam fermentum dolor a lacus lobortis, a finibus urna malesuada. Suspendisse viverra consectetur ante ut ullamcorper. Donec efficitur, ipsum id mattis viverra, ipsum metus convallis dolor, a condimentum purus eros sed augue. Praesent eget velit sed lacus tempus aliquam. Phasellus at nisl dolor. Mauris viverra non lectus ut varius. Donec condimentum commodo varius. Etiam a bibendum tellus. Pellentesque sed metus ac ligula tincidunt auctor. Quisque ut rhoncus nulla.



Code:
[div=position:relative;max-width:400px;height:400px;margin:auto;background-color:#ccc;][div=display: inline-block;position:absolute;left:17px;width:78px;height:24px;background-color:#000000!important;pointer-events:none;line-height: 24px;z-index:1;][div=position:relative;left:9px;color:#fff;]Tab One[/div][/div][div=position:absolute;left:99px;width:78px;height:24px;background-color:#000000;pointer-events:none;line-height: 24px;z-index:1;][div=position:relative;left:9px;color:#fff;]Tab Two[/div][/div][Tabs]

[Tab=NULL]
[div=position:absolute;top:29px;left:0px;height:360px;background-color:red;z-index:1;padding:5px;text-align:justify;overflow:auto;color:#000;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat velit id turpis feugiat lobortis. Donec et venenatis ante. Cras finibus nulla id sem hendrerit, porta facilisis turpis semper. Integer aliquam fermentum odio, ac imperdiet massa malesuada et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. In ut vulputate nisi. Integer convallis urna sit amet turpis pellentesque cursus. Nam faucibus quam quis cursus dictum. Fusce vestibulum euismod condimentum.

Quisque condimentum suscipit pellentesque. Donec dictum posuere felis, id interdum felis mattis vitae. Aliquam fermentum dolor a lacus lobortis, a finibus urna malesuada. Suspendisse viverra consectetur ante ut ullamcorper. Donec efficitur, ipsum id mattis viverra, ipsum metus convallis dolor, a condimentum purus eros sed augue. Praesent eget velit sed lacus tempus aliquam. Phasellus at nisl dolor. Mauris viverra non lectus ut varius. Donec condimentum commodo varius. Etiam a bibendum tellus. Pellentesque sed metus ac ligula tincidunt auctor. Quisque ut rhoncus nulla.[/div]
[/Tab]

[Tab=NULL]
[div=position:absolute;top:29px;left:0px;height:360px;background-color:blue;z-index:1;padding:5px;text-align:justify;overflow:auto;color:#fff;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat velit id turpis feugiat lobortis. Donec et venenatis ante. Cras finibus nulla id sem hendrerit, porta facilisis turpis semper. Integer aliquam fermentum odio, ac imperdiet massa malesuada et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. In ut vulputate nisi. Integer convallis urna sit amet turpis pellentesque cursus. Nam faucibus quam quis cursus dictum. Fusce vestibulum euismod condimentum.

Quisque condimentum suscipit pellentesque. Donec dictum posuere felis, id interdum felis mattis vitae. Aliquam fermentum dolor a lacus lobortis, a finibus urna malesuada. Suspendisse viverra consectetur ante ut ullamcorper. Donec efficitur, ipsum id mattis viverra, ipsum metus convallis dolor, a condimentum purus eros sed augue. Praesent eget velit sed lacus tempus aliquam. Phasellus at nisl dolor. Mauris viverra non lectus ut varius. Donec condimentum commodo varius. Etiam a bibendum tellus. Pellentesque sed metus ac ligula tincidunt auctor. Quisque ut rhoncus nulla.[/div]
[/Tab]

[/Tabs][/div]
 
Fable Fable
Alteras Alteras

i'm going to be frank, making up tabs is just not worth it for me. helps that nearly pulled my hairs on finding a way. i just found some new found respect for you guys.
 

Users who are viewing this thread

Back
Top