Menu
I currently have a 2 column site layout, with a footer/header, a fixed width left column which contains a menu, and a right hand column which takes the rest of the available space. My lefthand column contains a fold out menu, and it seems that when I have tabs in the right hand column, the text within the selected tab only begins after the end of my lefhand menu ends.
I've tried using a clear:both; before tabs begin which causes the entire tabs to shift downward, and begin after the lefhand menu ends.
Here is the code I'm currently using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js">
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
margin: 0;
background-color: #FFF;
}
#header{
background-color: #666;
border-bottom: 1px solid #333;
}
#header h1{
margin: 0;
padding: .5em;
}
#nav{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content{
padding: 0;
margin: 0 0 0 180px;
}
#footer{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
}
.menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; }
.menu li { background-color: #cccc99; float: left; }
.menu li.sub { background-color: #cccc99; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 125px; }
* html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.footer
{
text-align: center;
font-family: Arial, sans-serif;
font-size: 11px;
color: #CCCCCC;
}
.ui-wrapper { border: 1px solid #383838; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }
.ui-tabs-hide {
display: none !important;
}
.ui-tabs-nav, .ui-tabs-panel {
font-family: Arial, sans-serif;
font-size: 13px;
color: #CCCCCC;
background-color: #242424;
}
.ui-tabs-panel a {
color: #FFD100;
cursor: pointer;
outline: none;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 2px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
color: #FFD100;
float: left; /* fixes dir=ltr problem and other quirks IE */
padding: 0 12px;
}
.ui-tabs-nav a {
margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
background-position: 100% 0;
text-decoration: none;
white-space: nowrap; /* @ IE 6 */
outline: 0; /* @ Firefox, prevent dotted border after click */
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
color: white;
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
background-position: 100% -23px;
}
.ui-tabs-nav a span {
padding-top: 1px;
padding-right: 0;
height: 20px;
background-position: 0 0;
line-height: 20px;
}
.ui-tabs-nav .ui-tabs-selected a span {
color: white;
font-weight: bold;
padding-top: 0;
height: 27px;
background-position: 0 -23px;
line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
color: #000;
}
.ui-tabs-panel {
padding: 10px;
background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs > ul").tabs();} );
</script>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
<li><a href="#">Page5</a></li>
<li><a href="#">Page6</a></li>
<li><a href="#">Page7</a></li>
<li><a href="#">Page8</a></li>
<li><a href="#">Page9</a></li>
<li><a href="#">Page10</a></li>
<li><a href="#">Page11</a></li>
<li><a href="#">Page12</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="main">
<h1>Main Body Here</h1><br>
<div id="tabs">
<ul>
<li><a href="#one"><span>One</span></a></li>
<li><a href="#two"><span>Two</span></a></li>
<li><a href="#three"><span>Three</span></a></li>
</ul>
<div id="one">
Tab One Here
</div>
<div id="two">
Tab Two Here
</div>
<div id="three">
Tab Three Here
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Footer
</div>
</div>
</body>
</html>
Any help would be apperciated. Thanks.
Note: Jquery 1.3, Jquery-ui 1.6
420
Try this:
.ui-tabs-nav { height:2em; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
