Centering Tabs in Embeddable Tabbed Display

kpcollier · December 5, 2018

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>

cheonsa · December 5, 2018

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;"

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

Regards,

kristina

kpcollier · December 7, 2018

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

cheonsa · December 10, 2018

Hello @kpcollier,

I found a tutorial on how to align one of the tabs to the right. Maybe this tutorial can help you: https://www.w3schools.com/howto/howto_css_topnav_right.asp

Regards,

kristina

kpcollier · December 10, 2018

I've tried a couple things with that article. I would completely copy it but I need it to work like the Embeddable Tabbed Display with the JavaScript.

Here is my codepen link. If anyone could take a look and see what I am doing wrong, I would appreciate it. I'm pretty damn close lol

https://codepen.io/kpcollier/pen/VVoBvM

Login

Centering Tabs in Embeddable Tabbed Display

Recommended Posts

kpcollier

Link to comment

Share on other sites

cheonsa

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

cheonsa

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

Join the conversation

Browse