Geek Answers Handbook

Using jquery tabs with my layout, my tabs have a huge space before they start

I currently have a site layout with two columns, with a footer / header, a left column with a fixed width that contains the menu, and a right column that takes up the rest of the available space. There is a flip menu in my lefthand column, and it seems that when I have tabs in the right column, the text inside the selected tab only starts after the end of my lefhand menu ends.

I tried using clear: both; before the start of the tabs, because of which all the tabs are moved down and begin after the left menu is completed.

Here is the code I'm using now:

<!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

+4
source share
3 answers

Try the following:

 .ui-tabs-nav { height:2em; }
+9
source

Cleaning, by default, is applied quite globally. What causes the error, you see: #nav comes in front of the tabs in the content, so clear: both clear it (you actually use clear: both on .tabs :: after, but the same diff).

To “contain” clarity and not interact with elements from another place on the page, you also need to place a container. In this case, it will be div.content. Add float: left to the and width: 100% to stretch the width of the div # main, and you will get the desired behavior - the tabs will be immediately below the tabs themselves.

(This is one of the reasons, by the way, that the "Float Nearly Everything" strategy works just as well as it does - it can still be used clearly, intelligently, despite the massive use of float.)

+3
source

Re:

EDIT A back when I started using the jQuery user interface, the CSS that came with the loading caused my calendars to render 150% the size that I expected them to be. Through their site, I had to change the font size and add in CSS, and then reload everything. If the interval is off, it looks like there might be some padding-left applied somewhere.

I had the same problem initially, but modifying ui.tabs.css as shown below:

.ui-tabs {padding: .2em; zoom: 1; font size: 80%! important; }

0
source

More articles:


All Articles