Jump to content
plox

W3.CSS Vertical Tabs problem

Recommended Posts

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):

  • 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:

<div class="w3-container">
		<div class="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:

<div class=" w3-bar-block w3-yellow w3-card-2 w3-border w3-round-medium w3-margin" style="width:130px">

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.

 

sidebar.png

without sidebar.png

W3.CSS Vtabs.png

Edited by plox
remove items

Share this post


Link to post
Share on other sites

Image 2 is the closest to the last one (the example i presume?). 
The left div does not need any margin. Try adding: 
margin: 0;

And the right div would need:
vertical-align: top;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...