Центральная панель навигации и ползунок ⇐ Html

[Anonymous]

Я изучаю веб-дизайн и создаю случайный сайт для развлечения в Dreamweaver. Я пытаюсь центрировать контейнер, в котором прокручиваются изображения, для автоматической настройки в зависимости от размера экрана по центру (чтобы левая и правая стороны были ровными). Я не знаю, как это сделать. Кроме того, между изображениями есть небольшая задержка, и можно увидеть желтый фон контейнера. Это нормально? Есть ли способ для моего (UL) занять верхнюю часть веб-сайта, чтобы верхняя часть была белой, а нижняя - черной, и как я могу выровнять панель навигации по центру?
Это то, что мне нужно далеко...
Хорошо, вот ссылка на код, единственное, я не уверен, почему код jQuery не работает, изображения должны прокручиваться автоматически или при нажатии на оранжевое поле («стрелка»). http://codepen.io/anon/pen/jPXEWd




Untitled Document

• HOME
• ABOUT
• CONTACT US
• GALLERY

body{
background:black;

}

.Nav{

background-color:white;
height:40px;

}
.Nav ul{

color:white;
font-family:"American Typewriter";
padding:0px;

}
.Nav ul li{
list-style:none;
margin-left:350px;

}
.Nav ul li a{
text-decoration:none;
float:left;
padding: 10px 40px;
color:black;

}

.Nav ul li a:hover{
color:orange;
}





$('#slider').cycle({
fx: 'scrollHorz',
speed: 'slow',
next: '#next',
prev: '#prev '
});





#wrapper{
display:block;
height:500px;
width:500px;

}

#container{
background-color:#FFC;
display:block;
float:left;
height:500px;
width:1200px;
overflow:auto;
margin-left:25%;
margin-top:50px;
}

#prev{
background-image:url(../Downloads/1438243795_circle_back_arrow.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:left;
height:500px;
width:200px;
position:relative;
z-index:99;

}

#next{
background- image:url(../Downloads/1438243790_circle_next_arrow_disclosure.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:right;
height:500px;
width:200px;
position:relative;
z-index:99;

}

#slider{
display:block;
float:left;
height:500px;
width:1200px;
overflow:hidden;
position:absolute;

}
















Подробнее здесь: https://stackoverflow.com/questions/317 ... and-slider