Problema con <> resolución.

fonchi · #1 (**permalink**) 28/04/2008, 00:28

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

PatomaS · #2 (**permalink**) 28/04/2008, 01:45

Hola

Utiliza porcentajes en vez de medidas absolutas.

Felicidad

fonchi · #3 (**permalink**) 28/04/2008, 20:52

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

PatomaS · #4 (**permalink**) 29/04/2008, 01:15

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

Mikmoro · #5 (**permalink**) 29/04/2008, 02:58

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.

fonchi · #6 (**permalink**) 29/04/2008, 14:13

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 H@cemos Web" />
<title>Documento sin tí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"> </div>
<div class="principal"> </div>
</div>
<div class="footer"> </div>
</div>

</body>

</html>

Mikmoro · #7 (**permalink**) 29/04/2008, 17:27

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.

fonchi · #8 (**permalink**) 29/04/2008, 19:11

Cita:

Iniciado por Mikmoro

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.