Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/01/2013, 06:20
juanpablojacob
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: problema con css y formulario html

Aquí le envío el código de js para que lo puedan pegar dentro de los tags <script>....
Código Javascript:
Ver original
  1. var titulo = "Titulo de la presentaci?n"
  2. //datos
  3.  
  4. var valor_formulario=0 //el valor del formulario que va a servir para los vectores imagenes
  5.  
  6. var ancho = 35  //numero de columnas
  7. var alto = 3    //numero de filas
  8. //ancho y alto de recuadro visor en pixels (si la imagen es mayor, el recuadro se adapta a la imagen)
  9. var ancho_visor = 350
  10. var alto_visor = 280
  11. //retardo entre imagenes en la reproduccion automatica (milisegundos)
  12. var retardo_rotacion = 1000
  13. //FIN SECCION CONFIGURACION
  14. function agrega_array(ruta, titulo, descripcion, link){
  15.     tam_document=document.forms.length+1
  16.     //alert("tam: "+tam_document)
  17.     if(window["imagenes"+tam_document]==null)
  18.         window["imagenes"+tam_document]=new Array();
  19.     a= new Array(ruta, titulo, descripcion, link);
  20.     if(window["imagenes"+tam_document].length==0){
  21.         window["imagenes"+tam_document]=a;
  22.     }
  23.     else{
  24.         var b=window["imagenes"+tam_document].concat(a);
  25.         window["imagenes"+tam_document]=b;
  26.     }
  27. }
  28. function inicializa_actual(numero){
  29.     n=numero.toString()
  30.     window["actual"+n]=0;
  31. }
  32. //indice
  33.  
  34.  
  35. //ir a la siguiente imagen
  36. function siguiente(formul) {
  37.     actual=window["actual"+formul.id]
  38.     imagenes=window["imagenes"+formul.id]
  39.     actual++
  40.     window["actual"+formul.id]=actual
  41.     cole_forms=document.forms[formul.id-1]
  42.     if (cole_forms.imagen[actual]) {
  43.         cole_forms.visor.src = cole_forms.imagen[actual].value
  44.     }
  45.     else ir_inicio(formul)
  46. }
  47.  
  48. //ir a la imagen anterior
  49. function anterior(formul) {
  50.     actual=window["actual"+formul.id]
  51.     imagenes=window["imagenes"+formul.id]
  52.     cole_forms=document.forms[formul.id-1]
  53.     actual--
  54.     window["actual"+formul.id]=actual
  55.     if (actual >= 0) {
  56.         cole_forms.visor.src = cole_forms.imagen[actual].value
  57.     }
  58.     else ultimo(formul)
  59. }
  60.  
  61. //ir a la primera imagen
  62. function ir_inicio(formul) {
  63.     actual=window["actual"+formul.id]
  64.     imagenes=window["imagenes"+formul.id]
  65.     cole_forms=document.forms[formul.id-1]
  66.     actual = 0
  67.     window["actual"+formul.id]=actual
  68.     cole_forms.visor.src = cole_forms.imagen[0].value
  69. }
  70.  
  71. //ir a la ultima imagen
  72. function ultimo(formul) {
  73.     actual=window["actual"+formul.id]
  74.     imagenes=window["imagenes"+formul.id]
  75.     cole_forms=document.forms[formul.id-1]
  76.     actual = cole_forms.imagen.length-1
  77.     window["actual"+formul.id]=actual
  78.     cole_forms.visor.src = cole_forms.imagen[actual].value
  79. }
  80.  
  81. //cambia a modo reproduccion automatica
  82. function repAuto(text, formul) {
  83.     cole_forms=document.forms[formul.id-1]
  84.     cole_forms.automatico.value = (text == "Detener") ? "Reproducir" : "Detener"
  85.     reproducir(formul)
  86. }
  87.  
  88.  
  89. function cambiaLista(formul) {
  90.     actual=window["actual"+formul.id]
  91.     imagenes=window["imagenes"+formul.id]
  92.     cole_forms=document.forms[formul.id-1]
  93.     actual = cole_forms.imagen.selectedIndex
  94.     window["actual"+formul.id]=actual
  95.     cole_forms.visor.src = cole_forms.imagen[actual].value
  96.     cole_forms.descripcion.value = imagenes[4*actual+2]
  97. }
  98.  
  99. //realiza reproduccion atuomatica
  100. function reproducir(formul) {
  101.     actual=window["actual"+formul.id]
  102.     imagenes=window["imagenes"+formul.id]
  103.     cole_forms=document.forms[formul.id-1]
  104.     if (cole_forms.automatico.value == "Detener") {
  105.         actual = (actual == cole_forms.imagen.length-1) ? 0 : actual+1
  106.         window["actual"+formul.id]=actual
  107.         cole_forms.visor.src = cole_forms.imagen[actual].value
  108.         cole_forms.imagen.selectedIndex = actual
  109.         cole_forms.descripcion.value = imagenes[4*actual+2]
  110.         window.setTimeout("reproducir("+formul+")", retardo_rotacion)
  111.     }
  112. }
  113. //actualizacion enlace
  114. function atualizaEnalce( nuevoEnlace ) {
  115.     var imagen 
  116.  
  117.     if (document.getElementById) {
  118.              imagen = document.getElementById("enlace")
  119.     } else if (document.all)
  120.              imagen = document.all.enlace
  121.     else         //no soportado
  122.              return imagen.href = nuevoEnlace
  123. }
  124. //pinta visor de imagenes
  125. function PintaVisor(numero) {
  126. n=numero.toString();
  127. valor_formulario++;
  128. with (document) {
  129.  write('<div class="imagen">')
  130.  write('<form id="'+n+'" name="formulario"> ')
  131.  imagenes=window["imagenes"+valor_formulario]
  132.  inicializa_actual(n);
  133.  write('<table bgcolor="#FFFFF">')
  134.  write('<tr>')
  135.  write('<td align="center" bgcolor="#FFFFF" width="' + ancho_visor + '" height="' + alto_visor + '">')
  136.  write('<a id="enlace" href="' + imagenes[3] + '"><img src="' + imagenes[0] + '" name="visor" width="'+ancho_visor+'" height="'+alto_visor+'"</img></a>')
  137.  write('</td>')
  138.  write('</tr>')
  139.  write('<select id="imagen"'+n+'" name="imagen" style="visibility:hidden">')
  140.  write('<option value="' + imagenes[0] + '" selected>' + imagenes[1] + '</option>')
  141.  numelem = imagenes.length
  142.  for ( var x = 4; x < numelem; x=x+4 ) {
  143.     write('<option value="' + imagenes[x] + '">' + imagenes[x+1] + '</option>')
  144.  }
  145.  write('</select>')
  146.  write('<tr>')  
  147.  write('<td align="center" bgcolor="#FFFFF">')  
  148.  write('<input type="button" onClick="ir_inicio(this.form);" value="|<<" title="Inicio"/>')  
  149.  write('<input type="button" onClick="anterior(this.form);" value="<<" title="Anterior"/>')  
  150.  write('<input type="button" onClick=" siguiente(this.form);" value=">>" title="Siguiente"/>')  
  151.  write('<input type="button" onClick="ultimo(this.form);" value=">>|" title="Ultimo"/>')  
  152.  write('</td>')  
  153.  write('</tr>')  
  154.  write('</table>')  
  155.  write('</form>')  
  156.  write('</div>')
  157.  }  
  158. }

