Choosing the "auto-rotate" function on the tabs element is a great way to add a more dynamic feel to your site. However, if your tab box is located at the top of your page and the height of each tab is different, when a user scrolls down the page, the content will "jump" up and down as the tabs change. So, it is best practice to lock down the height on an auto-rotating tabs element.

The easiest way to control the height of your tab box is to only use horizontal photos that are floated either to the right or left of the headline and summary text (see screenshot to the right). As long as you always choose a horizontal photo, and limit your summary text, the tab box will remain a consistent height.

If you are going for a different look in your tabs element, we can lock the height for you via CSS. In this option, a height will be set on your tab box, and any overflowing text (or photo) will be hidden.

If you have CSS experience and access to the stylesheet in your CP5 admin, use the following code as a guideline for locking down the height: 

#content #autoRotate div.yui-content {height: 300px;overflow: hidden;}

As always, this CSS can be tailored by content slot (upperLeft, lowerLeft, sideBar, etc) so you can specify multiple heights for the tabs element depending on where the element is placed on your site. Also, by using the id #autoRotate the CSS is targeting only tab elements that are set to auto rotate, and therefore will not apply a height restriction to static tab elements.

If you would like assistance with deploying this on your site, you can open a support ticket in our system by going to support.collegepublisher.com. Please include the following information: 

• Subject line: Locking down Tabs Element height
• Your site URL
• Which tabs element you would like locked down
• An approximate pixel height you would like

Comments

Be the first to comment on this article!

Add comment


I am not posting spam. I understand posting spam or other comments that are unrelated to this article will cause my comment to be flagged for deletion and possibly cause my IP address to be permanently banned from this server.

Enter the characters in the image above: