关于页面图片滚动效果，用CSS+JS写的

代码如下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+js控制图片展示</title>
<style>
body{
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  margin: 0px;
  font: 70% verdana, geneva, arial, helvetica, sans-serif;
  color: #000;
  padding-top: 0px;
  text-align: center
  }
#outer{
  padding-right: 0px;
  padding-left: 0px;
  background: url(/images/bg-outer.gif) repeat-y center top;
  padding-bottom: 0px;
  margin: 0px auto;
  width: 780px;
  padding-top: 0px;
  text-align: left
  }
#wrapper{
  background: #fff;
  margin: 0px 4px
  }
#content{
  padding-right: 0px;
  padding-left: 0px;
  min-height: 400px;
  padding-bottom: 20px;
  margin: 20px 30px;
  padding-top: 0px;
  position: relative
  }
#focus{
  border-right: #ccc 2px solid;
  padding-right: 0px;
  border-top: #ccc 2px solid;
  padding-left: 0px;
  min-height: 188px;
  background: url(/images/tile.gif) #eee repeat-y left top;
  padding-bottom: 10px;
  margin: 25px 0px 30px;
  border-left: #ccc 2px solid;
  width: 100%;
  padding-top: 15px;
  border-bottom: #ccc 2px solid;
  position: relative;
  height: 188px
  }
#beni{
  padding-right: 0px;
  padding-left: 0px;
  left: 0px;
  padding-bottom: 0px;
  margin: 0px;
  width: 250px;
  padding-top: 0px;
  list-style-type: none;
  position: absolute;
  top: 15px
  }
#beni li{
  border-top: #fff 1px solid;
  font-size: 12px;
  float: left;
  width: 250px;
  text-indent: 24px;
  line-height: 26px
  }
#beni li.first{
  border-top: 0px
  }
#beni li a{
  border-right: 0px;
  padding-right: 0px;
  border-top: 0px;
  display: block;
  padding-left: 0px;
  font-weight: bold;
  background: #eee;
  padding-bottom: 0px;
  margin: 0px;
  border-left: 0px;
  padding-top: 0px;
  border-bottom: 0px;
  text-decoration: none
  }
#beni li a:hover{
  background: #f9f9f9
  }
#description{
  width:420px;
  height:188px;
  overflow:hidden;
  float:right;
  margin-right:15px;
  }
</STYLE>
<script>
    window.onload = function() {
        var ele = document.getElementById("description");
        var w = ele.clientWidth;
        var n = 20, t = 20;
        var timers = new Array(n);
        var c = document.getElementById("beni").getElementsByTagName("li");
        for (var i = 0; i < c.length; i++) {
            c[i].index = i;
            c[i].onmouseover = doSlide;
        }
        c = null;
        function doSlide() {
            var x = ele.scrollLeft;
            var d = this.index * w - x;
            if (!d) return;
            for (var i = 0; i < n; i++) (function() {
                if (timers[i])
                    clearTimeout(timers[i]);
                var j = i;
                timers[i] = setTimeout(function() {
                    ele.scrollLeft = x + Math.round(d * Math.sin(Math.PI * (j + 1) / (2 * n)));
                }, (i + 1) * t);
            })();
        }
    }
</script>
</head>
<body id=home>
<div id=outer>
  <div id=wrapper>
    <div id=content>
      <div id=focus>
        <ul id=beni>
          <li class=first><a href="#">opere e oggetti d'arte</a></li>
          <li><a href="#">architettzure</a></li>
          <li><a href="#">reperti archeologici</a></li>
          <li><a href="#">stampe e matrici di incisione</a></li>
          <li><a href="#">fotografie</a></li>
          <li><a href="#">beni etnoantropologici</a></li>
        </ul>
        <div id=description>
          <img src="http://www.lanrentuku.com/down/js/images/12447871590.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
我现在想让图片在下，文字在上，这个应该怎么改呢？求大神帮忙呢~~