Jump to content

simple css tabbeb menus-last submit input button not showing


PHP_CHILD

Recommended Posts

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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.