Before asking any questions,i would like to thank phpfreaks forum for answering my questions.. Really helpful, thanks again..
i have this tabbed menu.. it worked nicee.. but when i add input submit at last, it is not shown,pls help.. might be css issue, tried that some things, but didn't work, pls help...
css
<style> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; //overflow: hidden; clear: both; float: left; width: 100%; background: #fff; height:auto; } .tab_content { padding: 20px; font-size: 1.2em; color:#333; height:auto; } * { margin:0; // disable for button padding:0; // disable for button border:0; // disable for button } </style>
script for tab
<script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script>
<ul class="tabs">
<li><a href="#tab1">First tab</a></li>
<li><a href="#tab2">Second tab</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Content of the first tab
</div>
<div id="tab2" class="tab_content">
Content
</div>
when i used the content area to display my form, it was displayed.. but then when i included the submit button it is not seen.. but then when i use only submit button (no form content)it is displayed.
what am doin wrong..pls help..