Text neben Slideshow anzeigen lassen

  • Erstmal hallo an alle! Dies ist mein erster "Beitrag", ich bin auch ein totaler Neuling was Programmieren angeht; ich bin dran, ein Page für ein kleines Cafe zu machen und habs endlich geschafft, ne Slideshow hinzukriegen, allerdings noch folgende Probleme:


    -wie kann ich die Slideshow an eine bestimmte Position auf der Site positionieren? (im moment ist sie ja einfach oben links)


    -wie kann ich auf der Seite der Slideshow Fliesstext anzeigen lassen?


    ich hatte das Script der Slideshow in das der Page eingefügt, aber dann haben sich Script und Hintergrundbild einfach überlappt, das bringt mir leider auch nichts:-( im Notfall könnte ich das Hintergrundbild aber auch rausnehmen
    Vielen Dank schon im Voraus!
    Das Script der Page ist folgendes:
    -----------------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <HTML>
    <head>
    <title>Cafe Gruebi, Home</title>
    <meta charset="UTF-8">




    <link rel="stylesheet" type="text/css" href="../formate.css">


    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    }


    body {
    font-family:sans-serif;
    }


    #hintergrund {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    }


    #scrollbereich {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    z-index:2;
    }


    #inhalt {
    padding:20px 100px 30px 200px;
    z-index:2;
    }


    </style>



    </head>



    <body>


    <div>
    <img id="hintergrund" src="../img/backgroundpng.png" alt="" title=""
    style="filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;" />


    </div>


    <div id="scrollbereich">
    <div id="inhalt">



    <table>
    <tr>
    <th> <a href="../home/home.html">Home</a> </th>
    <th> <a href="../Speisekarte/Speisekarte.html">Speisekarte</a> </th>
    <th> <a href="../Lageplan/Lageplan.html">Lageplan</a> </th>
    <th> <a href="../Kontakt/Kontakt.html">Kontakt</a> </th>
    <th> <a href="../Links/Links.html">Links</a> </th>
    </tr>
    </table>



    <hr>







    <p> Wir sind ein junges Team, welches das Cafe Gruebi auf die Wintersaison 2012/2013 übernommen hat; wir führen das Cafe
    mit grossem Engagement und Freude und würden uns freuen, Sie bei uns begrüssen zu dürfen! Unsere Spezialitäten sind
    eine Fülle von hausgemachten Kuchen, dazu servieren wir Ihnen sehr gerne unseren feinen Kaffee oder selbstgemachten Glühwein.
    Unser Service-Team ist stets aufgeschlossen und geniesst den Kontakt mit den Gästen aus der ganzen Welt.
    Wir verwenden ausschliesslich frische Zutaten, welche wir sorgfältig und liebevoll zu leckeren Gerichten verarbeiten. Bitte überzeugen Sie sich
    selbst von unserer Qualität!
    </p>


    <br>
    <p>Wir haben wie folgt geöffnet:</p>


    <table>
    <tr>
    <th>
    Montag-Samstag</th>
    <th>Sonntag</th>
    </tr>
    <tr>
    <th>
    08.30 - 18.00</th>
    <th>
    12.00 - 18.00</th>
    </tr>
    </table>



    </div>
    </div>






    </body>
    </HTML>


    ---------------------------------------------------------


    Script der Slideshow:
    ---------------------------------------------------------
    <div class="clear"><style type="text/css">
    <!--


    .clear {clear:both;}


    #gallery {position:relative; height: 360px; }


    #gallery a {float:left; position:absolute; }


    #gallery a img {border:none;}


    #gallery a.show {z-index:500;}


    #gallery .caption {
    z-index: 600;
    background-color: #000;
    color: #fff;
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0; }


    #gallery .caption .content {margin:5px;}


    #gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
    --> </style><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script><script type="text/javascript">
    $(document).ready(function() {


    //Execute the slideShow
    slideShow();


    });


    function slideShow() {


    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});


    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});


    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});


    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});


    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);


    //Bilderwechsel Zeit 4000 = 4 sekunden
    setInterval('gallery()',4000);


    }


    function gallery() {


    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));


    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));


    //Get next image caption
    var caption = next.find('img').attr('rel');


    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);


    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');


    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });


    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );


    //Display the content
    $('#gallery .content').html(caption);


    }


    </script>
    <div id="gallery">


    <a class="show" >
    <img title="Gruebi im Sommer" alt="Content 1" width="580" height="360" rel="&lt;h3&gt;Cafe Gruebi im Sommer&lt;/h3&gt;Beschreibung" src="Slideshow/bild1.jpg" />
    </a>
    <a>
    <img title="" alt="Content 2" width="580" height="360" rel="&lt;h3&gt;Eingang Cafe Gruebi&lt;/h3&gt;Beschreibung" src="Slideshow/bild2.jpg" />
    </a>
    <a>
    <img title="" alt="Content 3" width="360" height="580" rel="&lt;h3&gt;Cafe Gruebi im Winter&lt;/h3&gt;Beschreibung" src="Slideshow/bild3.jpg" />
    </a>
    <a>
    <img title="" alt="Content 4" width="580" height="360" rel="&lt;h3&gt;Unsere Speisekarte&lt;/h3&gt;Beschreibung" src="Slideshow/bild4.jpg" />
    </a>
    <div class="caption">
    <div class="content">&nbsp;</div>
    </div>

  • kannst du das bitte mal als link verfügbar machen?
    nimm dir irgendeinen freespace und lads dort bitte hoch (bplaced, ohost, etc)


    grundlegend ist es so, dass du deinem container für die slideshow per css eine positionierung geben kannst.


    das geht dann "via code", weil du andere elemente ebenfalls positionierst oder auch mit absoluter positionierung (wovon ich abrate wenn du neuling bist)


    schau dir bei css4you.de mal das boxmodell an ;)
    dann musst du nur noch wissen, ob du block-elemente hast oder inline-elemente und danach kannst du deine container nach lust und laune positionieren :)

  • hmm, danke für deine antwort, ich konnte irgendwie aber nichts uploaden auf bplaced; ich werds bald direkt auf der website uploaden, die das Cafe reserviert hat, und dann post ichs hier nochmal
    css4you bin ich am anschauen, gute seite:-)