Hi, 
ich habe mich dazu entschlossen, meine Webseite dynamisch zu gestalten. Und jetzt wollte ich einfach mal fragen, wie ich das so am Besten anstelle. Ich habe mehrere Unterseiten, und möchte nun, dass sich - wenn man auf den jeweiligen Button drückt - der div-Container [COLOR=„Red“]#main2 dynamisch verändert (da steht der Inhalt drinnen). Im Endeffekt möchte ich eben alle Inhalte auf EINER Seite haben, und natürlich dynamisch aufrufbar. Würde mich riesig freuen, wenn mir jemand ein bisschen auf die Sprünge helfen könnte (hab schon in SelfHTML nachgelesen).
HTML:
[CODE]
www.pspmedia.de.nr | Home<div id="header">
<div id="header2">
<p id="navigationtop">
<a class="white" href="home.html">Home</a> | <a class="white" href="impressum.html">Impressum</a><br>
</p>
<p id="pspmedia">
<br>
<a class="none" href="home.html"><img id="logo" src="logo.png" alt="Softmedia" title="Zurück zur Startseite"></a>
<br>
Das große Downloadportal für deine PSP 1000 und 2000.
</p>
</div>
</div>
<div id="navigation">
<div id="categories">
<a id="demo" href="demo.html"></a>
<a id="program" href="program.html"></a>
<a id="theme" href="theme.html"></a>
<a id="wallpaper" href="wallpaper.html"></a>
<a id="flash" href="flash.html"></a>
<br class="clear">
<div class="names">Demos</div>
<div class="names2">Programme</div>
<div class="names2">Themes</div>
<div class="names2">Wallpaper</div>
<div class="names2">Flash</div>
<br class="clear">
</div>
</div>
<div id="main">
[B][COLOR="Red"]<div id="main2">[/B]
<h1>Willkommen!</h1>
<p>
auf pspmedia.de.nr, dem großen Downloadportal für Deine PSP. Wir bieten Dir Downloads aller Art an, die Du Dir natürlich völlig kostenlos- und damit meinen wir auch <strong>kostenlos</strong> - herunterladen kannst. Wir wünschen Dir noch viel Spaß beim Surfen auf unserer Seite, und hoffen, dass Du bald wieder kommst. ;-)<br><br>
- pspmedia
</p>
<h1>Hinweis</h1>
<p>
Diese Seite befindet sich momentan noch im Aufbau. Wir entschuldigen uns für eventuell auftretende Fehler.
</p>
[B][COLOR="Red"]</div>[/B]
</div>
<div id="footer"><br><br>
Copyright © Softmedia 2008 |
Version 0.01 |
optimiert für <a class="white" href="http://www.mozilla-europe.org/de/products/firefox/">Firefox</a> & <a class="white" href="http://www.apple.com/de/safari/">Safari</a> |
by Jens Assmann |
<a class="white" href="impressum.html">Impressum</a>
</div>
U:[/U]
[CODE]body {
background-image:url(hintergrund.png);
background-repeat:repeat;
background-attachment:fixed;
margin-top:0px;
margin-bottom:0px;
font-family:Arial;
font-size:12px;
text-align:center;
}
a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }
a:focus { color:#FF8C00; text-decoration:underline; }
.none:link { color:#000000; text-decoration:none; }
.none:visited { color:#000000; text-decoration:none; }
.none:hover { color:#FF8C00; text-decoration:none; }
.none:active { color:#FF8C00; text-decoration:none; }
.none:focus { color:#FF8C00;text-decoration:none; }
.white:link { color:#000000; text-decoration:underline; }
.white:visited { color:#000000; text-decoration:underline; }
.white:hover { color:#FFFFFF; text-decoration:underline; }
.white:active { color:#FFFFFF; text-decoration:underline; }
.white:focus { color:#FFFFFF; text-decoration:underline; }
h1 {
font-size:12px;
font-weight:bold;
color:#FF8C00;
}
#all {
background-color:#FFFFFF;
width:80%;
margin:auto;
text-align:left;
}
#header {
background-color:#FF8C00;
}
#header2 {
margin-left:20px;
margin-right:20px;
}
#main {
background-color:#FFFFFF;
}
#main2 {
margin:20px;
}
#footer {
background-image:url(farbverlauf2.png);
background-repeat:repeat-x;
height:50px;
clear:both;
margin:0px;
font-size:10px;
text-align:center;
}
#navigationtop {
margin:0px;
padding-top:5px;
font-size:10px;
text-align:right;
}
#navigation {
background-image:url(farbverlauf.png);
background-repeat:repeat-x;
padding-top:38px;
padding-bottom:38px;
text-align:center;
}
#pspmedia {
margin:0px;
font-size:11px;
text-align:center;
}
#logo {
border-width:0px;
}
#categories {
width:400px;
margin:auto;
}
#demo {
background:url(„kategorien/demo.png“) 0 0 no-repeat;
width:64px;
height:64px;
display:block;
float:left;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}
#demo:hover {
background-position:-64px 0;
}
#program {
background:url(„kategorien/program.png“) 0 0 no-repeat;
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}
#program:hover {
background-position:-64px 0;
}
#theme {
background:url(„kategorien/theme.png“) 0 0 no-repeat;
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}
#theme:hover {
background-position:-64px 0;
}
#wallpaper {
background:url(„kategorien/wallpaper.png“) 0 0 no-repeat;
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}
#wallpaper:hover {
background-position:-64px 0;
}
#flash {
background:url(„kategorien/flash.png“) 0 0 no-repeat;
width:64px;
height:64px;
display:block;
float:left;
margin-left:20px;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}
#flash:hover {
background-position:-64px 0;
}
.names {
width:64px;
float:left;
padding:0px;
font-size:10px;
text-align:center;
}
.names2 {
width:64px;
float:left;
margin-left:20px;
padding:0px;
font-size:10px;
text-align:center;
}
.clear {
clear:both;
}[/CODE]
