Center navigation bar and slider

Question

I am teaching myself web design, and I'm building a random site for fun in Dreamweaver.I am trying to center the container, where the images scroll, to auto adjust depending on the screen size to the center (so the left and right side can be even). I am not sure how to go about that. Also, there is some little lag between images and can see the yellow background of the container is this normal?? Is there a way for my (UL) to take up the top portion of the website so the top will be white and then the bottom black and how can I center align my navigation bar??

This is what i have to far...

OKay here is link to the code only thing is im am not sure why the jquery code is not running the images are suppose to scroll over automatically or by clicking the orange box ("arrow").http://codepen.io/anon/pen/jPXEWd

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


</head>

<body>

<div class="Head">



<div class="Nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">GALLERY</a></li>
        </ul>
</div>

<style>

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;
}
</style>

<script src="../Downloads/jquery-1.11.3.min.js"></script>
<script src="../Downloads/jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({ 
fx:     'scrollHorz', 
speed:  'slow',  
next:   '#next', 
prev:   '#prev ' 
});

</script>



<!--This is where the slider is happening-->
<style type="text/css">
 #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;



}
</style>
<div id= "wrapper">
<div id = "container">
    <div class="controller" id="prev" ></div>
    <div id="slider">
    <img src="../Pictures/1910493.jpg" width="1920" height="1080" />
    <img src="../Pictures/1822211.jpg" width="2560" height="1600" /> 
    <img src="../Pictures/old_book_4-wallpaper-1920x1440.jpg" width="1920"       height="1440" /> </div>

  <div class="controller" id="next" ></div> 
  </div>
</div>

<div id = "background">
</div>  





</body>
</html>

It would be nice to have a working version of your code. How about a jsfiddle? (http://jsfiddle.net/) — Miguel Jiménez, Jul 31 '15 at 04:33

score 0 · Accepted Answer · edited May 23 '17 at 11:58

There are a lot of information on how to horizontally center a div within its container, for that reason I am going to only explain why your slider is not centered. You can read these Q&As for more info: Horizontally center a div in a div or How do you easily horizontally center a using CSS?.

The first thing you have to do is remove the float property from #container, because it directly says what position to take. Then, set margin left and right to auto. Finally, change the with of #wrapper to be 100%, that is remove '500px'.

The new CSS code is:

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

#container {
  background-color: #FFC;
  display: block;
  height: 500px;
  width: 1200px;
  overflow: auto;
  margin: 50px auto 0 auto;
}

Working demo: http://codepen.io/anon/pen/xGmbqE

PD: To make your demo work, you have to configure the required external JavaScript libraries in the settings section (JavaScript tab).

Center navigation bar and slider

1 Answers1