поле внизу не работает - PullRequest
Новая
       17

поле внизу не работает

0 голосов
/ 13 февраля 2012

Я относительно новичок в веб-разработке и просто пытаюсь сделать портфолио для себя. Я выбрал 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>

1 Ответ

0 голосов
/ 13 февраля 2012

Если вы хотите, чтобы 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.

...