Probleme mit CSS bei Scrollbar

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Probleme mit CSS bei Scrollbar

    Hallo zusammen,
    ich will ein Scrollbar (horizontal) Script in meine Seite einbauen. Dazu nutze ich die Vorlage von Mootools Scrollbar - BlueAlien Project

    Soweit klappt das auch - also ich kann die Bilder darstellen und der Slider läuft auch perfekt.

    Jetzt möchte ich aber auch unter dem Bild einen Zweizeiler mitschreiben (kommt aus der DB). Durch den <li> Tag funktioniert das aber irgendwie nicht. Idealerweise könnte ich eine Tabelle, wie unten beschrieben, mit in die Schleife nehmen.

    Was muss ich am CSS ändern, damit es klappt - habe schon etliches versucht. Leider zerschiesst mir dann immer der gesamte Slider.

    Hier mein Code:

    Code:
    #Im Head
    <script type="text/javascript" src="test2/mootools-1.2.2-core-yc.js"></script>
    <script type="text/javascript" src="test2/mootools-1.2.2.2-more-yc.js"></script>
    <script type="text/javascript" src="test2/ScrollBar.js"></script>
    <script type="text/javascript">
    	window.addEvent('domready', function() {
    	var myProducts = new ScrollBar($('products'), $('bar'), $('knob'), {
    		steps: 3400 - 782,
    		offset: -1
    	});
    	
    	// Product Cat Links - BlueAlien 070209
    	$('cat1').addEvent('click', function(){myProducts.set(0);});
    	$('cat2').addEvent('click', function(){myProducts.set(570);});
    	$('cat3').addEvent('click', function(){myProducts.set(1140);});
    	$('cat4').addEvent('click', function(){myProducts.set(1750);});
    	myProducts.set(0);
    	});
    </script>
    <style type="text/css">
    <!--
    /* -- BlueAlien CSS : 070209 -- */
    
    /* -- Page Layout 
    body {padding: 0; font: 1em verdana, arial, sans-serif; font-size: 100%; background-color: #212121; margin: 0;}
    h1 {margin-bottom: 2px; }--*/
    #content {color:#fff; font-size:12px; margin:10px; padding:10px; }
    #content a {color:#eee;}
    #container {background:url(media/bg_slider.gif) repeat-x; width: 920px; margin: 1px auto; padding: 0px;}
    #footer { margin: 0 auto; color:#999999; font-size:10px; width:920px; padding:100px; text-align:center;}
    #footer a {color:#999999; text-decoration:none;}
    /* -- Scrollbar --*/
    #productBg {background:url(media/bg_slider.gif) no-repeat; height:270px; width:920px;}
    
    #products {overflow: hidden; position: relative; padding: 10px; height: 270px; width: 900px;}
    #products ul {position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0; margin: 0;}
    #products ul li {display: inline;}
    
    #bar {top: -45px; left: 7px; width: 900px; height: 21px; position: relative; background-color: transparent;}
    #knob {top: 8px; width: 43px; height: 10px; background: url(media/bg_schieber.gif) no-repeat;}
    #bar span {color: #eee; font-size: 80%; cursor: pointer; position: absolute; z-index: 110; top: 3px;}
    #bar #cat1 {left: 40px;}
    #bar #cat2 {left: 267px;}
    #bar #cat3 {left: 456px;}
    #bar #cat4 {left: 1220px;}
    
    -->
    </style>
    
    
    # im body
    <div id="container">
    <!-- BlueAlien MAC layout : 070209 -->
    <div id="productBg">
    <!-- Products -->
    <div id="products">
    <ul>
    	
    <?php
    
    $sql1 = "SELEct from where"; 
    $result1 = mysql_query($sql1) OR die(mysql_error()); 
    while($row1 = mysql_fetch_assoc($result1))
    {
    $ProduktID=$row1['ProduktID'];
    $ProduktImageName=$row1['ProduktImageName'];
    $ProduktImageNameThumb=$row1['ProduktImageNameThumb'];
    						
    echo "<li><table border=0 width=150 background=media/bg_slider.gif cellspacing=0 cellpadding=0 height=245><tr><td align=left height=180 valign=bottom>";
    echo "<a href=produktdetail.php?ProduktID=$ProduktID>";
    echo "<img border=0 src=$ProduktImageName></a>";
    echo "</td></tr><tr><td valign=top class=carouseltextneu height=65><p align=left><br style=\"line-height:80%\"><b>$ProduktName</b></td></tr></table></div>";
    echo "</tr></table>";
    echo "</li>";
    }
    ?>
    </ul>
    </div>  
    <div id="bar">
     <div id="knob"></div>
    </div>
    </div>
    Habt Ihr eine Idee? Wie gesagt, <br> funktioniert hier nicht!

    Besten Dank!
Lädt...
X