Código CSS:
Ver original
  1. /*
  2. Design by Free CSS Templates
  3. http://www.freecsstemplates.org
  4. Released for free under a Creative Commons Attribution 2.5 License
  5. */
  6.  
  7. body {
  8.     margin: 0;
  9.     padding: 0;
  10.     background: #749865 url(images/img01.gif) repeat-x;
  11.     font: normal small Arial, Helvetica, sans-serif;
  12.     line-height: 1.8em;
  13.     color: #838B91;
  14. }
  15.  
  16. h1, h2, h3, h4, h5, h6 {
  17.     margin: 0;
  18.     padding: 0;
  19.     font-family: Georgia, "Times New Roman", Times, serif;
  20.     font-weight: normal;
  21.     color: #468259;
  22. }
  23.  
  24. h2 {
  25.     padding-left: 20px;
  26.     background: url(images/img07.gif) no-repeat left center;
  27.     font-size: 22px;
  28. }
  29.  
  30. h3 {
  31.     margin-bottom: 1em;
  32.     text-transform: uppercase;
  33.     letter-spacing: 2px;
  34.     font-size: .9em;
  35.     font-weight: bold;
  36. }
  37. table {border-collapse:collapse; border: none;}
  38.  
  39. td {padding: 0;}
  40. p, blockquote, ul, ol {
  41.     margin-top: 0;
  42. }
  43.  
  44. blockquote {
  45.     padding: 0 0 0 40px;
  46.     background: url(images/img11.gif) no-repeat;
  47.     font: italic small Georgia, "Times New Roman", Times, serif;
  48.     line-height: 1.6em;
  49. }
  50.  
  51. a {
  52.     background: url(images/img03.gif) repeat-x left bottom;
  53.     text-decoration: none;
  54.     color: #468259;
  55. }
  56.  
  57. a:hover {
  58.     background: none;
  59.     text-decoration: underline;
  60. }
  61.  
  62. /* Wrapper */
  63.  
  64. #wrapper {
  65.     background: #FFFFFF url(images/img04.gif) repeat-x left bottom;
  66. }
  67.  
  68. /* Menu */
  69.  
  70. #menu {
  71.     width: 750px;
  72.     height: 60px;
  73.     margin: 0 auto;
  74. }
  75.  
  76. #menu ul {
  77.     margin: 0;
  78.     padding: 0;
  79.     list-style: none;
  80. }
  81.  
  82. #menu li {
  83.     display: block;
  84.     float: left;
  85.     width: 148px;
  86.     height: 60px;
  87.     padding: 0 0 0 2px;
  88.     background: url(images/img02.gif) no-repeat;
  89. }
  90.  
  91. #menu a {
  92.     display: block;
  93.     width: 108px;
  94.     height: 36px;
  95.     padding: 20px 20px 0 20px;
  96.     background: none;
  97.     letter-spacing: -1px;
  98.     font: normal 1.6em Georgia, "Times New Roman", Times, serif;
  99.     color: #E1E9E2;
  100. }
  101.  
  102. #menu a:hover {
  103.     border-bottom: 4px solid #5A7C50;
  104.     text-decoration: none;
  105.     color: #FFFFFF;
  106. }
  107.  
  108. #menu .active a {
  109.     background: #E1E9E2;
  110.     border-bottom: 4px solid #E1E9E2;
  111.     text-decoration: none;
  112.     color: #749865;
  113. }
  114.  
  115. /* Header */
  116.  
  117. #header {
  118.     width: 754px;
  119.     height: 247px;
  120.     margin: 0 auto;
  121.     padding: 13px 0 0 0;
  122. }
  123.  
  124. #header h1 {
  125.     float: left;
  126.     width: 104px;
  127.     height: 110px;
  128.     padding: 104px 100px 0 20px;
  129.     background: url(images/img05.jpg) no-repeat;
  130.     line-height: 32px;
  131.     font-size: 30px;
  132. }
  133.  
  134. #header h2 {
  135.     float: right;
  136.     width: 494px;
  137.     height: 34px;
  138.     padding: 180px 20px 0 0;
  139.     background: url(images/img06.jpg) no-repeat;
  140.     text-transform: lowercase;
  141.     text-align: right;
  142.     letter-spacing: -1px;
  143.     font-size: 22px;
  144.     color: #FFFFFF;
  145. }
  146.  
  147. /* Content */
  148.  
  149. #content {
  150.     width: 750px;
  151.     margin: 0 auto;
  152. }
  153.  
  154. /* Posts */
  155.  
  156. #posts {
  157.     float: right;
  158.     width: 510px;
  159. }
  160.  
  161. #posts .post {
  162.     padding-bottom: 30px;
  163. }
  164.  
  165. #posts .story {
  166.     padding: 15px 20px 0 20px;
  167.     background: url(images/img10.gif) repeat-x
  168. }
  169.  
  170. #posts .meta {
  171.     padding: 5px 0 0 20px;
  172.     background: url(images/img03.gif) repeat-x;
  173. }
  174.  
  175. #posts .meta p {
  176.     margin: 0;
  177.     line-height: normal;
  178.     font-size: smaller;
  179. }
  180.  
  181. #posts ul {
  182.     list-style: url(images/img12.gif);
  183. }
  184.  
  185. #posts ul li {
  186. }
  187.  
  188. /* Links */
  189.  
  190. #links {
  191.     float: left;
  192.     width: 220px;
  193. }
  194.  
  195. #links ul {
  196.     margin: 0;
  197.     padding: 0;
  198.     list-style: none;
  199. }
  200.  
  201. #links li ul {
  202.     padding: 15px 20px 30px 20px;
  203.     background: url(images/img10.gif) repeat-x
  204. }
  205.  
  206. #links li li {
  207.     padding: 3px 0;
  208.     background: url(images/img03.gif) repeat-x left bottom;
  209. }
  210.  
  211. #links li a {
  212.     background: none;
  213. }
  214.  
  215. #links li i {
  216.     font-size: smaller;
  217. }
  218.  
  219. /* Footer */
  220.  
  221. #footer {
  222.     padding: 40px 0 60px 0;
  223.     background: url(images/img08.gif) repeat-x;
  224. }
  225.  
  226. #footer p {
  227.     width: 750px;
  228.     font-family: Georgia, "Times New Roman", Times, serif;
  229.     color: #A6C09B;
  230. }
  231.  
  232. #footer a {
  233.     background: none;
  234.     font-weight: bold;
  235.     color: #A6C09B;
  236. }
  237.  
  238. #legal {
  239.     margin: 0 auto;
  240.     text-align: right;
  241.     font-size: 12px;
  242. }
  243.  
  244. #brand {
  245.     margin: -35px auto 0 auto;
  246.     padding: 10px 0 0 35px;
  247.     background: url(images/img09.gif) no-repeat left top;
  248.     letter-spacing: -1px;
  249.     font-size: 24px;
  250. }

Este es mi .css, espero puedan ayudarme que ya no le encuentro solución... En el código HTML, comenté unas líneas, que es la tabla que está implementada en el javascript y anda sino lo hago con js..

Desde ya muchas gracias, por intentar ayudarme!!!