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.. 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
Archived
This topic is now archived and is closed to further replies.