28172 sujets

CSS et mise en forme, CSS3

Mettre les caption en dessous du slider [RESOLU]

Bonjour a toutes et a tous,

Je développe un site en ce moment et j'ai un problème avec mon slider voici ce que j'aimerais réalisé :
http://image.noelshack.com/minis/2013/52/1387807830-voulul.png

Mais voici ce que j'ai :
http://image.noelshack.com/minis/2013/52/1387807826-officiel.png


Mon problème est que je n'arrive pas a faire sortir mon caption qui est en absolute...


Html : 
	<div class="slider-block">
    								<div class="slider camera_wrap camera_azure_skin" id="camera">
    									
                                        <div data-src="images/slider_01.jpg"> 
                                        <div class="camera_caption ">
                                      Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>               
                                        </div>


    									<div data-src="images/slider_02.jpg"> 
                                        <div class="camera_caption ">
                                      Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>               
    									</div>

    									<div data-src="images/slider_03.jpg"> 
                                        <div class="camera_caption">
                                      Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>               
    									</div>

    									<div data-src="images/slider_04.jpg">  
                                        <div class="camera_caption">
                                      Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>              
    									</div>

    									<div data-src="images/slider_05.jpg"> 
                                        <div class="camera_caption">
                                      Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>               
    									</div>       
    								</div>     
    								<div class="clear"></div> 
    								<div class="pags">
    									<ul>
    										<li><a href="#"></a></li>
    										<li><a href="#"></a></li>
    										<li><a href="#"></a></li>
    										<li><a href="#"></a></li>
    										<li><a href="#"></a></li>
    									</ul>
    								</div>      
    							</div>



Css : 


/********************** Slider ************************/


.slider-block {
z-index:200; margin-top:27px;
overflow:hidden;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius:5px;
border:solid 3px #ffcc01;}

.camera_caption {
	top: 400px;
	display: block;
	z-index: 999;
	position: absolute;
	width: 100%;
	color: #fff;
}
.camera_caption > div {
	padding: 10px 20px;
	background: rgba(247, 243, 218, 0.7);
}

.camera_wrap img, 
.camera_wrap ol, .camera_wrap ul, .camera_wrap li,
.camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td
.camera_thumbs_wrap img, 
.camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li,
.camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
	background: none;
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	list-style: none
}

.cameraCont, .cameraContents {
    position: relative;
    width: 100%;
    z-index: 1;
}

.camera_wrap {
	display: none;
	min-height:431px;
	z-index:9;	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
	position: relative;
}

.camera_wrap {
	width: 100%;
	margin:0 !important;	
	overflow:hidden !important;
}


.slider {
	position:relative;
	z-index:1;
	float:left;
}

.camera_pag {
    z-index: 99999;
    top:446px;
	left:318px;
	position:absolute;
}

.camera_wrap .camera_pag .camera_pag_ul {	
	z-index:999;	
}
.camera_wrap .camera_pag .camera_pag_ul li { float:left; margin-left:5px; height:10px; cursor: pointer; text-indent: -1000px;}
.camera_wrap .camera_pag .camera_pag_ul li span { background:url(../images/pag_slider.png) 0px 0px no-repeat; width:53px; display:block;  height:10px; }
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent span , .camera_wrap .camera_pag .camera_pag_ul li:hover span { background-position:0 -15px;}

.camera_src {
	display: none;
}

.cameraCont, .cameraContents {
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 1;
}
.cameraSlide {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
.cameraContent {
	bottom: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
.camera_target {
	bottom: 0;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	text-align: left;
	top: 0;
	width: 100%;
	z-index: 0;
}


.camera_overlayer {
	bottom: 0;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}
.camera_target_content {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.camera_loader {
    background: #fff url(../images/camera-loader.gif) no-repeat center;
	background: rgba(255, 255, 255, 0.9) url(../images/camera-loader.gif) no-repeat center;
	border: 1px solid #ffffff;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	height: 36px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	margin: -18px 0 0 -18px;
	top: 50%;
	width: 36px;
	z-index: 3;
}


Et pour finir le js est disponible ici https://raw.github.com/pixedelic/Camera/master/scripts/camera.js


Merci d'avance a toutes et a tous pour votre aide !
Modifié par keloxgmx (24 Dec 2013 - 12:23)
Bonjour,

Le mieux serait sans doute de vous adresser directement au créateur du diaporama.
Si vous souhaitez obtenir de l'aide, il serait souhaitable de fournir une url de test Smiley cligne
Hello,

Suis dans le canapé sur tablette tactile, pas facile de regarder et de manipuler du code...
Je jette un œil demain Smiley cligne
Si je regarde ton code, je me dis que le plus simple serait de sortir ces "div caption" du conteneur, mais à vrai dire, il faut regarder en détail le slider (positionnement CSS et interaction JS)...
Saloute,

En faite si tu veux déplacer la légende, va falloir retaper un peu ds le code, rie n'empeche de le situer ou tu le souhaites avec les propriétés type bottom:-50px;
Par contre va falloir aller taper aussi dans les divs englobant qui ont des overflow:hidden;
(avec le contrôleur de dev il en a l'air d'y en avoir pas mal)

Faut juste espérer que ça n'envenime pas le fonctionnement du slider en le faisant.
artsx MERCI !!!!!!!!!!!!!!!!!!! C'était ça Smiley lol Smiley ravi Smiley confused Smiley lol Smiley biggrin Smiley cligne

C'est noel avant l'heure ^^

overflow:visible; et opp Smiley lol
Modifié par keloxgmx (24 Dec 2013 - 12:20)
Sujet clos
Aller à