Foros del Web » Creando para Internet » Diseño web »

adatpar a todas las pantallas.

Estas en el tema de adatpar a todas las pantallas. en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/06/2010, 20:57
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
adatpar a todas las pantallas.

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:

Última edición por Most; 05/06/2010 a las 23:52
  #2 (permalink)  
Antiguo 05/06/2010, 18:29
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: adatpar a todas las pantallas.

dando tamaños absolutos, es decir x pixeles, no porcentajes (puede que tengas 100% de "width" por defecto en alguna etiqueta "importante")
__________________
Libros Web, facil y gratis.
Manuales xHTML, CSS, JAVASCRIPT, AJAX
A mi me ayudaron
http://www.librosweb.es/
  #3 (permalink)  
Antiguo 05/06/2010, 19:43
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: adatpar a todas las pantallas.

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

Código CSS:
Ver original
  1. body{
  2. text-align:center;
  3. margin:0 auto;
  4. }
  5.  
  6. img.avatar{width: 50px; height: 50px;}
  7.  
  8. .enlace_imagen img {border:0}
  9.  
  10. .boton{
  11.   background-image:url(iniciar-sesion.png);
  12.   background-repeat:no-repeat;
  13.   height:21px;
  14.   width:102px;
  15.   background-position:center;
  16. }
  17.  
  18. #Layer-1 {
  19.   position: absolute;
  20.   left: +2px;
  21.   top: +2038px;
  22.   width: 1003px;
  23.   height: 31px;
  24.   z-index: 1;
  25.   background:url(pie-de-paguina.png);
  26. }
  27.  
  28. #Layer-2 {
  29.   position: absolute;
  30.   left: +831px;
  31.   top: +226px;
  32.   width: 160px;
  33.   height: 216px;
  34.   z-index: 2;
  35.   background:url(categorias.png);
  36. }
  37.  
  38.  
  39. #Layer-3 {
  40.   position: absolute;
  41.   left: +11px;
  42.   top: +905px;
  43.   width: 788px;
  44.   height: 222px;
  45.   z-index: 3;
  46.   background:url(contenido.png);
  47. }
  48.  
  49. #Layer-4 {
  50.   position: absolute;
  51.   left: +11px;
  52.   top: +1463px;
  53.   width: 788px;
  54.   height: 222px;
  55.   z-index: 4;
  56.   background:url(contenido.png);
  57. }
  58.  
  59. /* You named this layer Forma 32 copia 5 */
  60. #Layer-5 {
  61.   position: absolute;
  62.   left: +11px;
  63.   top: +1747px;
  64.   width: 788px;
  65.   height: 222px;
  66.   z-index: 5;
  67.   background:url(contenido.png);
  68. }
  69.  
  70. /* You named this layer Forma 32 copia 3 */
  71. #Layer-6 {
  72.   position: absolute;
  73.   left: +11px;
  74.   top: +1183px;
  75.   width: 788px;
  76.   height: 222px;
  77.   z-index: 6;
  78.   background:url(contenido.png);
  79. }
  80.  
  81. /* You named this layer Forma 32 */
  82. #Layer-7 {
  83.   position: absolute;
  84.   left: +10px;
  85.   top: +622px;
  86.   width: 788px;
  87.   height: 222px;
  88.   z-index: 7;
  89.   background:url(contenido.png);
  90. }
  91.  
  92. /* You named this layer Forma 32 copia */
  93. #Layer-8 {
  94.   position: absolute;
  95.   left: +11px;
  96.   top: +225px;
  97.   width: 788px;
  98.   height: 222px;
  99.   z-index: 8;
  100.   background:url(contenido.png);
  101. }
  102.  
  103. /* You named this layer Forma 34 */
  104. #Layer-9 {
  105.   position: absolute;
  106.   left: +830px;
  107.   top: +465px;
  108.   width: 162px;
  109.   height: 1547px;
  110.   z-index: 9;
  111.   background:url(publiidad.png);
  112. }
  113.  
  114. /* You named this layer Tope Derecha */
  115. #Layer-10 {
  116.   position: absolute;
  117.   left: +1004px;
  118.   top: +0px;
  119.   width: 2px;
  120.   height: 2069px;
  121.   z-index: 10;
  122.   background:url(tope.png);
  123. }
  124.  
  125. /* You named this layer Tope Izquierda */
  126. #Layer-11 {
  127.   position: absolute;
  128.   left: +0px;
  129.   top: -1px;
  130.   width: 2px;
  131.   height: 2070px;
  132.   z-index: 11;
  133.   background:url(tope.png);
  134.  
  135. }
  136.  
  137. /* You named this layer Pestaa */
  138. #Layer-12 {
  139.   position: absolute;
  140.   left: +2px;
  141.   top: +0px;
  142.   width: 1002px;
  143.   height: 169px;
  144.   z-index: 12;
  145.   background:url(encabezado.png);
  146. }
  147.  
  148. /* You named this layer Panel  de  Usuario */
  149. #Layer-13 {
  150.   position: absolute;
  151.   left: 746px;
  152.   top: 50px;
  153.   width: 130px;
  154.   height: 11px;
  155.   z-index: 13;
  156.   background:url(panel-usuario-texto.png);
  157. }
  158.  
  159. /* You named this layer El  seridor  de  esta  web  no */
  160. #Layer-14 {
  161.     position: absolute;
  162.     left: 289px;
  163.     top: 16px;
  164.     width: 435px;
  165.     height: 15px;
  166.     z-index: 14;
  167.     background:url(pie-texto.png);
  168. }
  169.  
  170. /* You named this layer Los  Ultimos  Estrenos */
  171. #Layer-15 {
  172.   position: absolute;
  173.   left: 325px;
  174.   top: 12px;
  175.   width: 152px;
  176.   height: 11px;
  177.   z-index: 15;
  178.   background:url(estrenos.png);
  179. }
  180.  
  181. /* You named this layer Musica */
  182. #Layer-16 {
  183.   position: absolute;
  184.   left: 315px;
  185.   top: 13px;
  186.   width: 162px;
  187.   height: 12px;
  188.   z-index: 16;
  189.   background:url(musica-texto.png);
  190. }
  191.  
  192. /* You named this layer Software */
  193. #Layer-17 {
  194.   position: absolute;
  195.   left: 292px;
  196.   top: 13px;
  197.   width: 205px;
  198.   height: 16px;
  199.   z-index: 17;
  200.   background:url(programas-texto.png)
  201. }
  202.  
  203. /* You named this layer Juegos */
  204. #Layer-18 {
  205.   position: absolute;
  206.   left: 307px;
  207.   top: 13px;
  208.   width: 181px;
  209.   height: 16px;
  210.   z-index: 18;
  211.   background:url(juegos-texto.png);
  212. }
  213.  
  214. /* You named this layer Series */
  215. #Layer-19 {
  216.   position: absolute;
  217.   left: 261px;
  218.   top: 13px;
  219.   width: 266px;
  220.   height: 14px;
  221.   z-index: 19;
  222.   background:url(series-texto.png);
  223. }
  224.  
  225. /* You named this layer Peliculas */
  226. #Layer-20 {
  227.   position: absolute;
  228.   left: 299px;
  229.   top: 12px;
  230.   width: 193px;
  231.   height: 12px;
  232.   z-index: 20;
  233.   background:url(ultimas-peliculas.png);
  234. }
  235.  
  236. /* You named this layer Categorias */
  237. #Layer-21 {
  238.   position: absolute;
  239.   left: 42px;
  240.   top: 16px;
  241.   width: 76px;
  242.   height: 15px;
  243.   z-index: 21;
  244.   background:url(categorias-texto.png);
  245. }
  246.  
  247. /* You named this layer Publicidad */
  248. #Layer-22 {
  249.   position: absolute;
  250.   left: 44px;
  251.   top: 17px;
  252.   width: 73px;
  253.   height: 11px;
  254.   z-index: 22;
  255.   background:url(publidad-texto.png);
  256. }
  257.  
  258. /* You named this layer todoenlacesorg */
  259. #Layer-23 {
  260.   position: absolute;
  261.   left: 77px;
  262.   top: 66px;
  263.   width: 378px;
  264.   height: 48px;
  265.   z-index: 23;
  266.   background:url(texto-encabeazdo-1.png);
  267. }
  268.  
  269. /* You named this layer PELICULAS  -  SERIES  -  JUEGOS */
  270. #Layer-24 {
  271.   position: absolute;
  272.   left: 90px;
  273.   top: 103px;
  274.   width: 338px;
  275.   height: 10px;
  276.   z-index: 24;
  277.   background:url(texto-encabezado-2.png);
  278. }
  279.  
  280. #Layer-25 {
  281. background:url("publicidad-contenido.png") repeat scroll 0 0 transparent;
  282. height:90px;
  283. left:26px;
  284. padding:8px 14px 9px;
  285. position:absolute;
  286. text-align:center;
  287. top:491px;
  288. width:729px;
  289. z-index:13;
  290. }
  291.  
  292. #Layer-26 {
  293.     position: absolute;
  294.     left: +664px;
  295.     top: +44px;
  296.     width: 294px;
  297.     height: 118px;
  298.     z-index: 1;
  299.     background:url(panel-usuario.png);
  300.     text-align: center;
  301. }
  302.  
  303. #Layer-27 {
  304.     position: absolute;
  305.     left: +664px;
  306.     top: +44px;
  307.     width: 294px;
  308.     height: 118px;
  309.     z-index: 1;
  310.     background:url(panel-usuario-login.png);
  311.     text-align: center;
  312. }
  313.  
  314. /* Here are some examples of how you might want to change the
  315.  * look and behavior of the links on your page.  Some examples for
  316.  * further customization are included in comments.  */
  317. a {
  318.   cursor: pointer;
  319.   outline: none;
  320. }
  321. a:link { color: #F88; }
  322. a:visited { color: #F88; }
  323. a:hover {
  324.   color: #F00;
  325.   /* text-decoration: underline; */
  326.   /* font-weight: bold; */
  327. }
  328.  
  329. #Layer-12 #Layer-26 table tr th table tr th {
  330.     text-align: left;
  331. }
  #4 (permalink)  
Antiguo 05/06/2010, 21:50
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: adatpar a todas las pantallas.

Cita:
Iniciado por Most Ver Mensaje
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
__________________
Libros Web, facil y gratis.
Manuales xHTML, CSS, JAVASCRIPT, AJAX
A mi me ayudaron
http://www.librosweb.es/
  #5 (permalink)  
Antiguo 05/06/2010, 23:52
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: adatpar a todas las pantallas.

arreglado, miralo...

  #6 (permalink)  
Antiguo 06/06/2010, 05:32
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: adatpar a todas las pantallas.

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.
__________________
Libros Web, facil y gratis.
Manuales xHTML, CSS, JAVASCRIPT, AJAX
A mi me ayudaron
http://www.librosweb.es/
  #7 (permalink)  
Antiguo 06/06/2010, 10:34
Avatar de Most  
Fecha de Ingreso: marzo-2009
Mensajes: 642
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: adatpar a todas las pantallas.

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

Código CSS:
Ver original
  1. body {
  2.     margin-left: 100%;
  3.     margin-top: 100%;
  4.     margin-right: 100%;
  5.     margin-bottom: 100%;
  6. }
  #8 (permalink)  
Antiguo 06/06/2010, 16:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: adatpar a todas las pantallas.

Hola:

Cita:
Iniciado por farve Ver Mensaje
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.

Cita:
Iniciado por Most Ver Mensaje
ok, entonces añadiendo esto, ya se deveria de ver bien en las 2 no?

Código CSS:
Ver original
  1. body {
  2.     margin-left: 100%;
  3.     margin-top: 100%;
  4.     margin-right: 100%;
  5.     margin-bottom: 100%;
  6. }
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.


Etiquetas: pantallas, todas
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 14:14.