Problem with Tab Menu
Why does tab menu not display across even though "display:inline" is called at: ul#tabs li { ?
<style type="text/css">
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#657077;
margin:40px;
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
position: relative;
top: 10px;
left: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color: #FF99FF; /* border color on tabbed box */
float: left; /* use this or it goes across entire page */
padding:8px;
}
ul#tabs {
margin:0px; padding:0px;
}
ul#tabs li {
display:inline;
}
ul#tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul#tabs li a:hover {
background-color:red;
border-color:#2f343a;
}
ul#tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
/* for 2nd tab */
ul#tabs li a.second {
background-color:#ffffff;
color:#FF99FF;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }
ul#tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none; /* remove the bullet points */
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child { /* removes the last thin border line from the end of the list...but not on IE 6 */
border-bottom:none;
}
/* ---- some gradients -----*/
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottombottom;
}
ul.tabs li a.active {
background-image:url(images/tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-image:url(images/content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottombottom;
}
/*-------- display frame code ------*/
div.iframe-link {
position: relative;
float: left;
width: 475px;
height: 305px;
border: 3px solid blue;
}
div.swedish {
}
div.medical {
}
</style>
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="" id="tab_1" class="active">Patient</a></li>
<li><a href="" id="tab_2">Referrals</a></li>
<开发者_如何学Pythonli><a href="" id="tab_3">History</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a class="swedish" id="swed" title="Click to see Swedish description on right" href="javascript: void(0);">Swedish Massage</a></li>
<li><a class="medical" id="med" title="Click to see Medical description on right" href="javascript: void(0);">Medical Massage</a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008</a></li>
<li><a href="">November 2008</a></li>
<li><a href="">October 2008</a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</div> <!-- end tabbed_area -->
</div> <!-- end tabbed_box_1 -->
<div class="iframe-link">
</div>
In your style sheet, take out the ul before ul#tabs. It should just read something like this:
#tabs {style stuff}
加载中,请稍侯......
精彩评论