I have created an image slider but it appears in the middle of the page. I want to move it nearer to the right but I am having problems with positioning the slider.
The css code for the postioning is;
#slideshow {
margin: 50px auto;
position: relative;
width: 465px;
height: 250px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
slideshow img.align-right: {float: right;
Margin-right: 20px;
}
There is another issue which is that the following div (menu) appears a long way below the slider.
If I alter the height in slideshow the menu moves higher up the page but the slider background collapses. How can I resolve this?
#slideshow {
margin: 50px auto;
position: relative;
width: 465px;
/* it seems that this line places the menu div 250px below the images. If I delete this line the background box collapses and the menu appears in the right place */
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
slideshow img.align-right: {float: right;
Margin-right: 20px;
