Foros del Web » Creando para Internet » CSS »

Problema con <> resolución.

Estas en el tema de Problema con <> resolución. en el foro de CSS en Foros del Web. Hola amigas y amigos : Les cuento. Estoy construyendo una página con CSS, con una resolucion de pantalla de 1024 x 768 (mi notebook), pero ...
  #1 (permalink)  
Antiguo 28/04/2008, 01:28
Avatar de fonchi  
Fecha de Ingreso: septiembre-2006
Ubicación: Concepción
Mensajes: 170
Antigüedad: 11 años, 3 meses
Puntos: 0
Exclamación Problema con <> resolución.

Hola amigas y amigos :

Les cuento.
Estoy construyendo una página con CSS, con una resolucion de pantalla de 1024 x 768 (mi notebook), pero me he dado cuenta que en pc's con una resolución distinta, la página no se ve como la construyo.

Entonces...
¿ como puedo hacer para que la gente que entra a la pagina, la vea entera en la resolución que ellos tienen, habrá alguna propiedad en css con la cual se pueda solucionar?


Gracias ,salu2
  #2 (permalink)  
Antiguo 28/04/2008, 02:45
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Problema con <> resolución.

Hola

Utiliza porcentajes en vez de medidas absolutas.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 28/04/2008, 21:52
Avatar de fonchi  
Fecha de Ingreso: septiembre-2006
Ubicación: Concepción
Mensajes: 170
Antigüedad: 11 años, 3 meses
Puntos: 0
De acuerdo Re: Problema con <> resolución.

Buenas PatomaS:

Gracias por responder...

Cuando te refieres a que use % en vez de medidas absolutas, debo cambiar
de px a %, ¿es eso? y ¿debo hacerlo en todo mi CSS?

Disculpa la ignorancia, pero comenzé hace poco con esto


Gracias y Salu2
  #4 (permalink)  
Antiguo 29/04/2008, 02:15
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Problema con <> resolución.

Hola

Debes cambiar las unidades y las unidades de medida en todos los sitios donde las tengas, eso incluye las css y posiblemente los html; como nos hemos visto tú código, no podemos darte una respuesta completa.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 29/04/2008, 03:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con <> resolución.

Seguramente sólo lo tendrás que cambiar en uno o dos contenedores, pero como te dice PatomaS, lo mejor es ver el código para saber qué hay que cambiar.

Mikel.
  #6 (permalink)  
Antiguo 29/04/2008, 15:13
Avatar de fonchi  
Fecha de Ingreso: septiembre-2006
Ubicación: Concepción
Mensajes: 170
Antigüedad: 11 años, 3 meses
Puntos: 0
Re: Problema con <> resolución.

Hola de nuevo:

Bueno a continuacion les muestro el código

Disculpen la tardanza

Muchas gracias, salu2.
.................................................. .................................................. .............................
CSS
.........
BODY
{
FONT: 11% verdana,arial,helvetica,sans-serif;
background-image:url(fondo3.jpg);
height:100%;


}

P
{
FONT-SIZE: 11px;
COLOR: #586885;
LINE-HEIGHT: 120%
}
HR
{
DISPLAY: none
}
H1
{
FONT-SIZE: 25px;
MARGIN: 0px;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}
H2
{
FONT-SIZE: 20px;
TEXT-TRANSFORM: capitalize;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}
H3
{
FONT-SIZE: 18px;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}
H4
{
FONT-SIZE: 15px;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}
H5
{
FONT-SIZE: 13px;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}
H4
{
FONT-SIZE: 12px;
COLOR:#FFFFFF;
TEXT-ALIGN: left
}

TD
{
FONT-SIZE: 12px;
COLOR: #586895;
TEXT-ALIGN: center
}

A
{
FONT-SIZE: 12px;
COLOR: #325fa0
}

A:link
{
TEXT-DECORATION: none
}

A:visited
{
COLOR: #325fa0;
TEXT-DECORATION: none
}

A:hover
{
COLOR: #000066
}
A:active
{
COLOR: #09c;
TEXT-DECORATION: none
}
#container
{
/*BORDER-LEFT-COLOR:#000000;*/
/*BORDER-BOTTOM-COLOR: #000000;*/
MARGIN: 1px auto;
WIDTH: 700px;
/*BORDER-TOP-STYLE: solid;*/
/*BORDER-TOP-COLOR: #000000;*/
/*BORDER-RIGHT-STYLE: solid;*/
/* BORDER-LEFT-STYLE: solid;*/
HEIGHT:800px;
BACKGROUND-COLOR: #dde6ac;
/*BORDER-RIGHT-COLOR: #000000;*/
/*BORDER-BOTTOM-STYLE: solid*/
}
.header
{
BORDER-BOTTOM-COLOR: #000000;
MARGIN: 0px 0px 10px;
WIDTH: 700px;
HEIGHT: 140px;
BACKGROUND-COLOR:#666666;
BORDER-BOTTOM-STYLE: solid
}
#cuerpo{
width: 100%;
}
.izquierda{
position: relative;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
FLOAT: left;
MARGIN: 0px 0px 5px 5px;
BORDER-LEFT: 1px solid;
WIDTH: 200px;
BORDER-BOTTOM: 1px solid;
BACKGROUND-COLOR:#666666;
}


