Hallo erstmal 
Mal wieder habe ich leider ein Problem was den Code einer Homepage betrifft. Ich wollte mal etwas Neues ausprobieren und im Head das Bild durch mehrere Bilder in einer Slideshow darstellen. Nun habe ich alles mögliche ausprobiert und es funktioniert einfach nicht. Ich würde mich freuen, wenn vielleicht jemand, der sich damit auskennt mal kurz über den Code schauen würde. Im Voraus schonmal vielen Dank dafür.
Im Grunde hat der Code von diesem Tutorial:
auch einwandfrei funktioniert, sofern ich ihn nicht mit CSS kombiniere.
Jetzt ist aber meine Homepage mit CSS aufgebaut und ich bekomme diese Slideshow einfach nicht in den Head. Habe versucht die Class mit der ID zu kombinieren und auch einen Teil des Codes direkt in den head Container reinzuschreiben aber nichts funktioniert. Zur Zeit sieht mein Code so aus:
Was mache ich denn falsch?
Mal wieder habe ich leider ein Problem was den Code einer Homepage betrifft. Ich wollte mal etwas Neues ausprobieren und im Head das Bild durch mehrere Bilder in einer Slideshow darstellen. Nun habe ich alles mögliche ausprobiert und es funktioniert einfach nicht. Ich würde mich freuen, wenn vielleicht jemand, der sich damit auskennt mal kurz über den Code schauen würde. Im Voraus schonmal vielen Dank dafür.
Im Grunde hat der Code von diesem Tutorial:
auch einwandfrei funktioniert, sofern ich ihn nicht mit CSS kombiniere.
Jetzt ist aber meine Homepage mit CSS aufgebaut und ich bekomme diese Slideshow einfach nicht in den Head. Habe versucht die Class mit der ID zu kombinieren und auch einen Teil des Codes direkt in den head Container reinzuschreiben aber nichts funktioniert. Zur Zeit sieht mein Code so aus:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Räumliches Inszenieren mit Medien // Dokumentation</title>
<style type="text/css">
.slideshow img { padding: 0px; border: 0px solid #000; background-color: #fff; } <!-- padding und border (Rahmen) eurer Bilder -->
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // Wählt hier einen Übergang, zB: fade, shuffle, zoom, turnDown, curtainX, etc.
});
});
</script>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #4b4b4d;
background-color: #4b4b4d;
background-image:url(images/background.jpg);
background-position: center top;
background-repeat:no-repeat;
font-family: Verdana, Helvetica, sans-serif;
color: white;
font-size: 12px;
line-height: 1.8;
}
#container
{
margin: 0em auto;
width: 800px;
text-align: left;
background-color: #363636;
background-image:url(images/back-big.jpg);
background-repeat:no-repeat;
}
#header
{
height: 312px;
background-color: #4b4b4d;
}
#mainnav
{
height: 35px;
background-color: #4b4b4d;
}
#contents
{
margin-right: 24px;
margin-left: 24px;
margin-top: 31px;
background-color: #363636;
background-image:url(images/back-content-mitte.jpg);
background-repeat:repeat-x;
}
#footer
{
clear: both;
height: 100px;
background-color: #363636;
}
a:link {
color: #FF99CC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #B32B69;
}
a:hover {
text-decoration: none;
color: #FFCCFF;
}
a:active {
text-decoration: none;
color: #FF99CC;
}
.Stil1 {color: #e35d92}
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="MM_preloadImages('images/projekte-h.gif','images/videos-h.gif','images/fotos-h.gif','images/impressum-h.gif')">
<div id="container">
<div id="header" class=".slideshow">
<img src="images/header1.jpg" width="800" height="312"/>
<img src="images/header2.jpg" width="800" height="312"/>
<img src="images/header3.jpg" width="800" height="312"/>
<img src="images/header4.jpg" width="800" height="312"/>
</div>
<div id="mainnav">
<a href="projekte.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Projekte','','images/projekte-h.gif',1)"><img src="images/projekte.gif" alt="projekte" name="Projekte" width="126" height="35" border="0"></a><a href="videos.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Videos','','images/videos-h.gif',1)"><img src="images/videos.gif" alt="videos" name="Videos" width="98" height="35" border="0"></a><a href="fotos.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Fotos','','images/fotos-h.gif',1)"><img src="images/fotos.gif" alt="fotos" name="Fotos" width="90" height="35" border="0"></a><a href="impressum.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Impressum','','images/impressum-h.gif',1)"><img src="images/impressum.gif" alt="impressum" name="Impressum" width="132" height="35" border="0"></a><img src="images/leiste.gif" height="35"></div>Was mache ich denn falsch?
