I am on win 7, copied the Tryit example for Vertical Tabs into my editor. I noticed these differences when I view it in my browsers ( I am using the pro version of the css so the colours do not show):
The example shows a border around the whole page - mine doesn't - see W3.CSS Vtabs.png
Probably because it fills the full page and I can't tell if there is a border present
So I decided to add a W3.CSS Card to contain the Tab code within it:
<divclass="w3-container"><divclass="w3-card-4 w3-margin"style="width:95%;">
....code for tabs
</div></div>
It still does not show the border around the tabs and the corresponding tabbed content but the tab side bar is not contained in the card container and overflows above it. See enclosed sidebar.png screenshot.
The w3-sidebar class seems to be what is causing the problem so I removed from the declaration:
W3.CSS Vertical Tabs problem
in CSS
Posted · Edited by plox
remove items
Hello
I am on win 7, copied the Tryit example for Vertical Tabs into my editor. I noticed these differences when I view it in my browsers ( I am using the pro version of the css so the colours do not show):
So I decided to add a W3.CSS Card to contain the Tab code within it:
It still does not show the border around the tabs and the corresponding tabbed content but the tab side bar is not contained in the card container and overflows above it. See enclosed sidebar.png screenshot.
The w3-sidebar class seems to be what is causing the problem so I removed from the declaration:
The Tabs are contained in the card container but the corresponding tab content is on longer aligned with the respective tab (without sidebar.png).
Thank you in advance for your help and assistance.