Jump to content
kpcollier

Centering Tabs in Embeddable Tabbed Display

Recommended Posts

Hey all. I have used this Embeddable Tabbed Display for a few different DataPages. However, if all of them, the tabs are floated to the left. I've tried messing with this in CSS but it's just too crazy.

Please take a look and see if you could give me a hand!

<head>

<style>
iframe#viewer0 {
height: 768px !important;
}

iframe#viewer1 {
height: 768px !important;
}

iframe#viewer2 {
height: 768px !important;
}


</style>

</head>

<style>
.ui-resizable-helper { border: 1px dotted gray; }
ul#menu { width: 100%; height: 40px; background: #505459; font-size: 0.8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
ul#menu li a {color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; }
ul#menu li a:hover { color: #333; }
.content{display:block; width: 100%; height:100%; padding: 10px; border:2px solid #505459; overflow:hidden; position:relative;}
.ChannelView{ width:100%; height:100%; margin-bottom:100%;}
</style>

<script>
function getElementByClass(classer) {
var allHTMLTags=document.getElementsByTagName("*");
var array = [];
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className==classer) {
array.push(allHTMLTags[i]);
}}
return array;}

function channel(n){
var frames = getElementByClass("ChannelView");
var length = frames.length;
for(var i = 0; i < length; i++)
{ if(frames[i].id == ("viewer"+ n))
{ frames[i].style.display = "inline";
}else{ frames[i].style.display = "none";}}}
</script>

<div style="display:block; text-align:left;">
<div style="display:block;">
<ul id="menu">

<li><a onclick="channel(0)">Timesheet</a></li>
<li><a onclick="channel(1)">Timesheet Calendar</a></li>
<li><a onclick="channel(2)">News</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="" style="display:inline"></iframe>
<iframe  frameborder=0 id="viewer1" class="ChannelView" src=""></iframe>
<iframe  frameborder=0 id="viewer2" class="ChannelView" src=""></iframe>


</div>
</div>

 

Share this post


Link to post
Share on other sites

Hi @kpcollier,

 

As I understand, you want your tabs to be displayed at the centre.

 

Inside the style tag, I just removed "float:left;" and added  "text-align:center;" and "display:inline-block;"

 

<style>
.ui-resizable-helper { border: 1px dotted gray; }
ul#menu { width: 100%; height: 40px; background: #505459; font-size: 0.8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; text-align: center;}
ul#menu li { display: block; display: inline-block; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
ul#menu li a {color: #fff; text-decoration: none; display: block;  line-height: 200%; }
ul#menu li a:hover { color: #333; }
.content{display:block; width: 100%; height:100%; padding: 10px; border:2px solid #505459; overflow:hidden; position:relative;}
.ChannelView{ width:100%; height:100%; margin-bottom:100%;}
</style>

image.png

 

You can check this link for reference: http://cssdeck.com/labs/centering-horizontal-menu-navigation-or-tabs-lists-with-css

 

Regards,

kristina

Share this post


Link to post
Share on other sites

Sorry, @kristina

If you could help with one more thing I would appreciate it. Now, I am trying to get ONE tab to be aligned to the far right of it. I've tried messing with it. I try to add a separate div with a new class for the one tab, set it to display:block and tried inline as well. Set the one div to text-align:right. Also tried just using !important to get it over there and I just can't figure this stuff out. Lol. 

Any help is appreciated.

KPC

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×