I am trying to write a practice slider file and in doing the layout I have two problems with CSS.
I would like to align the DIV that holds the controls exactly under the slide show box with out using the left margin in the CSS style if possible and secondly move the right arrow to the right side of the control DIV.
I am hoping someone can take the time to show me how to do this.
The code follows:
<!DOCTYPE html>
<html>
<head>
<title>Practice jQuery slider and gallery</title>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0 auto;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
background-color: #DEDEDE;
color: red;
}
#header{
margin: 0 auto;
width: 860px;
height: 95px;
background-color: #FAF6FA;
background: #ffffff;
}
#container{
position: absolute;
top: 0px;
left: 80px;
/* margin: 0 auto; */
width: 885px;
height: 970px;
background-color: #EFEFEF;
border-style:solid;
border-width:1px;
border-color: silver;
}
#slideShowBox{
position: relative;
width: 640px;
height: 500px;
margin: 150px auto 0;
background-color: #F5F5F5;
border:1px solid #FFFFFF;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;
box-shadow:0 0 22px #111;
}
#slideShowBoxControlls{
position: relative;
width: 640px;
height: 34px;
margin: 0 0 0 120px;
border: 1px solid red;
}
#arrowLeft{
background: url('cssimages/arrowLeft.png') no-repeat;
width: 32px;
height: 32px;
border: 1px solid green;
display: inline-block;
}
#arrowRight{
background: url('cssimages/arrowRight.png') no-repeat;
width: 32px;
height: 32px;
border: 1px solid green;
display: inline-block;
}
h1{
font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Practice jQuery Slider and Gallery</h1>
</div>
<div id="slideShowBox">
</div>
<div id="slideShowBoxControlls">
<div id="arrowLeft"></div>
<div id="arrowRight"></div>
</div>
</div>
</body>
</html>