.izquierda UL
{
FONT: bold 11px/140% Verdana, Arial, Helvetica, sans-serif;
TEXT-TRANSFORM: capitalize;
COLOR: #586895
}
.derecha
{
position: relative;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
FLOAT: right;
MARGIN: 0px 5px 5px 0px;
BORDER-LEFT: 1px solid;
WIDTH: 150px;
BORDER-BOTTOM: 1px solid;
BACKGROUND-COLOR:#666666;
}

.principal{
position: relative;
width:313px;
float: left;
background-color:#FFF;
margin-left: 5px;
margin-right: 5px;
border-style:solid;
border-width:1px;
border-color:#000000;
padding:0px;
}

.footer
{
CLEAR: both;
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
MARGIN: 5px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 800;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT:65px;
BACKGROUND-COLOR: #fff
}
.footer H6
{
MARGIN-TOP: 5px;
FONT-SIZE: 10px;
MARGIN-LEFT: 5px;
TEXT-TRANSFORM: uppercase;
COLOR:#000000;
MARGIN-RIGHT: 5px;
TEXT-ALIGN: center
}

.................................................. .................................................. ..........................
HTML
.........

<!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" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Last-Modified" content="0" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="author" content="Lo [email protected] Web" />
<title>Documento sin t&iacute;tulo</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div class="header"><h1>Fonchi-XS</h1></div>

<div id="Cuerpo">
<div class="izquierda">
<ul>
<li><a>www.forosdelweb.com</a></li>
</ul>
</div>
<div class="derecha">&nbsp;</div>
<div class="principal">&nbsp;</div>
</div>
<div class="footer">&nbsp;</div>
</div>

</body>

</html>
  #7 (permalink)  
Antiguo 29/04/2008, 18:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con <> resolución.

Antes de nada he de decirte que la cuestión del ancho es muy personal, y auqnue te parezca mentira hay muchas variantes, entre las que tendrás que decidirte:

¿Tus visitantes verán siempre el mismo margen por los lados tengan la resolución que tengan? Ten en cuenta que esto podría descomponer tu diseño por completo si no lo has contemplado al estructurar tu página.

¿Qué ocurrira cuando en cualquier resolución se redimensione la ventana? ¿el tamaño se adaptará de forma fluida o se quedará estático?

¿Usarás un tamaño máximo y mínimo de tu página para que no se deforme hasta el infinito?

En fin, son cosas que hay que plantearse porque hay muchas reoluciones, muchos tamaños de pantalla, muchos tamaños de ventana, etcétera.

Lo mejor es tener todo esto bien claro antes de ponerse a diseñar, pero si no es así, es momento de no usar un único parche, porque otro día lo verás de otra forma y buscarás otro.

Mikel.
  #8 (permalink)  
Antiguo 29/04/2008, 20:11
Avatar de fonchi  
Fecha de Ingreso: septiembre-2006
Ubicación: Concepción
Mensajes: 170
Antigüedad: 11 años, 3 meses
Puntos: 0
Re: Problema con <> resolución.

Cita:
Iniciado por Mikmoro Ver Mensaje
Antes de nada he de decirte que la cuestión del ancho es muy personal, y auqnue te parezca mentira hay muchas variantes, entre las que tendrás que decidirte:

¿Tus visitantes verán siempre el mismo margen por los lados tengan la resolución que tengan? Ten en cuenta que esto podría descomponer tu diseño por completo si no lo has contemplado al estructurar tu página.

¿Qué ocurrira cuando en cualquier resolución se redimensione la ventana? ¿el tamaño se adaptará de forma fluida o se quedará estático?

¿Usarás un tamaño máximo y mínimo de tu página para que no se deforme hasta el infinito?

En fin, son cosas que hay que plantearse porque hay muchas reoluciones, muchos tamaños de pantalla, muchos tamaños de ventana, etcétera.

Lo mejor es tener todo esto bien claro antes de ponerse a diseñar, pero si no es así, es momento de no usar un único parche, porque otro día lo verás de otra forma y buscarás otro.

Mikel.


Gracias Mikel por tus tips:

Bueno como explique he comenzado hace poco, profundizaré en aquello
, esos puntos no los había contemplado, que buena aclaración.

Bien, por razones de trabajo doy(según yo) por cerrado el tema, ya que debo centrarme en c++, agradezco a todos los que ayudaron. Más adelante nos encontraremos nuevamente por este foro.

Salu2.
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 03:54.