Quiero que la web se vea igual en diferentes resoluciones

viriato007 · #1 (**permalink**) 13/12/2009, 07:03

Acá os dejo la web en HTML que he creado http://www.xente.mundo-r.com/knowledge

Está optimizada a una resolución de 1024x768 pero si se cambia la resolución se ve o mas grande o mas pequeña. la solución está en usar porcentajes pero tengo un problema con internet explorer en el cuerpo de la web donde va 2 imágenes iframe.

¿Debo usar tablas convencionales en el cuerpo de la web o debo usar tablas con CSS? Necesito consejos al respecto pues soy novato en la edición de webs y que me orienten en el uso de porcentajes en vez de pixeles.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link type="text/css" href="menu_style.css" rel="stylesheet"></head>
<body style="margin-top: 0px; height: 129px; width: 1024px; color: rgb(0, 0, 0); background-color: rgb(51, 0, 0); background-image: url(images/final.png);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
&nbsp;<br>
<table style="width: 900px; height: 189px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 189px; width: 100%;"><img style="height: 176px; width: 900px;" alt="head" src="images/head.png">
<div id="menu">
<ul>
<li><a href="index.html" title="santeria_yoruba.html"><span>Santera
Yoruba
</span></a></li>
<li><a href="videncia.html" title="videncia.html"><span>Videncia
</span></a></li>
<li><a href="medium.html" title="medium.html"><span>Medium
</span></a></li>
<li><a href="espiritismo.html" title="espiritismo.html"><span>Espiritismo
</span></a></li>
<li><a href="sanaciones.html" title="sanaciones.html"><span>Sanaciones
</span></a></li>
<li><a href="trabajos.html" title="trabajos.html"><span>Trabajos
</span></a></li>
<li><a href="contacto.html" title="contacto.html"><span>Contacto
</span></a></li>
<li><a href="galeria.html" title="galeria.html"><span>Galería
</span></a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<table style="width: 898px; height: 478px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 140px;"><img style="width: 144px; height: 188px;" alt="lyon" src="images/lyon.png"><br>
</td>
<td style="width: 470px;">
<div =""><iframe src="texto_santera_yoruba.html" height="460" width="100%"></iframe><br>
</div>
</td>
<td style="width: 260px;"><img style="width: 245px; height: 308px; float: right;" alt="orisha" src="images/images.gif/orisha.gif"><br>
</td>
</tr>
</tbody>
</table>
<br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;<br>
<table style="width: 900px; height: 31px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><img style="width: 900px; height: 280px;" alt="back" src="images/back.png" align="middle"></td>
</tr>
</tbody>
</table>
<br>
<span style="color: white;"></span><span style="color: white;"></span><span style="color: white;"></span><span style="color: white;"></span><span style="color: white;"><span style="color: white;"><span style="color: white;"><span style="color: white;"></span></span></span></span>
</body></html>

asinox · #2 (**permalink**) 13/12/2009, 09:06

"Está optimizada a una resolución de 1024x768 pero si se cambia la resolución se ve o mas grande o mas pequeña. "

Hermano eso siempre sera asi, la resolucion es lo que dice de que tamaño se veran los objetos en tu monitor.... preocupate simplemente por que el ancho de tu web no sobrepase los 960 pixeles de ancho si es que no te interesan las resoluciones de 800 x 600 y en caso de que te preocupen todas las resoluciones incluyendo las 800 x 600 tu web no debe de pasar los 770 pixeles de ancho.

Saludos

viriato007 · #3 (**permalink**) 13/12/2009, 11:31

Gracias por contestar

Pero creo que si en vez de trabajar en pixeles, trabajas en porcentajes. La cosa cambia y mas o menos se mantiene igual.

Al trabajar en porcentajes al cambiar la resolución los diferentes elementos tienen el mismo tamaño -mas o menos- pero tengo un problema con la tabla que contiene 2 imagenes y iframe en internet explorer -no en los otros navegadores-

Saludos.

millan2525 · #4 (**permalink**) 13/12/2009, 12:11

A mi personalmente me aparece igual en firefox que en IE, lo único que no sé ve el borde izquierdo(el margen).

No obstante, no se puede diseñar nunca una página para todos los navegadores...

Todos intentan hacer un stardar(con normalización ISO u otras), y firefox sigue como le da la gana.

Es más, si pruebas con distintas versiones de un mismo navegador, la página se verá distinta(esta quizá no porque es muy simple).

Los navegadores tienen su propio metodo de leer las tags(etiquetas), pero no lo leen todos igual, cada uno lo lee a su manera. Todos se parecen pero ninguno es igual, como si ves a dos personas leer algo, puede que a todas las entiendas, pero no es la misma voz...

jomaruro · #5 (**permalink**) 13/12/2009, 12:34

Hola:

Échale un vistazo a este artículo, te resultará útil.

Saludos.