Name: Anonymous 2013-06-30 18:57
ther is some thing wrong with my code it dosent show all the way down when i open it is a browser. can any one help me? :D
<!DOCTYPE>
<html>
<title >help</title>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#tabs ul li a:hover {
text-decoration: underline;
}
#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
</style>
<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<h1>this is a heading 1<h1>
<p>this is a paragraph 1<p>
<h3>this is a heading 2<h3>
<p>this is a paragraph 2<p>
<h5>this is a heading 3<h5>
<p>this is a paragraph<p>
</div>
<div id="tab2" style="display: none;">
<h1>this is a heading 4<h1>
<p>this is a paragraph 4<p>
<h3>this is a heading 5<h3>
<p>this is a paragraph 5<p>
<h5>this is a heading 6<h5>
<p>this is a paragraph 6<p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE>
<html>
<title >help</title>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#tabs ul li a:hover {
text-decoration: underline;
}
#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
</style>
<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<h1>this is a heading 1<h1>
<p>this is a paragraph 1<p>
<h3>this is a heading 2<h3>
<p>this is a paragraph 2<p>
<h5>this is a heading 3<h5>
<p>this is a paragraph<p>
</div>
<div id="tab2" style="display: none;">
<h1>this is a heading 4<h1>
<p>this is a paragraph 4<p>
<h3>this is a heading 5<h3>
<p>this is a paragraph 5<p>
<h5>this is a heading 6<h5>
<p>this is a paragraph 6<p>
</div>
</div>
</div>
</body>
</html>