Positioning Prev and Next Buttons (on NivoSlider) - css

Question

I am using the nivoSlider on a page.
I adapted a Theme to my needs, but i would now like to have the Prev and Next buttons next to the image (Prev on the left side, and Next on the right site), instead of on top of the image.
You can see the test page here:
http://dccf.site88.net/test/dccf.php
here is the html:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="_imgs/photos/fashion3.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion4.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion7.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion9.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork1.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork2.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork3.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork4.jpg" alt="Doncare Care Child Foundation" />
</div><!-- enf of #slider -->
</div><!-- end of .sliderWrapper -->
and the CSS (from the base template):
.nivoSlider {
position:relative;
width:600px;
height:auto;
overflow: hidden;
margin:auto;
margin-top:1em;
}
.nivoSlider img {
position:absolute;
top:0px;
max-width: 600px;
max-height:420px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 600px !important;
height:420px !important;
margin:auto;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:auto;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
margin:auto;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
margin:auto;
}
.nivo-box img {
display:block;
margin:auto;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:fixed;
top:50%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
and the Theme CSS:
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
display:none;
margin:auto;
}
.theme-default .nivoSlider a {
border:0;
display:block;
margin:auto;
}
.theme-default .nivo-controlNav {
text-align: center;
padding:0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
margin-bottom:1em;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -10px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows6.png) no-repeat 0px 0;
text-indent:-9999px;
border:0;
opacity: 1;
/* -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}*/}
.theme-default a.nivo-nextNav {
position:absolute;
background-position:-30px 0;
right:2px;
z-index:9999;
}
.theme-default a.nivo-nextNav:hover {
background:url(arrows6.png) no-repeat -30px -30px;
right:2px;
}.theme-default a.nivo-nextNav:active {
background:url(arrows6.png) no-repeat -30px -60px;
right:2px;
}
.theme-default a.nivo-prevNav {
position:absolute;
left:2px;
}
.theme-default a.nivo-prevNav:hover {
background:url(arrows6.png) no-repeat 0px -30px;
left:2px;
}
.theme-default a.nivo-prevNav:active {
background:url(arrows6.png) no-repeat 0px -60px;
left:2px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
Thank you for your time and help!

Answer 1

.nivoSlider - in this class you have to remove overflow:hidden, and then you have to change the left and right of your buttons:
.nivoSlider{
overflow:hidden; (remove it)
}
And then:
.theme-default a.nivo-prevNav{
left: -35px; (about)
}
.theme-default a.nivo-prevNav:hover{
left: -35px; (about)
}
.theme-default a.nivo-nextNav{
right: -35px; (about)
}
.theme-default a.nivo-nextNav:hover{
right: -35px; (about)
}