Forums

Hello everybody

in this webform, the tabs in the tabs container area don't stay in line once they don't have enough horizontal space. Try clicking on all of them, you'll see what I mean.

http://www.schoolsdebate.org/index.php/en/europenform2013

Since my template doesn't support tabs, I've added the CSS code suggested in the FAQ section (changed a few colours, though😉 )

dl.tabs {
    clear: both;
    float: left;
    margin: 50px 0 0;
    z-index: 50;
}
dl.tabs dt {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    color: #000000;
    float: left;
    margin-right: 3px;
    padding: 4px 10px;
}
dl.tabs dt.open {
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #FF9100;
    color: #FF9100;
    z-index: 100;
}
div.current {
    border: 1px solid #CCCCCC;
    clear: both;
    max-width: 500px;
    padding: 10px;
}
div.current dd {
    margin: 0;
    padding: 0;
}
dl#content-pane.tabs {
    margin: 1px 0 0;
}

On a more aesthetic level, how could I make all boxes and tabs have the same width, so that they align on both, left and right sides?

Thanks for any help,
Chris

Hi Chris,

I think this is a consequence of having two rows of tabs. One solution is to try editing your code to use just a single row.

Bob

Hello GreyHead,

thanks for the quick response! This would exactly do...

I can see you've been able to quite quickly do something about that🙂 Would you mind sharing how? Not being a CSS programmer myself (I just copy&paste things), I'd much appreciate it.

Or is this a setting I can fix in the containers?

Best regards,
Chris

Hi Chris,

I added some <br /> tags in the labels, then added a little CSS to center the text and make the tabs a bit taller (you might not need that).

It was done in the browser so I didn't keep any notes :-(

Bob

Hello Bob,

GREAT! Many thanks. I just taught myself some HTML, I guess, and how and where to add the <br /> tags. It took me a while since my browser didn't show the changes, but when I edited and saved it in the HTML code, it worked.



I've added quite many <br /> tags to make the tabs look uniformal (three lines of texts). You can see that some have a 'gap' line, but I do like your version better :wink: , so it appears that I do need a CSS code to make the tabs taller and center the text. If the labels only have two lines of text, the tabs would end in 'mid-air' (after second line).



It is just an aesthetic issue, but it would be nice to resolve it. If you have the time, could you share what code you would write and where you would implement it, please?

One more thing: I save the changes in the HTML code (through form settings), but every time I make any other change to the form, it removes the <br /> tags. Is there any way to make the changes permanent?

Many thanks for your support!
Chris

Hi CrystalFrontier,

If you use your browser web developer tools (F12 in most browsers) you can see what CSS is being applied and work out what needs to be changed or over-ridden.

Bob

Hello Bob,

thanks for your reply! I really appreciate your help. I've played around a little more and have found a way to arrange it the way I want it😉 Thanks again!