2012-02-13 163 views
0

我對網絡開發比較陌生,我只是想爲自己製作一個投資組合網站。我選擇使用bg stretcher 2(全屏圖像滑塊)作爲查看圖像的方法。在這個頂部,我試圖創建一個導航菜單,雖然我有一個讓div標籤位於窗口左下角的麻煩,當窗口保持在同一個位置被調整大小。下面是我的源代碼:保證金底部不起作用

<?xml version="1.0"?> 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Jerome Lousick</title> 

<link rel="stylesheet" type="text/css" href="demo/main.css" /> 
<link rel="stylesheet" type="text/css" href="bgstretcher.css" /> 

<script type="text/javascript" src="jquery-1.5.2.min.js"></script> 
<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript" src="bgstretcher.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 

    // Initialize Backgound Stretcher  
    $('BODY').bgStretcher({ 
     images: ['images/18.jpg', 'images/3.jpg', 'images/2.jpg', 'images/4.jpg', 'images/11.jpg', 'images/13.jpg', 'images/15.jpg'], 
     imageWidth: 1024, 
     imageHeight: 768, 
     slideDirection: 'W', 
     slideShowSpeed: 1000, 
     transitionEffect: 'fade', 
     sequenceMode: 'normal', 
     buttonPrev: '#prev', 
     buttonNext: '#next', 
     pagination: '#nav', 
     anchoring: 'left center', 
     anchoringImg: 'left center' 
    }); 

    $('BODY').bgStretcher.pause(); //slideshow starts paused 

}); 
</script> 

<script type="text/javascript" src="demo/main.js"></script> 

<style type="text/css"> 
#apDiv1 { 
position:absolute; 
width:250px; 
height:65px; 
z-index:1; 
left: 16px; 
top: 338px; 
} 
#apDiv2 { 
position:absolute; 
width:200px; 
height:51px; 
z-index:2; 
left: 19px; 
margin-bottom: 400px; 
} 
#apDiv2 .nav-buttons .nav-buttons #prev, #next, #toggleAnimation { 
font-family: Consolas; 
color: #FFF; 
font-size:10px 
} 
</style> 

</head> 
<body> 
    <div id="apDiv1"><img src="images/logo.png" alt="" width="244" height="59" /></div> 
    <div id="apDiv2"> 
    <p><span class="nav-buttons"><span class="nav-buttons"><a href="javascript:;" id="prev">Back |</a></span> <a href="javascript:;" id="next">Next</a></span></p> 
    <p>&nbsp;</p> 
    </div> 
</body> 
</html> 

回答

0

如果你想要做apDiv2是窗口的左下角,你可以試試這個...

#apDiv2 { 
position:absolute; 
width:200px; 
height:51px; 
z-index:2; 
left: 19px; 
bottom: 19px; /*this would be how far from the bottom you want it positioned*/ 

}

另外,如果你想要的導航菜單浮動在你滾動的相同位置,你可以使用position:fixed而不是position:absolute。