adatpar a todas las pantallas.

[Most]

Hola, el diseño que tengo de la web, segun en que pantalla se vea se ve mas grande o mas pequeño, se podria hacer para que se vea en todas las pantallas =?

aqui en mi pantalla:


aqui en 1 mas grande:

[farve]

dando tamaños absolutos, es decir x pixeles, no porcentajes (puede que tengas 100% de "width" por defecto en alguna etiqueta "importante")

[Most]

:| no se, no he visto nada mal, asi lo tengo puesto:

Código CSS:

body{
text-align:center;
margin:0 auto;
}
 
img.avatar{width: 50px; height: 50px;}
 
.enlace_imagen img {border:0}
 
.boton{
  background-image:url(iniciar-sesion.png);
  background-repeat:no-repeat;
  height:21px;
  width:102px;
  background-position:center;
}
 
#Layer-1 {
  position: absolute;
  left: +2px;
  top: +2038px;
  width: 1003px;
  height: 31px;
  z-index: 1;
  background:url(pie-de-paguina.png);
}
 
#Layer-2 {
  position: absolute;
  left: +831px;
  top: +226px;
  width: 160px;
  height: 216px;
  z-index: 2;
  background:url(categorias.png);
}
 
 
#Layer-3 {
  position: absolute;
  left: +11px;
  top: +905px;
  width: 788px;
  height: 222px;
  z-index: 3;
  background:url(contenido.png);
}
 
#Layer-4 {
  position: absolute;
  left: +11px;
  top: +1463px;
  width: 788px;
  height: 222px;
  z-index: 4;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia 5 */
#Layer-5 {
  position: absolute;
  left: +11px;
  top: +1747px;
  width: 788px;
  height: 222px;
  z-index: 5;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia 3 */
#Layer-6 {
  position: absolute;
  left: +11px;
  top: +1183px;
  width: 788px;
  height: 222px;
  z-index: 6;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 */
#Layer-7 {
  position: absolute;
  left: +10px;
  top: +622px;
  width: 788px;
  height: 222px;
  z-index: 7;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia */
#Layer-8 {
  position: absolute;
  left: +11px;
  top: +225px;
  width: 788px;
  height: 222px;
  z-index: 8;
  background:url(contenido.png);
}
 
/* You named this layer Forma 34 */
#Layer-9 {
  position: absolute;
  left: +830px;
  top: +465px;
  width: 162px;
  height: 1547px;
  z-index: 9;
  background:url(publiidad.png);
}
 
/* You named this layer Tope Derecha */
#Layer-10 {
  position: absolute;
  left: +1004px;
  top: +0px;
  width: 2px;
  height: 2069px;
  z-index: 10;
  background:url(tope.png);
}
 
/* You named this layer Tope Izquierda */
#Layer-11 {
  position: absolute;
  left: +0px;
  top: -1px;
  width: 2px;
  height: 2070px;
  z-index: 11;
  background:url(tope.png);
  
}
 
/* You named this layer Pestaa */
#Layer-12 {
  position: absolute;
  left: +2px;
  top: +0px;
  width: 1002px;
  height: 169px;
  z-index: 12;
  background:url(encabezado.png);
}
 
/* You named this layer Panel  de  Usuario */
#Layer-13 {
  position: absolute;
  left: 746px;
  top: 50px;
  width: 130px;
  height: 11px;
  z-index: 13;
  background:url(panel-usuario-texto.png);
}
 
/* You named this layer El  seridor  de  esta  web  no */
#Layer-14 {
    position: absolute;
    left: 289px;
    top: 16px;
    width: 435px;
    height: 15px;
    z-index: 14;
    background:url(pie-texto.png);
}
 
/* You named this layer Los  Ultimos  Estrenos */
#Layer-15 {
  position: absolute;
  left: 325px;
  top: 12px;
  width: 152px;
  height: 11px;
  z-index: 15;
  background:url(estrenos.png);
}
 
/* You named this layer Musica */
#Layer-16 {
  position: absolute;
  left: 315px;
  top: 13px;
  width: 162px;
  height: 12px;
  z-index: 16;
  background:url(musica-texto.png);
}
 
/* You named this layer Software */
#Layer-17 {
  position: absolute;
  left: 292px;
  top: 13px;
  width: 205px;
  height: 16px;
  z-index: 17;
  background:url(programas-texto.png)
}
 
/* You named this layer Juegos */
#Layer-18 {
  position: absolute;
  left: 307px;
  top: 13px;
  width: 181px;
  height: 16px;
  z-index: 18;
  background:url(juegos-texto.png);
}
 
/* You named this layer Series */
#Layer-19 {
  position: absolute;
  left: 261px;
  top: 13px;
  width: 266px;
  height: 14px;
  z-index: 19;
  background:url(series-texto.png);
}
 
