Lidt hjælp til en tabel eller hvad det er der driller
Er der en der gider kigge på denne code, jeg skulle lave den om fra 3 felter til 4, men har fået et lille problem, jeg tror at det er en tabel der driller mig. Den skulle gerne lave en menu hvor der er 4 at vælge mellem, den 4 er bare alt for lang.Håber i kan forstå hvad jeg mener.
<script type="text/javascript">
var ver3 = (navigator.appVersion.charAt(0) <= "3") ? true : false;
var dom = (document.getElementById) ? true : false;
var ie4 = (document.all && !document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var ie5 = (document.all && document.getElementById) ? true : false;
var n6 = (document.getElementById && !document.all) ? true : false;
function findObjekt(objekt) {
var blok;
if (dom) blok = document.getElementById(objekt).style;
else if (ie4) blok = document.all[objekt].style;
else if (ns4) blok = document.layers[objekt];
return blok;
}
function setBgColor(objekt, color) {
var blok = findObjekt(objekt);
blok.backgroundColor = color;
}
function setFgColor(objekt,color) {
var blok = findObjekt(objekt);
blok.color = color;
}
function visObjekt(objekt){
var blok = findObjekt(objekt);
blok.visibility = "visible";
}
function skjulObjekt(objekt){
var blok = findObjekt(objekt);
blok.visibility = "hidden";
}
function expand(objekt){
var blok = findObjekt(objekt);
blok.display="block"
}
function collapse(objekt){
var blok = findObjekt(objekt);
blok.display="none"
}
function setBorderBottomColor(objekt,color){
var blok = findObjekt(objekt);
blok.borderBottomColor = color;
}
function setBorderBottomWidth(objekt,width){
var blok = findObjekt(objekt);
blok.borderBottomWidth = width;
}
function skjulAlle(){
for (i=1;i<5;i++)
collapse('indhold'+i)
}
function resetColors(){
for (i=1;i<5;i++){
setBgColor('indhold' + i,'#fff');
setBgColor('menupunkt' + i,'#75A7FF')
setBorderBottomColor('menupunkt'+i,'black');
}
}
function visIndhold(nr) {
skjulAlle();
resetColors();
expand('indhold'+nr);
setBgColor('menupunkt' + nr,'#eee');
setBgColor('indhold' + nr,'#eee');
setBorderBottomColor('menupunkt'+nr,'#eee');
}
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background:#75A7FF;
font-family:arial, helvetica,sans-serif;
text-align:center;
line-height:115%;
font-size:14px;
}
#menuholder {
position: relative;
width: 750px;
padding: 0px;
margin: 0px auto;
border-left: 1px solid black;
z-index: 10;
}
#menuholder .menupunkt {
position: absolute;
padding-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: black;
text-decoration: none;
text-align: center;
font-size: 12px;
font-weight: bold;
}
#menupunkt1 {
left: 0px;
width: 187px;
border: 1px solid black;
border-left: 0px
}
#menupunkt2 {
left: 188px;
width: 375px;
border: 1px solid black;
border-left: 0px
}
#menupunkt3 {
left: 376px;
width: 562px;
border: 1px solid black;
}
#menupunkt4 {
left: 563px;
width: 750px;
border: 1px solid black;
border-right: 0px
}
.indhold {
position: relative;
z-index: 5;
top: 0px;
width: 750px;
height: 600px;
margin: 0px auto;
text-align: left;
display:none;
overflow:auto;
padding-bottom:10px;
cursor:default;
border: 1px solid black;
}
.tabel{
width: 760px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
-->
</style>
</head>
<body onload="visIndhold(1)">
<TABLE CLASS="tabel" summary="">
<tr><td>
<!-- Fanebladshoved -->
<div id="menuholder">
<a class="menupunkt" id="menupunkt1" onfocus="this.blur()" href="java script:visIndhold(1)">Menu 1</a>
<a class="menupunkt" id="menupunkt2" onfocus="this.blur()" href="java script:visIndhold(2)">Menu 2</a>
<a class="menupunkt" id="menupunkt3" onfocus="this.blur()" href="java script:visIndhold(3)">Menu 3</a>
<a class="menupunkt" id="menupunkt4" onfocus="this.blur()" href="java script:visIndhold(4)">Menu 4</a>
</div>
<!-- Fane 1 -->
<div id="indhold1" class="indhold">
<br /><br />
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
<center>
Menu 1
</center>
</TD></TR></TABLE>
</div>
<!-- Fane 2 -->
<div id="indhold2" class="indhold">
<br /><br />
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
<center>
Menu 2
</center>
</TD></TR></TABLE>
</div>
<!-- Fane 3 -->
<div id="indhold3" class="indhold">
<br /><br />
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
<center>
Menu 3
</center>
</TD></TR></TABLE>
</div>
<!-- Fane 4 -->
<div id="indhold4" class="indhold">
<br /><br />
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
<center>
Menu 4
</center>
</TD></TR></TABLE>
</div>
<!-- Afslutning -->
</td></tr>
</table>
</B>
</body>
</html>
