Guten Morgen an das Baukasten-Team und an die Community,
ich bedanke mich schon mal im Voraus für Eure Antworten, Ideen, Ratschläge und Lösungen.
Und zwar habe ich auf meiner Homepage (www.dancemastersberlin.de) eine SlideShow auf der Startseite ganz oben und in dieser Slideshow wechseln sich Bilder immer ab.
Leider kann man diese aber nicht anklicken und es wird auch kein textfeld unten links angezeigt und das würde ich gerne ändern wollen und hoffe, da kann mir Jemand von Euch helfen.
Würde gerne einen Text unten links eingebaut haben wollen sowie eine eventuelle andere Slideshow mit verschiedenen Übergängen, die Übergänge sollen variabel sein.
Ich sende mal mit meiner Frage den CSS-Code im Feld "Text über dem Design:
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5CKZLN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5CKZLN');</script>
<!-- End Google Tag Manager -->
<div id="Schwubbel">
<div id="UeberInhalt">
</div>
<div id="Contenttop"></div>
<div id="Oberzeilen">
<div id="Slideshow">
<div id="coin-slider">
<!-- Hier die Adresse des ersten Bildes; sonst nichts verändern !!!!!!!!!! -->
<img src="https://img.webme.com/pic/d/dancemasters/Unbenannt1111111111111111111111111.png" width="0" onLoad="runSlideShow()">
<!-- Hier nochmal die Adresse des ersten Bildes; evtl. die Tabelle formatieren ! -->
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="" name="SlideShow" width="640" height="300" border="0">
</td>
</tr>
</table>
<script>
var slideShowSpeed = 4000 // Dauer des Bildwechsels in Millisekunden (hier 100 Sekunden)
var crossFadeDuration = 4000 // Dauer des Bildübergangs
var Pic = new Array()
// Hier die Bildadressen rein, erweiterbar !
Pic[0] = 'https://img.webme.com/pic/d/dancemasters/Mittelstra%C3%9Fen-Fest2018Header.jpg'
Pic[1] = 'https://img.webme.com/pic/d/dancemasters/Headerf%C3%BCrdasEinschulungsfestimBoulevard2018.jpg'
Pic[2] = 'http://img.webme.com/pic/d/dancemasters/FaceBookDanceMastersHeader.jpg'
Pic[3] = 'http://img.webme.com/pic/d/dancemasters/Header63SteglitzerFestwoche2015.jpg'
Pic[4] = 'http://img.webme.com/pic/d/dancemasters/dsdsenricoheader.jpg'
Pic[5] = 'http://img.webme.com/pic/d/dancemasters/headerbeifacebook.jpg'
Pic[6] = 'http://img.webme.com/pic/d/dancemasters/10368185_683498825032364.jpg'
// ab hier nichts mehr verändern !!
var jj = 0
var p = Pic.length
var preLoad = new Array()
for (ii = 0; ii < p; ii++){
preLoad[ii] = new Image()
preLoad[ii].src = Pic[ii]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[jj].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
jj = jj + 1
if (jj > (p-1)) jj=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</div>
</div><div id="Oberbox"><p align="center"><a href="https://www.dancemastersberlin.de/Probestunde.htm" target=""><font color=red><font size="5">Kostenlose Probestunde anmelden</font></font></a><br />
<hr/>
<a href="https://www.dancemastersberlin.de/Follow-Us.htm" target=""><img alt="" style="width: 160px; height: 150px" src="https://img.webme.com/pic/d/dancemasters/Follow%20Us%20-%20Folge%20Uns.jpg" /></a></p>
</div>
</div>
<div id="OberLeiste">
<div id="Inhaltoben">
<div id="quotation" style="text-align:center;"><SCRIPT type="text/javascript">
var quotations = new Array()
quotations[0]= "Willkommen bei der DanceMasters DanceSchool in Berlin-Lichterfelde Süd.<br/>"
quotations[1]= "Die neusten Choreos ab 20 € im Monat lernen.<br/>"
quotations[2]= "Tanzen wie die Stars. Die Tanzschule für Klein und Groß. Dann bist Du bei uns genau richtig.<br/>"
quotations[3]= "Komm uns besuchen und probiere die kostenlose Probestunde nach Absprache.<br/>"
quotations[4]= "Kurse in HipHop, Streetdance, ZumbaHipHop, Harddance, Shuffle, Jumpstyle, Kindertanz, Kanga & kreativer Kindertanz mit Ballett<br/>"
quotations[5]= "Kurse mit dem Tänzer und Choreographen DancerDenny<br/>"
quotations[6]= "Parkmöglichkeiten direkt vor dem Haus & in der Umgebung<br/>"
quotations[7]= "Öffentliche Verkehrsmittel: S25 direkt S Osdorfer Straße / 186er direkt Woltmannweg / 284er direkt Saaleckplatz<br/>"
quotations[8]= "Die Tanzschule für die ganze Familie<br/>"
quotations[9]= "Kurse jeden Montag, Dienstag, Donnerstag & Freitag<br/>"
quotations[10]= "Komm uns besuchen: DanceMasters DanceSchool in der Koloniestraße 9 in 12209 Berlin<br/>"
function display()
{a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",7000)}
</SCRIPT>
<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div></div></div>
Und den CSS-Code im Feld "Text unter dem Design":
<div id="UnterLeiste">
<div id="Inhaltunten">
Content © <a href="#">DanceMasters</a> |
Copyright © <a href="#">DanceMasters</a> |
Design © <a href="http://homepageberatung.de.tl/">Homepageberatung</a> |
</div>
</div>
<div id="Footer"><br/>
<div id="Footer_links">
<div id="Box1_links">
<h1>Impressum</h1>
Folgende Angaben erfolgen gemäß § 5 TMG.<br/>
DanceMasters DanceSchool<br/>
Holzkirche e. V.<br/>
Koloniestraße 9<br/>
12209 Berlin-Lichterfelde Süd<br/>
Telefon (030) 20 95 32 70<br/>
Mobil (0176) 684 33 666<br/>
<a href="http://www.dancemastersberlin.de/KONTAKT.htm">Hier mehr...</a>
</div>
</div>
</div>
<div id="UnterInhalt"></div>
Und den CSS-Code im Feld "CSS-Code ohne Style Tags":
#header_container{display:none;}
h2#title{display:none;}
#counter{display:none;}
/*WERBUNG MITTIG*/
table[height="102"] {
margin:auto;
}
/*HINTERGRUND*/
body{
background-image: url(https://img.webme.com/pic/d/dancemasters/Hintergrundsternenhimmeltest4.jpg);
background-color: #F7F7F7;
background-position: top center;
background-size: 1000px 1500px;
font-family: arial, sans-serif;
font-size: 12px;
}
/*ÜBERSCHRIFTEN FORMATIEREN*/
h1{
color:#CFCFCF;
font-size: 16px;
}
h2{
color: #EEEEEE;
font-size: 12px;
}
/*ÜBERSCHRIFTEN IM HEADER*/
h2[id="Titel"]{
margin-top: 98px;
margin-left: 300px;
float: left;
}
h2[id="Untertitel"]{
margin-top: 150px;
margin-left: -420px;
float: left;
}
/*LINKFORMATIERUNGEN*/
a{
color: #9DADBB;
text-decoration: none;
}
a:hover{
color: #CFE5F7;
}
/*GRUNDGERÜST*/
#Schwubbel{
width: 1000px;
margin: 0px auto;
}
#container{
width: 1000px;
float: left;
background: url(http://img.webme.com/pic/s/sp-testseite22/container2.png);
background-repeat: repeat-y;
}
/*HEADER*/
#UeberInhalt{
width: 1000px;
height: 300px;
float: none;
background: url(https://img.webme.com/pic/d/dancemasters/Unbenannt1111111111111111111111111.png);
background-size: 1010px 310px;
margin-top: -10px;
margin-bottom: 00px;
color: #fff;
}
/*NAVIGATION*/
#nav_container{
margin-left: 50px;
width: 200px;
float: left;
}
#nav_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 30px;
}
a.menu{
display:block;
border-bottom: 1px solid #73808A;
border-top: 1px solid #73808A;
width: 185px;
height: 26px;
color: #73808A;
text-decoration: none;
margin-bottom: -1px;
padding-left: 10px;
padding-top: 4px;
font-size: 13px;
font-weight: bold;
}
ul#nav{
margin-top: 70px;
margin-left: -40px;
}
li.nav_element{
list-style-type: none;
}
li.nav_element a:hover{
list-style-type: none;
background:
url(http://img.webme.com/pic/s/sp-testseite12/menu-hover.png);
color: #fff;
}
li.subpage a{
margin-left: 10px;
width: 175px;
font-style: italic;
}
li.subpage a:before{
content: "> ";
}
li.checked_menu a{
color: #000;
font-weight: bold;
}
/*SIDEBAR*/
#sidebar_container{
margin-left: 50px;
width: 200px;
margin-bottom: 30px;
margin-top: 30px;
float: left;
clear:left;
}
#sidebar_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 15px;
}
#sidebar_content{
color: #73808A;
text-align: justify;
margin-top: 60px;
}
#sidebar_content h2{
color: #fff;
}
#sidebar_content a:hover{
color: #a01213;
text-decoration: underline;
}
/*INHALT*/
#Contenttop{
background: url(http://img.webme.com/pic/s/sp-testseite22/top2.png);
width: 1000px;
height: 19px;
margin: 0px auto;
float: left;
}
#Oberzeilen{
width: 1000px;
float:right;
background: url(http://img.webme.com/pic/s/sp-testseite22/container2.png);
padding-top: 50px;
}
#Slideshow{
width: 640px;
height: 300px;
border: 2px solid #9E9E9E;
float: left;
margin-left: 50px;
background: #ececec;
}
#Oberbox{
width: 160px;
height: 260px;
float: right;
background: url(http://img.webme.com/pic/s/sp-testseite22/box-oben.png);
margin-right: 50px;
text-align: justify;
padding: 20px 20px 20px 20px;
}
#OberLeiste{
background: url(http://img.webme.com/pic/s/sp-testseite22/container2.png);
width: 1000px;
height: 30px;
padding-top: 50px;
float: right;
}
#Inhaltoben{
width: 870px;
height: 25px;
background: #F6F6F6;
float: left;
color: #000;
font-size: 15px;
margin-left: 50px;
padding-top: 5px;
padding-left: 20px;
}
#content{
width: 630px;
margin-right: 50px;
margin-top: 50px;
margin-bottom: 50px;
float: right;
color: #000;
}
#UnterInhalt{
width: 1000px;
height: 20px;
float: left;
background-image: url(http://img.webme.com/pic/s/sp-testseite22/bottom2.png);
margin-bottom: 50px;
}
#UnterLeiste{
background: url(http://img.webme.com/pic/s/sp-testseite22/container2.png);
width: 1000px;
height: 30px;
margin: 0px auto;
margin-top: 0px;
float: right;
}
#Inhaltunten{
width: 870px;
height: 25px;
background: #F6F6F6;
float: left;
color: #000;
font-size: 15px;
margin-left: 50px;
padding-top: 5px;
padding-left: 20px;
}
#Menüpunkte_F{
width: 830px;
height: 35px;
float: left;
margin-left: 50px;
}
#Menüpunkte_F a:link,
#Menüpunkte_F a:visited,
#Menüpunkte_F a:hover{
display: block;
float: left;
height: 20px;
margin-left: 30px;
color: #73808A;
font-size: 14px;
padding-top: 15px;
}
#Menüpunkte_F a:hover{
color: #fff;
}
#Footer{
width: 1000px;
height: 200px;
float: right;
background: url(http://img.webme.com/pic/s/sp-testseite22/container2.png);
text-align: justify;
color: #73808A;
padding-top: -30px;
}
#Footer_links{
width: 280px;
height: 160px;
float: left;
margin-left: 50px;
}
#Box1_links a:link,
#Box1_links a:hover,
#Box1_links a:visited{
display: block;
width: 200px;
height: 18px;
padding-top: 4px;
padding-left: 10px;
margin-top: -1px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#Footer_rechts{
width: 600px;
height: 160px;
float: right;
margin-right: 50px;
}
#Footer_rechts1{
width: 280px;
height: 160px;
float: left;
margin-left: 15px;
}
#Footer_rechts2{
width: 280px;
height: 160px;
float: right;
}
/* Position */
#nach_oben {
position: fixed;
bottom: 30px;
margin-left: -150px; }
/* Aussehen des Buttons */
#nach_oben a {
width: auto;
padding: 7px 12px 7px 17px;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #000000;
font-size: 11px;
font-family: arial;
background-color: #FFFFFF;
/* abgerundete Ecken */
border: 1px solid #c9c9c9;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s; }
/* Hover bei Mauskontakt */
#nach_oben a:hover {
color: #000;
background-color: grau;}
Hoffe Jemand kann mir schnell dabei helfen und freue mich auf jede Antwort.
Mit freundlichen Grüßen
DancerDenny
