J'utilise des onglets JQuery dans ma page, et nous avons réussi à placer les onglets ci-dessous le contenu en utilisant certains paramètres CSS empruntés/script.espace vide au bas des onglets JQuery
Ma page a une barre latérale sur le côté gauche, et une bannière de menu en haut de la page. Le contenu apparaît alors entre la bannière du menu principal et le panneau des onglets en bas.
j'ai remarqué il y a un petit espace vide en bas de ma page whichs entraîne la projection de barre de défilement verticale. Je voudrais supprimer cet espace (et le défilement) et besoin de l'aide d'un expert.
Je sais que l'espace est causé par la section tabulations de mon contenu car j'ai utilisé des techniques de firebug et d'élimination sur d'autres éléments majeurs et l'espace n'apparaît que lorsque je présente les onglets.
J'ai mis le rembourrage CSS, les marges, et la largeur de bordure à zéro, mais encore voir l'espace.
Voici mon HTML, CSS et script:
<head>
<title>Rfq</title>
<%= stylesheet_link_tag "rfq.css" %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "jquery-ui-1.8.10.custom.min.js" %>
<%= javascript_include_tag "rfq.js" %>
<%= csrf_meta_tag %>
</head>
<body>
<!--the top menu bar-->
<div id="rfq_menu_bar" class="ui-widget-header">Request for quote...</div>
<!--the side bar collapsed-->
<div id="rfq_side_bar_collapsed" class="ui-tabs-nav ui-state-active" >
</div>
<!--the tab panels-->
<div id=rfq_tabs_parent class="ui-widget-content">
<div id="rfq_main_tabs" class="tabs-bottom ui-widget-content">
<ul>
<li><a class="rfq_main_tab" id="items_tab" href="#rfq_items_panel">RFQ Items</a></li>
<li><a class="rfq_main_tab" id="reports_tab" href="#rfq_reports_panel">RFQ Reports</a></li>
</ul>
<div class="rfq_tab_content" id="rfq_items_panel">bob</div>
<div class="rfq_tab_content" id="rfq_reports_panel">jane</div>
</div>
</div>
</body>
Et mon CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Verdana, Sans-serif;
font-size: 10px;
position: relative;
border-width:0;
}
#rfq_users_table_wrapper {
width: 100%;
left:0;
top:0;
position: absolute;
margin: 0;
padding: 0;
}
#rfq_menu_bar {
margin: 0;
padding: 0;
height: 8%;
font-family: Sans-serif;
font-size: 20px;
left:0;
width:100%;
border-width:0;
}
#rfq_side_bar_collapsed {
margin: 0;
padding: 0;
float: left;
height:92%;
width:2%;
border-width:0;
}
#rfq_main_tabs {
height:100% !important;
padding: 0;
margin: 0;
border-width: 0;
}
.ui-button-text
{
font-size: 10px;
}
#rfq_tabs_parent {
position:absolute;
left:2%;
width:98%; !important;
height: 92% !important;
z-index: -2000;
margin: 0;
padding: 0;
border-width:0;
}
#rfq_items_panel {
padding: 0;
margin: 0;
border-width:0;
}
#rfq_reports_panel {
padding: 0;
margin: 0;
border-width: 0;
}
.rfq_tab_content {
height:100% !important;
width:100% !important;
padding: 0;
margin: 0;
}
.tabs-bottom {
position: relative;
padding: 0;
margin: 0;
}
.tabs-bottom .ui-tabs-panel {
height: 120px;
overflow: auto;
}
.tabs-bottom .ui-tabs-nav {
position: absolute !important;
left: 0;
bottom: 0;
right:0;
padding: 0 0.2em 0.2em 0;
}
.tabs-bottom .ui-tabs-nav li {
margin-top: -1px !important;
margin-bottom: 3px !important;
border-top: none;
border-bottom-width: 1px;
}
.ui-tabs-selected {
margin-top: -3px !important;
}
Mon Javascript:
// Positions des onglets en bas du contenu:
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
Pourriez-vous mettre cela sur jsfiddle.net afin que nous puissions « bricoler » avec elle? – pixelfreak
Avez-vous trouvé ce problème? J'ai aussi cette question – chrisjlee
Je l'ai jeté sur jsfiddle: http://jsfiddle.net/LhaHG/ –