0
我遇到了位置div id #lineAzurebotom的問題。 我在頁面底部找到了div。 我想要下面的div，並接近綠色和白色的顏色。 到HTML頁面中的鏈接：examplediv位置不在正確的位置
鏈接，圖片說明問題：http://www.centerwow.com/window/pic/position.png
我的代碼，CSS：
body {
//overflow:hidden;
background: none repeat scroll 0 0 #6000CC;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px;
height:1000px;
}
.insidWindow {
background: none repeat scroll 0 0 #CCFFFF;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:2.5%;
}
h2 {
font-family:Palatino Linotype;
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background: #0066ff;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom{
background: #880000;
line-height: 7px;
margin: 0px 0px 0px 0px;
}
#lineYelow{
background: #00FFFF;
border-bottom: 4px solid #BBBBBB;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:35px
}
#wrapMein{
background: green;
//overflow:hidden;
margin: 0px 5px 20px 0px;
padding: 0px 0px 0px 0px;
position: relative;
height:500px;
}
.column{
background: none repeat scroll 0 0 #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-15px;
}
.rcolumn{
background: none repeat scroll 0 0 #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
我的代碼的html：
<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<head>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Window Demo</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/window.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/style.css" type="text/css" >
<link rel="stylesheet" href="style/jquery-ui-1.8.18.custom.css" type="text/css">
</head>
<body>
<h2>welcome to centerwow.</h2>
<div class="lineAzure"></div>
<div id="lineYelow"></div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" > | | | | | | | |</div>
<div id="leftcolumn" class="column"></div>
<div id="rightcolumn" class="rcolumn"></div>
<div class="insidWindow">
<div id="windowResize" class="ui-wrapper" style="height: 460px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; " >
Resize me<br>
Please try to resizeme:<br> www www www.
</div>
</div><br>
</div><!--insidWindow-->
<div class="lineAzurebotom">here is my div lineAzurebotom</div>
</div><!--wrapMein-->
</body>
</html>