Welcome, Guest
Username: Password: Remember me
1. The "search..." box above searches the Docs & Forum Posts. The "Search" tab above just searches the Forum Posts. :side:
Please use these to search for your issue *before* creating a new message topic, as your issue may have been previously solved.
2. Please put your Club # and Club Web Address in your Forum Signature (best) OR in each post to get faster support from us.
Click here to edit your signature at the bottom of the Profile Information tab.
3. Our user and admin docs are available at: https://support.toastmastersclubs.org/doc "There's a doc for that!" ;)
3a. There is a New "Opt In" Feature for newly added members. It also explains the strikethrough member information. Click Here to View the Post
4. When posting a New Topic , please include all relevant details and be specific. When did your issue 1st occur? What operating system, browser, & browser version are you using? Did you refresh your browser cache? Are your cookies enabled? Lastly, a screen shot is often helpful.
5. Please abide by the Terms of Use . We are volunteers contributing our spare time. We are happy to assist you, so long as you are respectful and courteous.
6. We are always looking for new FreeToastHost Ambassadors to join our ranks and support fellow Toastmasters in their use of the FreeToastHost website system. If you are familiar with the system and have some interest, send a Private Message to RogerM.
  • Page:
  • 1

TOPIC: Tip to make the width of webpage wider when tabs are used?

Tip to make the width of webpage wider when tabs are used? 1 year 6 months ago #61632

  • Bright
  • Bright's Avatar Topic Author
  • Visitor
  • Visitor
Hi Steve,

I have followed your previous post of codes to use tabs into webpage.
<div id="myTabs" class="userTabs">
<ul class="tab-list">
<li><a href="#tab1">My First Tab</a></li>
<li><a href="#tab2">My Second Tab</a></li>
<li><a href="#tab3">My Third Tab</a></li>
</ul>

<div id="tab1">
This is some content.
</div>

<div id="tab2">
This is some more content.
</div>

<div id="tab3">
This is even more content.
</div>
</div>

It's useful and works fine. Only one thing is the width will become narrower than normal webpage.
e.g. my club webpage example: ceci.toastmastersclubs.org/join_club.html

I have found that another club webpage below, it can be viewed wider (almost near the normal):
elitetoastmasters.toastmastersclubs.org/

How you idea how to make it wider as above one so can it be better viewed?

I intend to combine some web links with similar purpose on main menu into one webpage by using
tabs if it can be fixed. Thus, the no. of web links on main menu can be reduced to be more efficient.

Thanks!
Last Edit: by Bright. Reason: revision of description
The topic has been locked.

Tip to make the width of webpage wider when tabs are used? 1 year 6 months ago #61634

  • SteveTheTechie
  • SteveTheTechie's Avatar
  • Offline
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10465
  • Karma: 145
  • Thank you received: 2833
Look at support.toastmastersclubs.org/doc/item/appearance ... "Layout Adjustments"

However, be aware that you cannot adjust the internal margin on a per page basis... it is a global tweak.

There is not really a good way to just have the tabs be used instead of the accordion for the home page content ... The accordion has to be used to allow for the possibility of the TI provided content panes to be enabled.

So my only real option for this from a system design standpoint was to give clubs a way to use tabs inside the accordion w/ a way to tweak the margin.
The following user(s) said Thank You: Bright
Last Edit: by SteveTheTechie.
The topic has been locked.

Tip to make the width of webpage wider when tabs are used? 1 year 6 months ago #61635

  • Bright
  • Bright's Avatar Topic Author
  • Visitor
  • Visitor
Thanks for your quick response.
It works!
The topic has been locked.
  • Page:
  • 1
Moderators: SteveTheTechieGeorgeMarshallPam
Powered by Kunena Forum