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?
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
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.)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.
[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]