Photoshop-Cafe.de :: Dein Photoshop-Forum - Web-Design Weblayout mit CSS

Hier mal noch ne Javascript DHTML Variante:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Unbenanntes Dokument</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">

body

{

font: arial, verdana, sans-serif;

text-align: center;

color: black;

background-color: CCCCFF;

}



#container

{

margin: 1em auto;

width: 800px;

height: 600px;

text-align: left;

background-color: red;

border: 1px solid black;

}



#header

{

margin: 0em auto;

width: 800px;

height: 100px;

text-align: left;

background-color: blue;

border: 1px solid black;

}



.content

{

margin-right: 20px;

margin-left: 20px;

margin: -25em auto;

float: right;

width: 530px;

height: 400px;

text-align: left;

background-color: yellow;

border: none;

visibility:visible;

}



#space

{

margin: -25em auto;

float: right;

width: 10px;

height: 400px;

background-color: red;

border: none;

}



#menu

{

margin-left: 10px;

width: 250px;

height: 400px;

text-align: left;

background-color: green;

border: none;

}



#footerspace

{

width: 798px;

height: 68px;

background-color: red;

}



#footer

{

clear: both;

width: 798px;

height: 30px;

background-color: pink;

}



</style>

<script type="text/javascript">

function HandleContentDiv(connum) {

        maxdiv = 5;

        for (i=0;i<=maxdiv;i++) {

                if (i==connum) {

                        document.getElementById('content'+i).style.visibility ="visible";

                } else         {

                        document.getElementById('content'+i).style.visibility ="hidden";

                        }

                }   

    }

</script>

</head>

<body>





<div id="container">

<div id="header"></div>

<div id="menu">

<br>

<a href="#" onClick="HandleContentDiv(0)">Home</a><br><br>

<a href="#" onClick="HandleContentDiv(1)">Seite 1</a><br><br>

<a href="#" onClick="HandleContentDiv(2)">Seite 2</a><br><br>

<a href="#" onClick="HandleContentDiv(3)">Seite 3</a><br><br>

<a href="#" onClick="HandleContentDiv(4)">Seite 4</a><br><br>

<a href="#" onClick="HandleContentDiv(5)">Seite 5</a><br><br>

</div>

<div class="content" id="content1"><p>Ich bin die <b>erste Seite</b></p></div>

<div class="content" id="content2"><p>Ich bin die <b>zweite Seite</b></p></div>

<div class="content" id="content3"><p>Ich bin die <b>dritte Seite</b></p></div>

<div class="content" id="content4"><p>Ich bin die <b>vierte Seite</b></p></div>

<div class="content" id="content5"><p>Ich bin die <b>fünfte Seite</b></p></div>

<div class="content" id="content0"><p>Ich bin die <b>Startseite</b></p></div>

<div id="space"></div>

<div id="footerspace"></div>

<div id="footer"></div>

</div> <!-- /container -->

</body>

</html>