slide show css superpone titulos "li"

Citar

Escrito el 06 May 2015 02:58 pm

hola a todos, efectivamente sigo con este problema. al agregar titulo al slide show en los elementos li los mismos se superponen al cargar la página, luego funciona normalmente.
el link: [url=http://sonidosdistantes.com.ar/dylan/][/url]

HTM:

Código HTML :

<div id="slide"><ul id="galeria" name="galeria">
<li><div class="img-01">ENTER TO THE BOB DYLAN EXPERIENCE<br />
FAN PAGE AND ENJOY THE TRIP</div></li>
<li><div class="img-02">A TOUR FOR 50TH YEARS OF MUSIC<br />
AN GREAT LIRICS</div></li>
<li><div class="img-03">DYLAN, FRIENDS<br />
 AND HIS CONTRIBUTION TO THE MUSIC</div></li>
<li><div class="img-04">A COMPLETE DISCOGRAFY AND<br />
VIDEO ANTOLOGY ABAILABLE</div></li>
 
</ul></div><!--FIN SLIDE-->

Código CSS :

/* SLIDER */
#slide {
   width: 100%;
   position: relative;
   margin-top: 0px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 0px;
   height: 800px;
   background-color: #036;
}
 
 
#galeria{
   margin: 0;
   padding: 0;
   position: relative;
   list-style: none;
   overflow: hidden;
   height: 100%;
}
#galeria li{
   position: absolute;
   height: 100%;
   width: 100%;
}
#galeria li img{
   width: 100%;
 
}
#galeria .selected{
   z-index: 1;
   opacity: 1;
   -moz-transition: all 15s ease 0s;
   -ms-transition: all 15s ease 0s;
   -o-transition: all 15s ease 0s;
   -webkit-transition: all 15s ease 0s;
   transition: all 15s ease 0s;
}
#galeria .noselected{
   z-index: 0;
   opacity: 0;
   -moz-transition: all 5s ease 0s;
   -ms-transition: all 5s ease 0s;
   -o-transition: all 5s ease 0s;
   -webkit-transition: all 5s ease 0s;
   transition: all 5s ease 0s;
}
.img-01 {
   background-image: url(img/slide-01.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   display: block;
   font-family: Dosis;
   color: #FFF;
   text-decoration: none;
   padding-top: 600px;
   font-size: 400%;
}
.img-02 {
   background-image: url(img/slide-02.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   display: block;
   padding-top: 600px;
   font-family: Dosis;
   font-size: 400%;
   color: #FFF;
}
.img-03 {
   background-image: url(img/slide-03.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   display: block;
   font-family: Dosis;
   font-size: 400%;
   color: #FFF;
   padding-top: 600px;
}
.img-04 {
   background-image: url(img/slide-04.jpg);
   background-repeat: no-repeat;
   background-position: center 0px;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   display: block;
   font-family: Dosis;
   font-size: 400%;
   color: #FFF;
   padding-top: 600px;
}
/* FIN SLIDER */

les agradezco mucho la ayuda

Por walter

68 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 28 May 2015 12:57 pm

alguna sugerencia ?

Por walter

68 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 12 Jun 2015 09:58 am

No se bien lo que quieres hacer.
Prueva lo siguiente:

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Slider responsive solo con CSS</title>
<style type="text/css">

#slide {
float:left;
width:70%;
margin:1em;
overflow:hidden;
}
#slide ul{
position:relative;
float:left;
width:700%;
animation:slide 24s infinite ease;
}
#slide ul li{
position:relative;
float:left;
width:14.28571429%;
}
#slide ul li img{
display:block;
width:100%;
background-color:#333;
Box-sizing:border-box;
}
@keyframes slide{
0.00%{left:0.00%;}
18.75%{left:0.00%;}25.00%{left:-100.00%;}
43.75%{left:-100.00%;}50.00%{left:-200.00%;}
68.75%{left:-200.00%;}75.00%{left:-300.00%;}
93.75%{left:-300.00%;}99.999%{left:-400.00%;}
100%{left:0;}
}
</style>
</head>

<body>
<div id="slide">
<ul>
<li><img src="img/slide-01.jpg" width="800" height="450" alt="hola">ENTER TO THE BOB DYLAN EXPERIENCE<br />
FAN PAGE AND ENJOY THE TRIP</li>
<li><img src="img/slide-01.jpg" width="800" height="450" alt="otra">A TOUR FOR 50TH YEARS OF MUSIC<br />
AN GREAT LIRICS</li>
<li><img src="img/slide-01.jpg" width="800" height="450" alt="dos">DYLAN, FRIENDS<br />
AND HIS CONTRIBUTION TO THE MUSIC</li>
<li><img src="img/slide-01.jpg" width="800" height="450" alt="hh">A COMPLETE DISCOGRAFY AND<br />
VIDEO ANTOLOGY ABAILABLE</li>
</ul></div>
</body>
</html>

Por barontruen

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 Jun 2015 08:08 am

Ya lo he visto en tu pagina y no es esto lo que buscas.
La idea es muy buena.
A simple vista parece que tarde en cargar la imagen, pero ya me he equivocado antes.
Dejame que lo mastique y te cuento.

Por barontruen

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 Jun 2015 10:19 am

Cuando ya has visitado la página y las imagenes se encuentran descargadas en el ordenador, la segunda vez que la visualizas ya no se superponen los titulos.
He estado mirando, y las imagenes pesan mucho, 650kb me parece muchisimo para un jpg, son 24mb descomprimidas. Esto es lo que pasa con el slide.
La solución es reducir el peso de las imagenes, bien achicandolas, reduciendo la profundidad de color o aumentar la comprensión del jpg.

Por barontruen

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Jun 2015 12:39 pm

... O hacer un preload de las imágenes...

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

slide show css superpone titulos "li"

Escribe una respuesta rapida