Position bouton carroussel problème

Bonsoir à tous,
je suis entrain de réaliser un nouveau site perso .
J'ai réutilisé un carrousel nommé flexslider. Mon site précédent était responsive.
Mes boutons (images) permettant de passer d'une photos à l'autre se retrouvent sur les bords externe de la fenêtre web, ce qui vous en conviendrez n'est pas très pratique...
J'aimerais donc qu'il reviennent en bord de photo...

Un exemple valant mieux que de long discours:

http://recette-glace-sorbet.fr/index.html

1/Pouvez vous m'aider à les remettre dans le droit chemin . c'est à dire à les remettre sur le bord de l'image
2/ à les fixer sur le bord de l'image, car lorsque l'on réduit la fenêtre, il se déplacent comme si l'image diminuait de taille sur un site responsive.

Merci d'avance
ci dessous le CSS de flexslider contenu dans une div id="contain" (peut être pas nécessaire)

.flex-container a:active, .flexslider a:active{outline:none;}
.slides, .flex-control-nav, .flex-direction-nav{margin:0;padding:0;list-style:none;}
.flexslider{width:100%;margin:0;padding:0;}
.flexslider .slides > li{display:none;}
.flexslider .slides img{max-width:100%;display:block;}
.flex-pauseplay span{text-transform:capitalize;}
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:1%;}
.no-js .slides > li:first-child{display:block;}
.flexslider .slides{zoom:1;}
.flexslider .slides > li{position:relative;}
.flex-container{zoom:1;position:relative;}
.flex-caption{background:none;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr==#4C000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);zoom:1;}
.flex-caption{width:96%;padding:2%;position:absolute;left:0;bottom:0;background:rgba(0,0,0,.5);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3);font-size:1.3em;line-height:18px;}
.flex-direction-nav li a{width:52px;height:52px;margin:-13px 0 0;display:block;background:url(../images/flexnav/bg_direction_nav.png) no-repeat 0 0;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;}
.flex-direction-nav li a.next{background-position:-52px 0;right:-21px;}
.flex-direction-nav li a.prev{background-position:0 0;left:-20px;}
.flex-direction-nav li a.disabled{opacity:.3;filter:alpha(opacity=30);cursor:default;}
.flex-control-nav{width:100%;position:absolute;bottom:-30px;text-align:center;}
.flex-control-nav li{margin:0 0 0 5px;display:inline-block;zoom:1;*display:inline;}
.flex-control-nav li:first-child{margin:0;}
.flex-control-nav li a{width:13px;height:13px;display:block;cursor:pointer;text-indent:-9999px;}
.flex-control-nav li a:hover{background-position:0 -13px;}
.flex-control-nav li a.active{background-position:0 -26px;cursor:default;}
#contain{width:100%;max-width:1000px;margin:0 auto;}

Modifié par truitas (17 Aug 2012 - 16:39)