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...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<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>
Aucun commentaire:
Enregistrer un commentaire