PHP_CHILD Posted April 2, 2013 Share Posted April 2, 2013 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.. Quote Link to comment https://forums.phpfreaks.com/topic/276415-simple-css-tabbeb-menus-last-submit-input-button-not-showing/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.