28172 sujets

CSS et mise en forme, CSS3

[Résolu] LIGHTBOX : placer la légende au-dessus de l'image.

Bonjour,

J'utilise Lightbox et j'aimerai déplacer la légende <title> au-dessus des images.
Je crois qu'il faut jouer sur clear:left, mais je n'arrive pas à le modifier malgré toutes mes combinaisons...

Voici mon HTML:
<div id="main-container" style="width: 6600px" >

<div class="slide-item slide-type-default" style="width: 300px"><a href="img/musique/guthrieGD.jpg" data-lightbox="Piednu" title="Sérigraphie et impression jet d'encre - 2012"><span style="cursor: crosshair;"><p><img src="img/musique/guthrieGD.jpg" alt="festival"width="300" height="544" /></p></span></a>

</div>


et voici son CSS:
/* line 7, ../sass/lightbox.sass */
body:after {
border:none;
  content: url(img/close.png) url(img/loading.gif) url(img/prev.png) url(img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
	border:none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #FFF;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
	border:none;
  position: absolute;
  
  left: 0;
  width: 100%;
  height:100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
	border:none;
  display: block;
  float: left;
  height: auto;
 -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
  clear: left;
  
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
	border:none;
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
	border:none;
  content: "";
  display: none;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
	border:none;
  padding: 0px;
   clear: left;
  
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
	border:none;
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
	border:none;
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
	border:none;
  position: absolute;
  clear:left;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
	border:none;
  left: 0;
  clear:left;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
	border:none;
  outline: none;
  clear:left;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
	border:none;
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
	 position: absolute;
	z-index:3;
  left: 0;
  float: left;
  display: block;
  background-image:  url(img/blank.gif);
	background-repeat: no-repeat;
	background-position: left 48%;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
	 position: absolute;
	z-index:3;
	width: 49%;
	height: 100%;
	cursor: pointer;
	/* Trick IE into showing hover */
  display: block;
	background-image: url(img/prev.png);
	background-repeat: no-repeat;
	background-position: left 48%; 
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
	position: absolute;
	z-index:3;
  right: 0;
  float: right;
  display: block;
  background-image: url(img/blank.gif);
	background-repeat: no-repeat;
	background-position: right 48%;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
	position: absolute;
	z-index:3;
	width: 49%;
	height: 100%;
	cursor: pointer;
	/* Trick IE into showing hover */
  display: block;
	background-image: url(img/next.png);
	background-repeat: no-repeat;
	background-position: right 48%;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
	border:none;
  margin: 0 auto;
  padding-top: 10px;
  *zoom: 1;
  width: 100%;
  clear:left;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
	border:none;
  content: "";
   padding: 0 0px;
  /*color : #300;*/
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
	border:none;
  padding: 0 0px;
  color: #300;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
	border:none;
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
	border:none;
	float:left;
font-family: 'font/crimson_textitalic';
  font-size: 11pt;
  line-height:14pt;
  font-weight: normal;
  text-align: LEFT;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
	border:none;
font-family: 'crimson_textitalic';
display: block;
 
  padding-bottom: 4em;
  font-size: 0px;
  text-align: LEFT;

}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
	border:none;
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
	border:none;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


merci d'avance pour votre aide !
Smiley jap
usine à gaz ton truc, crée un jsFiddle (non ce n'est pas que pour les jQuery). Ca sera beaucoup plus simple pour nous de t'aider.
ok..
je n'arrive pas à importer les images dans jsfiddle, le résultat ne permet pas de visualiser le problème..
voici un site que j'ai crée.
www.yannowens.fr

quand on va dans l'onglet travaux récent par exemple, on peut voir les images dans une galerie, mais j'aimerai que leur légende s'affiche au-dessus de l'image..

voilà, j'espère que c'est mieux comme ça

sinon, voici le fiddle que j'ai crée
jsfiddle.net/cnSLZ/1/
Tu peux pas simplement inverser l'ordre de l'html ?
en mettant .lb-outerContainer en dessous de .lb-dataContainer ?

Si c'est non, il faut mettre .lb-dataContainer en position:absolute;top:0 etc... Pour l'avoir au dessus.
Je pense qu'il faudra recadrer le bloc lightbox pour bien l'encadrer.
Effectivement, j'avais déjà essayé de modifier l'ordre dans le html, mais sans succès.
ta deuxième technique fonctionne, mais ce n'est pas très satisfaisant car les légendes ne sont plus calées avec les images.
Je vais creuser encore dans cette direction.

encore merci !
à bientôt
Sujet clos
Aller à