Foros del Web » Creando para Internet » HTML »

Problemita IFRAME

Estas en el tema de Problemita IFRAME en el foro de HTML en Foros del Web. Buenas noches hago este post para ver si pueden darme una manito con este IFRAME que intento poner a la web qe estoy armando, la ...
  #1 (permalink)  
Antiguo 20/05/2010, 19:07
Avatar de Swatoo  
Fecha de Ingreso: enero-2009
Mensajes: 19
Antigüedad: 8 años, 11 meses
Puntos: 0
Problemita IFRAME

Buenas noches hago este post para ver si pueden darme una manito con este IFRAME que intento poner a la web qe estoy armando, la cuestión es que ya lo puse, lo ubiqe y todo pero solo lo ubiqe en mi resolucion, osea 1280x768, y al bajar la resolucion, a 1024x768 ( la mayoria usa esa ) se queda en el lugar de la otra res.

Para mejorar la explicacion dejo imgs:


[url=http://www.SwatooWebsite.com.ar/w1.png]LINK[/url]


[url=http://www.SwatooWebsite.com.ar/w2.png]LINK[/url]


Sin más, Gracias.
  #2 (permalink)  
Antiguo 20/05/2010, 19:40
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Problemita IFRAME

Hola amigo, verás yo te recomiendo lo siguiente

1.- Utiliza css position relative para el objeto principal (que podría ser la parte con la imagen donde dice bienvenidos) y despues una etiqueta div con un position absolute donde estaría contenido el iframe.

Si haces una buena estructura css no importará la resolucion del usuario, tu website siempre se mostará bien.

2.- Te recomiendo que nos pegues el codigo que estas usando, tando el HTML como el CSS, así podremos ayudarte mejor.


Saludos.
P.D: Que bonita website. ;)
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #3 (permalink)  
Antiguo 20/05/2010, 19:56
Avatar de Swatoo  
Fecha de Ingreso: enero-2009
Mensajes: 19
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Problemita IFRAME

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  
  3.  
  4.  
  5.  
  6.  
  7.   <title>todo</title>
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  9. </head>
  10.  
  11.  
  12. <body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(../../Fondo.png);" leftmargin="0" topmargin="0" alink="#000099" link="#000099" marginheight="0" marginwidth="0" vlink="#990099">
  13.  
  14.  
  15. <table style="text-align: left; margin-left: auto; margin-right: auto;" id="Tabla_01" border="0" cellpadding="0" cellspacing="0" height="771" width="900">
  16.  
  17.  
  18.   <tbody>
  19.  
  20.  
  21.     <tr>
  22.  
  23.  
  24.       <td rowspan="19"> <img style="width: 49px; height: 768px;" src="img/costado1.png" alt=""></td>
  25.  
  26.  
  27.       <td colspan="11"> <img src="img/todo_02.jpg" alt="" height="36" width="822"></td>
  28.  
  29.  
  30.       <td rowspan="19"> <img style="width: 49px; height: 768px;" src="img/costado2.png" alt=""></td>
  31.  
  32.  
  33.     </tr>
  34.  
  35.  
  36.     <tr>
  37.  
  38.  
  39.       <td colspan="2" rowspan="16"> <img src="img/todo_04.jpg" alt="" height="648" width="70"></td>
  40.  
  41.  
  42.       <td colspan="7"> <img src="img/todo_05.jpg" alt="" height="199" width="672"></td>
  43.  
  44.  
  45.       <td colspan="2" rowspan="16"> <img src="img/todo_06.jpg" alt="" height="648" width="80"></td>
  46.  
  47.  
  48.     </tr>
  49.  
  50.  
  51.     <tr>
  52.  
  53.  
  54.       <td colspan="7"> <img src="img/todo_07.jpg" alt="" height="68" width="672"></td>
  55.  
  56.  
  57.     </tr>
  58.  
  59.  
  60.     <tr>
  61.  
  62.  
  63.       <td colspan="4" rowspan="4"> <img src="img/todo_08.jpg" alt="" height="57" width="51"></td>
  64.  
  65.  
  66.       <td style="text-align: right;"> <img style="width: 107px; height: 23px;" src="img/todo_09.jpg" onMouseOver="this.src='img/todo_09_2.jpg'" onMouseOut="this.src='img/todo_09.jpg'" alt="Inicio"></td>
  67.  
  68.  
  69.       <td colspan="2" rowspan="12"> <img src="img/todo_10.jpg" alt="" height="335" width="514"></td>
  70.  
  71.  
  72.     </tr>
  73.  
  74.  
  75.     <tr>
  76.  
  77.  
  78.       <td> <img src="img/todo_11.jpg" alt="" height="5" width="107"></td>
  79.  
  80.  
  81.     </tr>
  82.  
  83.  
  84.     <tr>
  85.  
  86.  
  87.       <td> <img style="width: 107px; height: 23px;" onMouseOut="this.src='img/todo_12.jpg'" onMouseOver="this.src='img/todo_12_2.jpg'" src="img/todo_12.jpg" alt=""></td>
  88.  
  89.  
  90.     </tr>
  91.  
  92.  
  93.     <tr>
  94.  
  95.  
  96.       <td> <img src="img/todo_13.jpg" alt="" height="6" width="107"></td>
  97.  
  98.  
  99.     </tr>
  100.  
  101.  
  102.     <tr>
  103.  
  104.  
  105.       <td rowspan="10"> <img src="img/todo_14.jpg" alt="" height="324" width="17"></td>
  106.  
  107.  
  108.       <td rowspan="7"> <img src="img/todo_15.jpg" alt="" height="115" width="12"></td>
  109.  
  110.  
  111.       <td colspan="2" rowspan="8"> <img src="img/todo_16.jpg" alt="" height="278" width="22"></td>
  112.  
  113.  
  114.       <td> <img style="width: 107px; height: 23px;" onMouseOut="this.src='img/todo_17.jpg'" onMouseOver="this.src='img/todo_17_2.jpg'" src="img/todo_17.jpg" alt=""></td>
  115.  
  116.  
  117.     </tr>
  118.  
  119.  
  120.     <tr>
  121.  
  122.  
  123.       <td> <img src="img/todo_18.jpg" alt="" height="8" width="107"></td>
  124.  
  125.  
  126.     </tr>
  127.  
  128.  
  129.     <tr>
  130.  
  131.  
  132.       <td> <img onMouseOut="this.src='img/todo_19.jpg'" onMouseOver="this.src='img/todo_19_2.jpg'" style="width: 107px; height: 23px;" src="img/todo_19.jpg" alt=""></td>
  133.  
  134.  
  135.     </tr>
  136.  
  137.  
  138.     <tr>
  139.  
  140.  
  141.       <td> <img src="img/todo_20.jpg" alt="" height="8" width="107"></td>
  142.  
  143.  
  144.     </tr>
  145.  
  146.  
  147.     <tr>
  148.  
  149.  
  150.       <td> <img style="width: 107px; height: 22px;" onMouseOut="this.src='img/todo_21.jpg'" onMouseOver="this.src='img/todo_21_2.jpg'" src="img/todo_21.jpg" alt=""></td>
  151.  
  152.  
  153.     </tr>
  154.  
  155.  
  156.     <tr>
  157.  
  158.  
  159.       <td> <img src="img/todo_22.jpg" alt="" height="8" width="107"></td>
  160.  
  161.  
  162.     </tr>
  163.  
  164.  
  165.     <tr>
  166.  
  167.  
  168.       <td> <img onMouseOut="this.src='img/todo_23.jpg'" onMouseOver="this.src='img/todo_23_2.jpg'" style="width: 107px; height: 23px;" src="img/todo_23.jpg" alt=""></td>
  169.  
  170.  
  171.     </tr>
  172.  
  173.  
  174.     <tr>
  175.  
  176.  
  177.       <td rowspan="3"> <img src="img/todo_24.jpg" alt="" height="209" width="12"></td>
  178.  
  179.  
  180.       <td> <img src="img/todo_25.jpg" alt="" height="163" width="107"></td>
  181.  
  182.  
  183.     </tr>
  184.  
  185.  
  186.     <tr>
  187.  
  188.  
  189.       <td rowspan="2"> <img src="img/todo_26.jpg" alt="" height="46" width="8"></td>
  190.  
  191.  
  192.       <td colspan="3"> <img src="img/todo_27.jpg" alt="" height="26" width="601"></td>
  193.  
  194.  
  195.       <td rowspan="2"> <img src="img/todo_28.jpg" alt="" height="46" width="34"></td>
  196.  
  197.  
  198.     </tr>
  199.  
  200.  
  201.     <tr>
  202.  
  203.  
  204.       <td colspan="3"> <img src="img/todo_29.jpg" alt="" height="20" width="601"></td>
  205.  
  206.  
  207.     </tr>
  208.  
  209.  
  210.     <tr>
  211.  
  212.  
  213.       <td rowspan="2"> <img src="img/todo_30.jpg" alt="" height="86" width="27"></td>
  214.  
  215.  
  216.       <td colspan="9"> <img src="img/todo_31.jpg" alt="" height="15" width="755"></td>
  217.  
  218.  
  219.       <td rowspan="2"> <img src="img/todo_32.jpg" alt="" height="86" width="40"></td>
  220.  
  221.  
  222.     </tr>
  223.  
  224.  
  225.     <tr>
  226.  
  227.  
  228.       <td colspan="9"> <img src="img/todo_33.jpg" alt="" height="71" width="755"></td>
  229.  
  230.  
  231.     </tr>
  232.  
  233.  
  234.     <tr>
  235.  
  236.  
  237.       <td> <img src="img/espacio.gif" alt="" height="1" width="41"></td>
  238.  
  239.  
  240.       <td> <img src="img/espacio.gif" alt="" height="1" width="27"></td>
  241.  
  242.  
  243.       <td> <img src="img/espacio.gif" alt="" height="1" width="43"></td>
  244.  
  245.  
  246.       <td> <img src="img/espacio.gif" alt="" height="1" width="17"></td>
  247.  
  248.  
  249.       <td> <img src="img/espacio.gif" alt="" height="1" width="12"></td>
  250.  
  251.  
  252.       <td> <img src="img/espacio.gif" alt="" height="1" width="8"></td>
  253.  
  254.  
  255.       <td> <img src="img/espacio.gif" alt="" height="1" width="14"></td>
  256.  
  257.  
  258.       <td> <img src="img/espacio.gif" alt="" height="1" width="107"></td>
  259.  
  260.  
  261.       <td> <img src="img/espacio.gif" alt="" height="1" width="480"></td>
  262.  
  263.  
  264.       <td> <img src="img/espacio.gif" alt="" height="1" width="34"></td>
  265.  
  266.  
  267.       <td> <img src="img/espacio.gif" alt="" height="1" width="40"></td>
  268.  
  269.  
  270.       <td> <img src="img/espacio.gif" alt="" height="1" width="40"></td>
  271.  
  272.  
  273.       <td> <img src="img/espacio.gif" alt="" height="1" width="37"></td>
  274.             <iframe name="" id="main" style="position:absolute;left:132px;top:36px;width:950px;height:265px;z-index:46;" src="" frameborder="0"></iframe>
  275.             <iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:530px;top:390px;width:411px;height:123px;z-index:46;" src="main.html" frameborder="0"></iframe>
  276.            
  277.  
  278.     </tr>
  279.  
  280.  
  281.  
  282.   </tbody>
  283.  
  284.  
  285. <div style="text-align: center;">
  286. </div>
  287.  
  288.  
  289. </body>
  290. </html>


No tiene mucho de HTML, o css por el simple motivo que esta exportada de photoshop, ( hace pocas horas )

Pd: Gracias por lo del website (:
  #4 (permalink)  
Antiguo 20/05/2010, 20:09
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Problemita IFRAME

Hola amigo, verás lo que sucede es que si es una exportación desde Photoshop te dará bastantes problemillas en el futuro.

Yo te recomiendo que la hagas desde el principio y usando CSS no tablas.

Verás amigo, el uso de tablas tiene sus desventajas, una de ellas es que son expansibles e impandibles, es decir que estás se acoplan al contenido que se encuentra dentro de sus celdas y filas, y tambien al del espacio que tienen entre un extremo de la pantalla al otro.

Te recomiendo que utilices solo CSS para crear tu sitio web.
Saludos.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #5 (permalink)  
Antiguo 20/05/2010, 20:30
Avatar de Swatoo  
Fecha de Ingreso: enero-2009
Mensajes: 19
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Problemita IFRAME

Está lista en un 90%, no la voy a empezar desde 0 /:
  #6 (permalink)  
Antiguo 20/05/2010, 22:51
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Problemita IFRAME

Bueno, para la próxima vez ya sabes como hacer.

De los errores se aprende y en la programacion estos errores te cuestan horas, dias o meses de trabajo perdido.

Saludos.

__________________

Y hacerla desde 0, almenos para tu web no es nada complicado, en unas horas deberías de tenerla lista al 100%.

Solo es cuestion de partir tus imagenes, añadirles propiedades en CSS, acomodar todo con CSS y... bueno no le encuentro mucha complicidad.
Si quieres un buen trabajo echale muchas ganas amigo.

Saludos
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #7 (permalink)  
Antiguo 21/05/2010, 13:00
Avatar de Swatoo  
Fecha de Ingreso: enero-2009
Mensajes: 19
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Problemita IFRAME

Gracias.. No la quiero echar a perder, quizás le ponga texto a la imagen, ahunque es muy incomodo, demasiado si se quiere copiar el texto, o tener que abrir photoshop para editar la imagen. Muchas gracias por la ayuda.
  #8 (permalink)  
Antiguo 22/05/2010, 22:25
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Respuesta: Problemita IFRAME

No se si únicamente desarrollaste ese sitio para tu uso y como hobbie, o si te vas a dedicar a desarrollar páginas web....

Si es el primer caso déjame decirte que tu código tiene serios problemas, pero no difíciles de solucionar...
1- estas ingresando un iframe dentro de los tag "tr", lo cual esta mal, o lo pones dentro de un tag "td" o "th" o fuera de la tabla (table)
2- tu iframe no es que "se quede con la resolución 1280", si no que lo has agregado con la propiedad "position:absolute" de CSS, así tu iframe no importa en que resolución la veas, siempre estará en el mismo lugar, unicamente se vera bien en la resolución para la cual la has posicionado (en este caso 1280x768 incluso en resoluciones mas altas veras que se desajusta también, solo que hacia el otro lado), para esto quita la propiedad y agrega el iframe dentro del "td" que le corresponde

Ahora si te vas a dedicar a esto de una vez te digo, prepárate y estudia mucho, en verdad mucho html/css porque se ve que te falta mucho y evitare dolores de cabeza como este en el futuro, ojo, no te lo digo en afán de molestar si no evitarte problemas como este
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Etiquetas: iframe
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:32.