Tema: Imagenes de un slide desaparecen
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/10/2011, 13:00
kidart
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 11 meses
Puntos: 2
Imagenes de un slide desaparecen
Hola,

los consulto porque estoy armando mi primer web con css. Baje un slide de imagenes y lo adapte a mi web, pero la 1era vez que se carga el html la imagen no se muestra. si actualizo la pagina, ahi si aparecen.

Pego los codigos aqui a ver si alguien me puede ayudar!
Gracias.


HTML:
Código HTML: 
Ver original
  1. <div id="example">
  2.             <div id="slides">
  3.                 <div class="slides_container">
  4.                     <a href="#" target="_blank"><img src="images/contacto.jpg" width="816" height="258" alt="Slide 1"></a>
  5.                 </div>
  6.             </div>
  7.         </div>

CSS:
Código CSS: 
Ver original
  1. /* Slides */
  2.  
  3. #example {
  4.     width:816px;
  5.     height:258px;
  6.     position:relative;
  7. }
  8.  
  9. #frame {
  10.     position:relative;
  11.     z-index:0;
  12.     width:816px;
  13.     height:258px;
  14. }
  15.  
  16. /*
  17.     Slideshow
  18. */
  19.  
  20. #slides {
  21.     position:relative;
  22.     top:0px;
  23.     left:68px;
  24.     z-index:100;
  25. }
  26.  
  27. /*
  28.     Slides container
  29.     Important:
  30.     Set the width of your slides container
  31.     Set to display none, prevents content flash
  32. */
  33.  
  34. .slides_container {
  35.     width:816px;
  36.     overflow:hidden;
  37.     position:relative;
  38.     display:none;
  39. }
  40.  
  41. /*
  42.     Each slide
  43.     Important:
  44.     Set the width of your slides
  45.     If height not specified height will be set by the slide content
  46.     Set to display block
  47. */
  48.  
  49. .slides_container a {
  50.     width:816px;
  51.     height:258px;
  52.     display:block;
  53. }
  54.  
  55. .slides_container a img {
  56.     display:block;
  57. }
  58.  
  59. /*
  60.     Next/prev buttons
  61. */
  62.  
  63. #slides .next,#slides .prev {
  64.     position:absolute;
  65.     top:107px;
  66.     left:-24px;
  67.     width:24px;
  68.     height:43px;
  69.     display:block;
  70.     z-index:101;
  71. }
  72.  
  73. #slides .next {
  74.     left:815px;
  75. }
  76.  
  77. /*
  78.     Pagination
  79. */
  80.  
  81. .pagination {
  82.     margin:0px auto 0;
  83.     width:100px;
  84. }
  85.  
  86. .pagination li {
  87.     float:left;
  88.     margin:0 1px;
  89.     list-style:none;
  90. }
  91.  
  92. .pagination li a {
  93.     display:block;
  94.     width:12px;
  95.     height:0;
  96.     padding-top:12px;
  97.     background-image:url(../img/pagination.png);
  98.     background-position:0 0;
  99.     float:left;
  100.     overflow:hidden;
  101. }
  102.  
  103. .pagination li.current a {
  104.     background-position:0 -12px;
  105. }
  106.  
  107.  
  108.  
  109. /*
  110.     Anchors
  111. */
  112.  
  113. a:link,a:visited {
  114.     color:#599100;
  115.     text-decoration:none;
  116. }
  117.  
  118. a:hover,a:active {
  119.     color:#599100;
  120.     text-decoration:underline;
  121. }