Hey there:
I've been experimenting with the "easytabs" jQuery plugin to create vertical tabs positioned along the right edge of the main div containing all the content of my web page.
My CSS skills are lacking. Although I've made good progress, I'm currently stuck on the final step towards achieving my desired outcome.
For the past few hours, I've been trying to adjust the position and size of the panel-container div that houses the vertical tab content divs - div1/div2/div3/div4, but so far I haven't been successful.
I'm hoping to get some assistance from experienced individuals on this platform to help me identify what I might be missing.
My goal is to have the panel-container div centered on the page. However, whenever I try to specify a width for the panel-container div in pixels, it results in the vertical tabs becoming disarranged.
Additionally, I would appreciate guidance on optimizing the text orientation and transform properties for the vertical tabs defined in the CSS. Adjusting the location of the vertical tabs has been a trial-and-error process for me, but I believe there must be a more efficient method
The vertical tab strip appears to have a 2-pixel offset to the left in Firefox, while it displays correctly in Microsoft Edge. Any suggestions on how to resolve this issue?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./easytabs-vert.css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../jspkg-archive/vendor/jquery.hashchange.min.js" type="text/javascript"></script>
<script src="../jspkg-archive/lib/jquery.easytabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tab-container').easytabs();
});
</script>
</head>
<body >
<div style="width:1320px; height:928px; margin: 0 auto; border: 1px solid green">
<div id="tab-container" class="tab-container" style="float:right; left:1321px">
<ul id="vertitab" class='etabs' style="width:500px;">
<li class='tab active'><a href="#div1">Requests</a></li>
<li class='tab'><a href="#div2">Orders</a></li>
<li class='tab'><a href="#div3">Payments</a></li>
<li class='tab'><a href="#div4">Parts Lookup</a></li>
</ul>
<div class="panel-container" style="border: 1px solid blue">
<div id="div1" > Tab 1 Content</div>
<div id="div2" > Tab 2 Content</div>
<div id="div3" > Tab 3 Content</div>
<div id="div4" > Tab 4 Content</div>
</div>
</div>
</div>
</body>
CSS Styling:
.etabs { margin: 0; padding: 0; }
.tab {
display: inline-block;
zoom:1;
background: #eee;
border: solid 1px #999;
border-bottom: none;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
.tab a {
font-size: 14px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
}
.tab a:hover {
text-decoration: underline;
}
.tab.active {
background: #008000;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #666;
}
.tab a.active {
text-decoration: none;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
.tab-container .panel-container {
background: #fff;
border: solid #666 1px;
padding: 10px;
-moz-border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
}
#vertitab {
position: absolute;
-webkit-transform-origin: 10% 271%;
-moz-transform-origin: 10% 271%;
-o-transform-origin: 10% 271%;
transform-origin: 10% 271%;
-webkit-transform: translate(-50%, 0) rotate(-90deg);
-moz-transform: translate(-50%, 0) rotate(-90deg);
-o-transform: translate(-50%, 0) rotate(-90deg);
transform: translate(-50%, 0) rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
JSFiddle Link: https://jsfiddle.net/ru03w5Ly/2/
Thank you and warm regards