Tabbed Content / Posts /

Multiple Tab Contents on One Page

10
 This worked great! But question: I put two different tab sections on same page, but I want to customize them: Both with different fixed Heights, and one with overflow:Scroll and the other: overflow:hidden. As someone fairly new to css, how can I accomplish this?

Thanks, Scott
Scotty G  11 years ago   viewed: 9105    

2 Answers

-1
There is an easy solution to this.Take the Tab Content Template 1 as example, you will find this block of code at the bottom of the CSS file:
1. Fixed Height:
.tabcontents
{
    border: 1px solid #B7B7B7; 
    padding: 30px;
    background-color:#FFF;
    border-radius: 0 2px 2px 2px;
}
Then, just add another two lines:
.tabcontents
{
    border: 1px solid #B7B7B7;
    padding: 30px;
    background-color:#FFF;
    border-radius: 0 2px 2px 2px;
    height: 300px;
    overflow: auto;
}

I would not suggest overflow:hidden as the content out of the range will be invisible to visitors.

2. Different Height for the two tab contents on the same page.
For the second tab content, add another class to the div.tabcontents in the HTML:
<div class="tabcontents  cls2">
Then in the CSS, add:
.cls2
{
    height: 400px;
}
As the cls2 is after the tabcontents, the CSS for cls2 will overwrite the .tabcontents specification.
Natalia   11 years ago
-2
Wow, thanks for the fast reply. That was easy - works perfect! I understand your thoughts on not hiding overflow, but on my 2nd tab, I'm only putting in a certain amount of content, so there won't be any overflow. But I did change it to overflow:auto.

Great products, I'm going to try one of the Menu's next.

Scott
Scotty G   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