den mest simple til små sites er som frames - bare uden.
Du kan køre denne kode som eksempel, og så bare fylde i siderne 1 til 8.
gem det mellem --- som fx demo.html
------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>faneblad8</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<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<9;i++)
collapse('indhold'+i)
}
function resetColors(){
for (i=1;i<9;i++){
setBgColor('indhold' + i,'#fff');
setBgColor('menupunkt' + i,'#ccc')
// 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: 0px;
background:#ffcc55;
font-family:arial, helvetica,sans-serif;
text-align:center;
line-height:115%;
font-size:14px;
}
#menuholder {
position: relative;
width: 800px;
padding: 0px;
margin: 0px auto;
z-index: 10;
}
#menuholder .menupunkt {
position: absolute;
padding-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
margin: 0px;
color: black;
text-decoration: none;
text-align: center;
font-size: 12px;
font-weight: bold;
}
#menupunkt1 {
left: -1px;
width: 100px;
border: 1px solid black;}
#menupunkt2 {
left: 99px;
width: 100px;
border: 1px solid black; }
#menupunkt3 {
left: 199px;
width: 100px;
border: 1px solid black; }
#menupunkt4 {
left: 299px;
width: 100px;
border: 1px solid black; }
#menupunkt5 {
left: 399px;
width: 100px;
border: 1px solid black; }
#menupunkt6 {
left: 499px;
width: 100px;
border: 1px solid black; }
#menupunkt7 {
left: 599px;
width: 100px;
border: 1px solid black; }
#menupunkt8 {
left: 699px;
width: 100px;
border: 1px solid black;}
.indhold {
position: relative;
z-index: 5;
top: 25px;
width: 800px;
height: 500px;
margin: 0px auto;
text-align: left;
display:none;
overflow:auto;
padding-bottom:10px;
cursor:default;
border: 1px solid black;
}
.tabel{
width: 800px;
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)">Fane 1</a>
<A class=menupunkt id=menupunkt2 onfocus=this.blur() href="java script:visIndhold(2)">Fane 2</a>
<A class=menupunkt id=menupunkt3 onfocus=this.blur() href="java script:visIndhold(3)">Fane 3</a>
<A class=menupunkt id=menupunkt4 onfocus=this.blur() href="java script:visIndhold(4)">Fane 4</a>
<A class=menupunkt id=menupunkt5 onfocus=this.blur() href="java script:visIndhold(5)">Fane 5</a>
<A class=menupunkt id=menupunkt6 onfocus=this.blur() href="java script:visIndhold(6)">Fane 6</a>
<A class=menupunkt id=menupunkt7 onfocus=this.blur() href="java script:visIndhold(7)">Fane 7</a>
<A class=menupunkt id=menupunkt8 onfocus=this.blur() href="java script:visIndhold(8)">Fane 8</a>
</div>
<!-- Indhold 1 -->
<div id="indhold1" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 1, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 2 -->
<div id="indhold2" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 2, sættes ind her!
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
fdsgsdfhsdfhdhghjjd
</TD></TR></TABLE>
</div>
<!-- Indhold 3 -->
<div id="indhold3" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 3, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 4 -->
<div id="indhold4" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 4, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 5 -->
<div id="indhold5" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 5, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 6 -->
<div id="indhold6" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 6, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 7 -->
<div id="indhold7" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 7, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 8 -->
<div id="indhold8" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 8, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Afslutning -->
</td></tr>
</table>
</body></html>
------------------
så er der ikke mere kode
Ny bruger
Nybegynder
Opret
Preview
