0

タブを作成するための次の HTML コードがあります。

<div id="content">
    <div id="tabset">
        <ul>
            <li><a href="#panel1">Tab One</a></li>
            <li><a href="#panel2">Tab Two</a></li>
        </ul>
        <div id="panel1">123</div>
        <div id="panel2">456</div>
    </div>
</div>

そして単純な JS コード:

$('#tabset').tabs();

それは動作します、すべてが良いです。ただし、問題は次のとおりです。「コンテンツ」IDのdivには「最小高さ」のcss値が600pxあり、タブのタイトル領域がすべての「コンテンツ」divを埋めます。どうすれば修正できますか?

結果

すべての CSS:

body {
    font: 10pt Arial, Helvetica, sans-serif;
    background: #dcdcdc;
}

#container {
    width: 800px; 
    margin: 0 auto; 
}

#body {
    min-height: 600px;
}

#header {
    margin-top: 25px;
    padding: 10px;
    background: #ffffff;
}

#content {
    margin-top: 25px;
    padding: 10px;
    background: #ffffff;
    min-height: 600px;
    position: relative;
}

#footer {
    margin-top: 25px;
    background: #ffffff;
    padding: 10px;
}

.left-part {
    float: left;
    width: 50%;
}

.right-part {
    height: 100%;
    text-align: right;
    vertical-align: middle;
}

table.align  {
    width:  100%;
    border-spacing: 0;
}

table.align td {
    width: 50%;
    vertical-align: middle;
}

table.align td.right {
    text-align: right; 
    vertical-align: middle;
   }

table.bottom_table {
    color: #000000; 
    font-weight: bold;      
    width:  100%;
    border-spacing: 0;
}

table.bottom_table td {
    vertical-align: top;
}

table.bottom_table a {
    text-decoration:none;
    color: #000000;
}

#copyright {
    color: #8B8B83; 
    font-style: italic;
    font-weight: bold;
}

#title {
    font-size: 2.0em;
    font-weight: bold;
}

#login {
    font-weight: bold;
}

#about_project {
    width: 25%;
}

#faq {
    width: 25%;
}

#social {
    width: 50%;
}
#sidebar {
    background: #ffffff;
    margin-top: 25px; 
    width: 220px;
    min-height: 600px;
    padding: 10px;
    float: left;
}

#content {
    margin-left: 260px;
}

table.align td.checkbox_cell {
    width: 10%;
}

table.align td.department_cell {
    width: 25%;
}

.sidebar-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.list-departments {
    margin
}

p.vacancy-date {
    margin: 0px;
    padding: 0px;
}

p.vacancy-status {
    margin: 0px;
    padding: 0px;
}

#dialogg {
    display: none;
}

/* New vacancy styles */

.vacancy-field {
    width: 100%;
}

textarea.vacancy-textarea {
    height: 200px;
}
4

0 に答える 0