CSS 布局问题
如何将id为imageArea的区域固定，不随滚动条的移动而移动，在imageArea中要显示的是图片；<%@ page language="java" import="java.sql.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@page import="java.util.ArrayList"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Show_Pic</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
<!--
#imageArea{
position:fixed;
left:50%;
top:0px;
}
.row{
position:relative;
display:inline;
width:457px;
height:100px;
float:left;
clear:both;
white-space:nowrap;
}
#bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute;
overflow:visible;
}
-->
</style>
</head>
<body>
<div class="row" id="bottom">
<%
String na= request.getParameter("user");
List<String> list = new ArrayList<String>();
Class.forName("com.mysql.jdbc.Driver");
String url ="jdbc:mysql://127.0.0.1/onlinealbum";
Connection conn=DriverManager.getConnection(url,"root","sa");
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="SELECT * FROM User_Pic WHERE User= '"+na+"'";
ResultSet rs=stmt.executeQuery(sql);
while(rs.next()) { %>
<img src="<%=rs.getString(3)%>" width="100" height="100" onclick="Showclick('<%=rs.getString(3)%>');"/>
<%list.add(rs.getString(3));
}
request.setAttribute("list",list);
rs.close();
stmt.close();
conn.close(); %>
</div>
<center>
<div class="mod" id="mod_album">
<div id="m_album" class="modbox">
<div style="" class="image" id="imageArea">
<center id="picdiv">
</center>
</div>
</div>
<script language="javascript">
<!--
var nowid = 0; //当前相片id
var pNum = 0; //相片数量
var picdiv = document.getElementById("picdiv"); //得到用于显示图片的HTML元素
var photoIndexs = new Array();
photoIndexs = "${list}".replace('[','').replace(']','').split(',');
pNum = photoIndexs.length;
if (0!=pNum)
{
//alert("hello");
//document.getElementById("imgArea").style.display=""; //显示imgArea元素
picdiv.innerHTML = '<img src="'+photoIndexs[0]+'" border = "0" width=650 height=650 />'; //显示当前图片
}
function Showclick(path)
{
picdiv.innerHTML = '<img src="'+path+'" border = "0" width=650 height=650 />'; //显示当前图片
}
function rockPhoto()
{
nowid++;
if (nowid>=pNum)
{
nowid =0;
}
picdiv.innerHTML = '<img src="'+photoIndexs[nowid]+'" border = "0" width=650 height=650 />'; //显示当前图片
}
function next()
{
rockPhoto();
}
function previous()
{
nowid--;
if (nowid<0)
{
nowid =pNum-1;
}
picdiv.innerHTML = '<img src="'+photoIndexs[nowid]+'" border = "0" width=650 height=650 />'; //显示当前图片
}
//-->
</script>
<center class="modhead">
<span class="phpage">
<a href="#" onclick="previous();return false;"><img border="0" src="http://127.0.0.1:8080/AlbumOnline/temp/image/previous.jpg" title="上一张" alt="上一张" width=20 height=20/></a>
<a href="#" onclick="next();return false;"><img border="0" src="http://127.0.0.1:8080/AlbumOnline/temp/image/next.jpg" title="下一张" alt="下一张" width=20 height=20/></a>
</span>
</center>
</div>
</center>
</body>
</html>