/* You named this layer Peliculas */
#Layer-20 {
  position: absolute;
  left: 299px;
  top: 12px;
  width: 193px;
  height: 12px;
  z-index: 20;
  background:url(ultimas-peliculas.png);
}
 
/* You named this layer Categorias */
#Layer-21 {
  position: absolute;
  left: 42px;
  top: 16px;
  width: 76px;
  height: 15px;
  z-index: 21;
  background:url(categorias-texto.png);
}
 
/* You named this layer Publicidad */
#Layer-22 {
  position: absolute;
  left: 44px;
  top: 17px;
  width: 73px;
  height: 11px;
  z-index: 22;
  background:url(publidad-texto.png);
}
 
/* You named this layer todoenlacesorg */
#Layer-23 {
  position: absolute;
  left: 77px;
  top: 66px;
  width: 378px;
  height: 48px;
  z-index: 23;
  background:url(texto-encabeazdo-1.png);
}
 
/* You named this layer PELICULAS  -  SERIES  -  JUEGOS */
#Layer-24 {
  position: absolute;
  left: 90px;
  top: 103px;
  width: 338px;
  height: 10px;
  z-index: 24;
  background:url(texto-encabezado-2.png);
}
 
#Layer-25 {
background:url("publicidad-contenido.png") repeat scroll 0 0 transparent;
height:90px;
left:26px;
padding:8px 14px 9px;
position:absolute;
text-align:center;
top:491px;
width:729px;
z-index:13;
}
 
#Layer-26 {
    position: absolute;
    left: +664px;
    top: +44px;
    width: 294px;
    height: 118px;
    z-index: 1;
    background:url(panel-usuario.png);
    text-align: center;
}
 
#Layer-27 {
    position: absolute;
    left: +664px;
    top: +44px;
    width: 294px;
    height: 118px;
    z-index: 1;
    background:url(panel-usuario-login.png);
    text-align: center;
}
 
/* Here are some examples of how you might want to change the
 * look and behavior of the links on your page.  Some examples for
 * further customization are included in comments.  */
a {
  cursor: pointer;
  outline: none;
}
a:link { color: #F88; }
a:visited { color: #F88; }
a:hover {
  color: #F00;
  /* text-decoration: underline; */
  /* font-weight: bold; */
}
 
#Layer-12 #Layer-26 table tr th table tr th {
    text-align: left;
}
 

[farve]

Iniciado por Most

Hola, el diseño que tengo de la web, segun en que pantalla se vea se ve mas grande o mas pequeño, se podria hacer para que se vea en todas las pantallas =?

La segunda imagen no se ve (donde dices "aqui en 1 mas grande")

Cuando dices que se vea igual, que quieres decir?
Que tenga los mismos centimetros de ancho??

Cual es el problema? que cuando entras desde un ordenador con mas resolución te parece mas pequeño?

si es eso, cambia el css de pixeles (px) a centimetros (cm) o pulgadas (in)

p.ej:

Código:

div { width: 20cm; }

Aunque lo que mas se usa es px o %:
Normalmente se utilizan píxel y porcentajes para definir el layout del documento (básicamente, la anchura de las columnas y elementos de las páginas) y em y porcentajes para el tamaño de letra de los textos.

Si quieres mas info leete esto: Unidades de Medida

[Most]

arreglado, miralo...

[farve]

a ver eso no es ningun error.
simplemente sera que en la 1ª tienes una resolucion de 1024x768 y en la segunda de mas, puede que 1280x800 o 1440x900, y si tienes puesto un ancho de 1003px se ve asi.

Que quieres que te ocupe toda la pantalla en las dos? pon en el css 100% en vez de "nosecuantos px".
Si quieres que te ocupe los mismos centrimetros lo que te dije, cm.

[Most]

ok, entonces añadiendo esto, ya se deveria de ver bien en las 2 no?

Código CSS:

body {
    margin-left: 100%;
    margin-top: 100%;
    margin-right: 100%;
    margin-bottom: 100%;
}
 

[jomaruro]

Hola:

Iniciado por farve

si es eso, cambia el css de pixeles (px) a centimetros (cm) o pulgadas (in)

Con esto el problema persistirá, ¿Qué diferencia hay en hacerlo en px o cm o in? Las dimensiones siguen siendo fijas.

Iniciado por Most

ok, entonces añadiendo esto, ya se deveria de ver bien en las 2 no?

Código CSS:

body {
    margin-left: 100%;
    margin-top: 100%;
    margin-right: 100%;
    margin-bottom: 100%;
}
 

Haciendolo así ocuparás siempre el ancho total de la pantalla, pero corres el riesgo que que los div's se te descoloquen.

La mejor solución es usar un contenedor de tamaño fijo (normalmente de 960px para resoluciones de 1024) que englobe toda la web y centrarlo, de esta forma no descolocas el contenido y lo único que cambia según la resolución son los márgenes laterales.

Saludos.