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

Darkwing-dave · #21 25.10.06, 21:20

werd's mal versuchen!! Danke schön!

**phoenix** · #22 26.10.06, 14:27

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>

vektorpixel · #23 26.10.06, 16:48

bye bye übersichtlicher Quellcode!

**phoenix** · #24 26.10.06, 17:03

HTML war noch nie sonderlich übersichtlich, da eine Formatierungs- und keine Programmiersprache

Darkwing-dave · #25 26.10.06, 18:03

und der ganze css teil wird ja am schluss extern sein...

**phoenix** · #26 26.10.06, 18:25

Ja CSS kannst du komplett auslagern.
Falls du damit rumspielen willst, musst du darauf achten das aus #content nun .content geworden ist, damit es als Klasse fungieren kann

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Photshop Weblayout	skyflyer	Hilfestellung, Tipps und Tricks	5	31.01.11 20:47

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)