resolucion de pantalla

sabruchi · #1 (**permalink**) 02/04/2009, 17:21

hola estoy haciendo una pagina con dw y photoshop, el tema es que si tengo el monitor configurado en 800x600 la pagina se ve de una manera y si lo tengo en 1024x768 se ve de otra manera. mi pregunta es si hay alguna forma de estandarizar esto para que se vea de la misma manera, segun cual fuere la resolucion.
saludos y muchas gracias de antemano

ElJavista · #2 (**permalink**) 02/04/2009, 17:29

Bueno, te diré lo que yo hago: defino un ancho determinado, así, cual sea la resolución se verá igual. Bueno, casi igual. Actualmente no hay muchas personas que tengan el monitor a 800x600 así que mejor básate a los 1024x768 para definir un ancho determinado.

sabruchi · #3 (**permalink**) 03/04/2009, 06:46

y con css no se puede hacer? he leido algo de los porcentajes, pero como mi web tiene una tabla y varias filas se me complico un poco, por otro lado vi los porcentajes tambien en los div...
por cierto un pixel a cuanto equivale en porcentaje? para sacar la proporcion

ElJavista · #4 (**permalink**) 03/04/2009, 12:48

Si se puede, pero mira, no siempre resulta, qué te parece si hay una foto? esa foto no va a variar de tamaño, aunque si se podría, si lo haces variar de tamaño se va a ver mal, se deforma un poco. Yo siempre lo hago como te dije y quedan bien.

vancho17 · #5 (**permalink**) 03/04/2009, 17:50

Te recomiendo crear páginas web con ancho promedio de 950 px. Es lo que yo uso y me va bien.

willyfc · #6 (**permalink**) 03/04/2009, 18:57

claro que si se puede hacer con css, tienes 2 opciones,si te fijas las paginas que se ve bien a 800x600 o es por que están hechas con medidas porcentuales o con medidas fijas donde el limite máximo de ancho se lo que entre en la resolución.

Cuando yo trabajo con medidas fijas hago las webs a 770px de ancho para que se vean bien ya que de los 800px tienes que descontar barras de scroll y ventana del navegador. Aquí un ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
*{margin:0; padding:0;}
#contenedor{width:770px; height:auto; overflow:auto; margin:0 auto;}
#cabecera{width:770px; height:100px; background-color:#333;text-align:center;}
#contenido{width:770px; height:auto; overflow:auto;}
#izq{width:150px; height:300px; float:left; background-color:#666;}
#der{width:150px; height:300px; float:right; background-color:#666;}
#centro{width:470px; height:300px; float:left; background-color:#999;}
#pie{width:770px; height:50px; background-color:#CCC; clear:both; text-align:center;}
</style>
</head>
 
<body>
<div id="contenedor">
    <div id="cabecera">Cabecera</div>
    <div id="contenido">
        <div id="izq"></div>
        <div id="centro"></div>
        <div id="der"></div>
    </div>
    <div id="pie">pie</div>
</div>
</body>
</html>

La otra es trabajar un diseño líquido o sea en porcentajes, o sea que se ajuste a la medida del usuario.Un ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
*{margin:0; padding:0;}
#contenedor{ width:100%; height:auto; overflow:auto;}
#cabecera{width:100%; height:100px; background-color:#333;text-align:center;}
#contenido{width:100%; height:auto; overflow:auto;}
#izq{width:150px; height:300px; float:left; background-color:#666;}
#der{width:150px; height:300px; float:right; background-color:#666;}
#centro{height:300px;background-color:#999;}
#pie{width:100%; height:50px; background-color:#CCC; clear:both; text-align:center;}
</style>
</head>
 
<body>
<div id="contenedor">
    <div id="cabecera">Cabecera</div>
    <div id="contenido">
        <div id="der"></div>
        <div id="izq"></div>
        <div id="centro"></div>     
    </div>
    <div id="pie">pie</div>
</div>
</body>
</html>

espero te sirva

sabruchi · #7 (**permalink**) 07/04/2009, 08:27

gracias me ha sido de utilidad creo que me tiro por la opcion 2!!!

willyfc · #8 (**permalink**) 07/04/2009, 08:30

pues me alegro que sirva, solo no olvides una cosa, eso solo es un ejemplo, lo que trato de decir es que no te rijas a eso, y a que es solamente un ejemplo de lo que puedes llegar a crear con eso