Problemita IFRAME

Swatoo · #1 (**permalink**) 20/05/2010, 18:07

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.

iovan · #2 (**permalink**) 20/05/2010, 18:40

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. ;)

Swatoo · #3 (**permalink**) 20/05/2010, 18:56

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  
 
 
  
  <title>todo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
 
<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">
 
 
<table style="text-align: left; margin-left: auto; margin-right: auto;" id="Tabla_01" border="0" cellpadding="0" cellspacing="0" height="771" width="900">
 
 
  <tbody>
 
 
    <tr>
 
 
      <td rowspan="19"> <img style="width: 49px; height: 768px;" src="img/costado1.png" alt=""></td>
 
 
      <td colspan="11"> <img src="img/todo_02.jpg" alt="" height="36" width="822"></td>
 
 
      <td rowspan="19"> <img style="width: 49px; height: 768px;" src="img/costado2.png" alt=""></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td colspan="2" rowspan="16"> <img src="img/todo_04.jpg" alt="" height="648" width="70"></td>
 
 
      <td colspan="7"> <img src="img/todo_05.jpg" alt="" height="199" width="672"></td>
 
 
      <td colspan="2" rowspan="16"> <img src="img/todo_06.jpg" alt="" height="648" width="80"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td colspan="7"> <img src="img/todo_07.jpg" alt="" height="68" width="672"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td colspan="4" rowspan="4"> <img src="img/todo_08.jpg" alt="" height="57" width="51"></td>
 
 
      <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>
 
 
      <td colspan="2" rowspan="12"> <img src="img/todo_10.jpg" alt="" height="335" width="514"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/todo_11.jpg" alt="" height="5" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <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>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/todo_13.jpg" alt="" height="6" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td rowspan="10"> <img src="img/todo_14.jpg" alt="" height="324" width="17"></td>
 
 
      <td rowspan="7"> <img src="img/todo_15.jpg" alt="" height="115" width="12"></td>
 
 
      <td colspan="2" rowspan="8"> <img src="img/todo_16.jpg" alt="" height="278" width="22"></td>
 
 
      <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>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/todo_18.jpg" alt="" height="8" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <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>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/todo_20.jpg" alt="" height="8" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <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>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/todo_22.jpg" alt="" height="8" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <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>
 
 
    </tr>
 
 
    <tr>
 
 
      <td rowspan="3"> <img src="img/todo_24.jpg" alt="" height="209" width="12"></td>
 
 
      <td> <img src="img/todo_25.jpg" alt="" height="163" width="107"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td rowspan="2"> <img src="img/todo_26.jpg" alt="" height="46" width="8"></td>
 
 
      <td colspan="3"> <img src="img/todo_27.jpg" alt="" height="26" width="601"></td>
 
 
      <td rowspan="2"> <img src="img/todo_28.jpg" alt="" height="46" width="34"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td colspan="3"> <img src="img/todo_29.jpg" alt="" height="20" width="601"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td rowspan="2"> <img src="img/todo_30.jpg" alt="" height="86" width="27"></td>
 
 
      <td colspan="9"> <img src="img/todo_31.jpg" alt="" height="15" width="755"></td>
 
 
      <td rowspan="2"> <img src="img/todo_32.jpg" alt="" height="86" width="40"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td colspan="9"> <img src="img/todo_33.jpg" alt="" height="71" width="755"></td>
 
 
    </tr>
 
 
    <tr>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="41"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="27"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="43"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="17"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="12"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="8"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="14"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="107"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="480"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="34"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="40"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="40"></td>
 
 
      <td> <img src="img/espacio.gif" alt="" height="1" width="37"></td>
            <iframe name="" id="main" style="position:absolute;left:132px;top:36px;width:950px;height:265px;z-index:46;" src="" frameborder="0"></iframe>
            <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>
            
 
    </tr>
 
 
  
  </tbody>
</table>
 
 
<div style="text-align: center;">
</div>
 
 
</body>
</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 (:

iovan · #4 (**permalink**) 20/05/2010, 19:09

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.

Swatoo · #5 (**permalink**) 20/05/2010, 19:30

Está lista en un 90%, no la voy a empezar desde 0 /:

iovan · #6 (**permalink**) 20/05/2010, 21:51

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

Swatoo · #7 (**permalink**) 21/05/2010, 12:00

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.

Nemutagk · #8 (**permalink**) 22/05/2010, 21:25

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