Foros del Web » Creando para Internet » CSS »

Ajustar web a RESOLUCIÓN DE PANTALLA

Estas en el tema de Ajustar web a RESOLUCIÓN DE PANTALLA en el foro de CSS en Foros del Web. Estimados foreros!! He hecho una web en CSS, la cual...me da un problema (por lo que he visto bastante común!!). El caso es que he ...
  #1 (permalink)  
Antiguo 05/03/2011, 08:11
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Ajustar web a RESOLUCIÓN DE PANTALLA

Estimados foreros!!

He hecho una web en CSS, la cual...me da un problema (por lo que he visto bastante común!!).

El caso es que he leido bastante sobre ello, (tanto en este foro como en otras webs), pero no hay manera de que me entere, porque por más que lo intento, no soy capaz de dar con la solución.

Como dice el título, lo que necesito es ajustar la web a la resolución. Me sucede lo siguiente:

1.Subo la web.
2.Abro desde mi ordenador (Resolución 1366 x 768) . TODO OK
3.Abro la web desde un ordenador con resolución 1600 x 900. TODO OK (se ajusta todo (es verdad que se ancha un poco, pero bueno)), TODO OK.
4.ABRO LA WEB DESDE UN ORDENADOR CON RESOLUCIÓN 1024 X 768. Y AQUÍ VIENE EL PROBLEMA!!!!! Todo se ve bien, peeeeeero...como el ancho no cabe...en lugar de ajustarse a la pantalla, sale el scroll abajo para mover la página a izquierda y derecha...Y ESO ES LO QUE NO QUIERO!!!

Mi idea es que no salga el scroll, sino que se ajuste de tal modo que salga todo el contenido de la web visible.... CREO Y ESPERO ESTAR EXPLICÁNDOME BIEN........

Leyendo, he visto lo de poner todo el contenido de la web en una capa contenedor y darle a esta posición relativa además de ponerla en %....pero no sucede ni cambia nada!!!!
Otra cosa que he leido, es lo de hacer un css para cada resolución...peeeero...NO SE ME ENTERO BIEN DE COMO HACERLO!!!!!!!

Bueno...os adjunto tanto unas imágenes como los códigos HTML y el CSS para ver si me podeis echar una mano y decirme cuál es la mejor solución además de intentar explicármelo a ver si lo logro, porque menudos quebraderos de cabeza me están dando!! jaja



FOTO 1. RESOLUCIÓN 1366X768 (ASI DEBERIA DE VERSE SIEMPRE):




FOTO 2 RESOLUCIÓN 1024X768 (ESTE ES EL PROBLEMA DEL SCROLL DE ABAJO!!!)




SI NECESITAIS LOS CÓDIGOS EXPLICADME POR FAVOR CÓMO INSERTARLOS EN EL MENSAJE DEL FORO PORQUE ME DICE : ". El texto que has ingresado es muy largo (18991 caracteres). Por favor acórtalo a 10000 caracteres de largo."



Lo dicho, un saludo, y GRACIAS DE ANTEMANO!

Última edición por YoelMontes; 05/03/2011 a las 08:12 Razón: URL
  #2 (permalink)  
Antiguo 05/03/2011, 08:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

además de la capa con posición relativa, los demás elementos han de tener valores relativas no absolutos
  #3 (permalink)  
Antiguo 05/03/2011, 08:36
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por IsaBelM Ver Mensaje
además de la capa con posición relativa, los demás elementos han de tener valores relativas no absolutos


Si, eso también lo he mirado...y POR LO QUE HE VISTO, creo que está todo relativo (pero de todos modos, no tendia sentido que no salga en 1024 y si en las otras resoluciones, no?
Repito que si necesitais el código me lo digais y os lo pongo(decidme como ponerlo)
  #4 (permalink)  
Antiguo 05/03/2011, 08:37
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

cuelgo las fotos de e nuevo porque no se ven!!






  #5 (permalink)  
Antiguo 05/03/2011, 08:50
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Acabo de darme cuenta, que en el explorer también pasa eso aunque tenga la resolución con la que en mozilla se ve bien...........PUEDE IR ENFOCADO POR AQUÍ EL PROBLEMA???
  #6 (permalink)  
Antiguo 05/03/2011, 09:54
Avatar de arepavieja  
Fecha de Ingreso: marzo-2011
Mensajes: 203
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

debes ajustar el ancho de tus capas, si es con ellas que estás trabajando.

si tienes un div "contenedor" y el resto del contenido se ajusta a este, entonces no tendrías problemas, pero debes recordar que las etiquetas "body" y "html" también deben especificar el ancho para que pueda ser tomado correctamente, es decir, body, html y #contenedor deben tener un width al 100%. si pudieras enviarnos algo del CSS que tienes, sería mucho mejor para intentar solucionar el problema. Saludos.
  #7 (permalink)  
Antiguo 05/03/2011, 10:03
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por arepavieja Ver Mensaje
debes ajustar el ancho de tus capas, si es con ellas que estás trabajando.

si tienes un div "contenedor" y el resto del contenido se ajusta a este, entonces no tendrías problemas, pero debes recordar que las etiquetas "body" y "html" también deben especificar el ancho para que pueda ser tomado correctamente, es decir, body, html y #contenedor deben tener un width al 100%. si pudieras enviarnos algo del CSS que tienes, sería mucho mejor para intentar solucionar el problema. Saludos.
Eso está hecho, porque me he perdido un poco. En una media hora os envío el CSS (también necesitas el HTML???)

Un saludo y MUCHAS GRACIAS.
  #8 (permalink)  
Antiguo 05/03/2011, 12:00
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por arepavieja Ver Mensaje
debes ajustar el ancho de tus capas, si es con ellas que estás trabajando.

si tienes un div "contenedor" y el resto del contenido se ajusta a este, entonces no tendrías problemas, pero debes recordar que las etiquetas "body" y "html" también deben especificar el ancho para que pueda ser tomado correctamente, es decir, body, html y #contenedor deben tener un width al 100%. si pudieras enviarnos algo del CSS que tienes, sería mucho mejor para intentar solucionar el problema. Saludos.
Este es mi código CSS:


Código:
.cabecera {
	background-image: url(../cabeceralogo.gif);
	background-repeat: repeat;
}
TD{
	Color : #F4B100;
	Font-Family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	Font-Size : 9pt;
	position: relative;
	border-top-color: #FF9B00;
	border-right-color: #FF9B00;
	border-bottom-color: #FF9B00;
	border-left-color: #FF9B00;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	z-index: 0;
}


.news {
	Color : #006;
	Font-Family : Verdana, san-serif;
	Font-Size : 70%;
}

.hnews {
	Color : #FF9900;
	Font-Family : Verdana, san-serif;
	Font-Size : 80%;
	Font-weight : Bold;
}

.cop {
	Font-Size : 60%;
	Color : #393;
}

.btxt {Font-Size : 11px; Color : #4C7982;}

H1 {Font-Size : 105%; Color : #485679;}

.hh {Font-Size : 95%; Color : #FF9900; Font-Weight : Bold;}



INPUT.fr1 {
	BORDER-RIGHT: 1px solid;
	BORDER-TOP: 1px solid;
	BORDER-LEFT: 1px solid;
	BORDER-BOTTOM: 1px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
	BACKGROUND-COLOR: #ffffff;
	font-size: 10px;
	color: #393
}
.subm {
	BORDER-RIGHT: 1px solid;
	BORDER-TOP: 1px solid;
	BORDER-LEFT: 1px solid;
	BORDER-BOTTOM: 1px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
	BACKGROUND-COLOR: #ffffff;
	font-size: 10px;
	color: #393;
	font-weight : Bold;
}
.formt { FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif; BACKGROUND-COLOR: #ffffff ; font-size: 11px; color: #3333cc; font-weight: bold;}
textarea {
	BORDER-RIGHT: 1px solid;
	BORDER-TOP: 1px solid;
	BORDER-LEFT: 1px solid;
	BORDER-BOTTOM: 1px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
	BACKGROUND-COLOR: #ffffff;
	font-size: 10px;
	color: #393
}
SELECT {
	BORDER-RIGHT: 1px solid;
	BORDER-TOP: 1px solid;
	BORDER-LEFT: 1px solid;
	BORDER-BOTTOM: 1px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
	BACKGROUND-COLOR: #ffffff;
	font-size: 12px;
	color: #393
}
INPUT.btn { color : #CFD6EF; }

A {
	Color : #FFF;
	text-decoration : underline;
}
A:visited {
	Color : White;
	text-decoration : underline;
}
A:hover {
	Color : #FCC634;
	text-decoration : overline;
}
A:active {
	Color : #FFF;
	text-decoration : none;
	font-weight: bold;
}

A.bmnu {
	Color : #4C7982;
	Font-Family : Verdana, san-serif;
	Font-Size : 15pt;
	text-decoration : none;
}
A.bmnu:visited {
	Color : #4C7982;
	Font-Family : Verdana, san-serif;
	Font-Size : 90%;
	text-decoration : none;
}
A.bmnu:hover {
	Color : #4C7982;
	Font-Family : Verdana, san-serif;
	Font-Size : 90%;
	text-decoration : underline;
}
A.bmnu:active {
	Color : #4C7982;
	Font-Family : Verdana, san-serif;
	Font-Size : 90%;
	text-decoration : underline;
}


A.lc {
	Color : #008000;
	text-decoration : underline;
}
A.lc:visited {
	Color : #008000;
	text-decoration : underline;
}
A.lc:hover {
	Color : #008000;
	text-decoration : none;
}
A.lc:active {
	Color : #008000;
	text-decoration : none;
}
menuprincipal {
	font-size: 10%;
}
.Textnegrita {
	font-size: 10pt;
	color: #CCC;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	cursor: crosshair;
	font-style: normal;
	text-decoration: underline overline;
}
.otrotexto {
	font-size: 16px;
	font-style: italic;
}
.TERECOGEMOS {
	font-size: 25px;
	font-weight: bold;
	color: #FF0;
	font-style: normal;
}
.tablacentral {
	border: thick none #FAB600;
}
.destacadoautoescuela2 {
	color: #FF0;
	text-decoration: underline overline blink;
	text-transform: none;
	font-weight: bold;
	font-style: normal;
	font-size: 24px;
}
.lema {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12pt;
	color: #FF9B00;
	font-weight: bold;
	font-style: normal;
}
.tablacentral tr td .otrotexto .Textnegrita {
	text-align: left;
}
.DESTACADOLEMA {
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: underline overline;
	font-size: 16pt;
	color: #FF0;
	font-weight: bold;
}
.tipoENLACES {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 09pt;
	color: #006;
	text-decoration: underline overline;
	font-weight: bold;
}
#telefonos {
	background-repeat: no-repeat;
}
  #9 (permalink)  
Antiguo 05/03/2011, 14:23
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

añade esto, a ver que tal
Cita:
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
}
  #10 (permalink)  
Antiguo 05/03/2011, 14:46
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por IsaBelM Ver Mensaje
añade esto, a ver que tal
Nada de nada...cuando introduzco ese código..se va toda la web y se ve la página en blanco!!!
  #11 (permalink)  
Antiguo 05/03/2011, 14:56
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Tener el HTML ayuda bastante.
Lo ideal es poner un enlace a la página si la has subido a la red.
Se puede jugar con márgenes en porcentaje y un ancho máximo del contenedor de la página. Sería necesario que entrase el contenido en los 1024px.
Si no lo hiciera, se puede usar una posición flotante en la columna derecha para que se acomode bajo la galería de imágenes si la resolución es pequeña.
También se pueden usar porcentajes en la imagen de la cabecera para ajustarle el ancho.
  #12 (permalink)  
Antiguo 05/03/2011, 15:11
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por sanxuan Ver Mensaje
Tener el HTML ayuda bastante.
Lo ideal es poner un enlace a la página si la has subido a la red.
Se puede jugar con márgenes en porcentaje y un ancho máximo del contenedor de la página. Sería necesario que entrase el contenido en los 1024px.
Si no lo hiciera, se puede usar una posición flotante en la columna derecha para que se acomode bajo la galería de imágenes si la resolución es pequeña.
También se pueden usar porcentajes en la imagen de la cabecera para ajustarle el ancho.


El problema es que no me cabe aquí todo el HTML!!!!

Mirad, aquí teneis el enlace:

www.sayerepair.com/autoescuelacarlos32h.html


Dime como inserto todo el codigo aqui!!! Gracias por todo!
  #13 (permalink)  
Antiguo 05/03/2011, 15:21
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Mmmm, tic tac, quien tiene la respuesta?? :P
  #14 (permalink)  
Antiguo 05/03/2011, 16:07
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Proporcionando el enlace no hace falta insertar el código.
El mayor problema que veo es que la página está maquetada con tablas, por lo que la solución que proponía no resulta evidente de hacer. Conlleva bastantes cambios.
He comprobado los anchos de las columnas y entraría en 1024px.
Si no tienes pensado hacer cambios más importantes en la página no creo que compense lo que planteas, aunque parezca antiestético es mejor dejar la barra de desplazamiento.
Si te planteas cambiar la página piensa en usar divs, también se conocen como capas, para realizar la maquetación.
De haber estado estructurada así, cambiar la página podría haber sido cuestión de algunos minutos, basta cambiar unas pocas reglas. Al estar hecha con tablas, los cambios requieren bastante tiempo, la mayoría de las medidas están en el propio HTML y repetidas en múltiples etiquetas.
Lamento no ser de mucha ayuda.
  #15 (permalink)  
Antiguo 05/03/2011, 16:17
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por sanxuan Ver Mensaje
Proporcionando el enlace no hace falta insertar el código.
El mayor problema que veo es que la página está maquetada con tablas, por lo que la solución que proponía no resulta evidente de hacer. Conlleva bastantes cambios.
He comprobado los anchos de las columnas y entraría en 1024px.
Si no tienes pensado hacer cambios más importantes en la página no creo que compense lo que planteas, aunque parezca antiestético es mejor dejar la barra de desplazamiento.
Si te planteas cambiar la página piensa en usar divs, también se conocen como capas, para realizar la maquetación.
De haber estado estructurada así, cambiar la página podría haber sido cuestión de algunos minutos, basta cambiar unas pocas reglas. Al estar hecha con tablas, los cambios requieren bastante tiempo, la mayoría de las medidas están en el propio HTML y repetidas en múltiples etiquetas.
Lamento no ser de mucha ayuda.


Pufff..me has dejado frio....imaginaba que el problema podían ser las tablas malditas.
Entonces...planteo:

1. No existe otro posible problema, no?

2. El enmaquetar todo en tablas..........es una locura, verdad? No dispongo de años tampoco para hacer la web xD....

Un saludo y gracias....
  #16 (permalink)  
Antiguo 06/03/2011, 14:17
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Yoel: estuve viendo tu web, y ya la imagen de cabecera tiene un ancho de 1358 píxels, por lo cual jamás va a encajar en un monitor de definición de ancho a 1024 píxels.
Prueba en hacerla más angosta (1000 px) y seguramente encontrarás la solución a tu problema. Tendrás también que ajustar el tamaño de las celdas que tienen tamaño en píxels.
  #17 (permalink)  
Antiguo 08/03/2011, 09:59
Avatar de YoelMontes  
Fecha de Ingreso: febrero-2011
Mensajes: 36
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Ajustar web a RESOLUCIÓN DE PANTALLA

Cita:
Iniciado por kike2lucas Ver Mensaje
Yoel: estuve viendo tu web, y ya la imagen de cabecera tiene un ancho de 1358 píxels, por lo cual jamás va a encajar en un monitor de definición de ancho a 1024 píxels.
Prueba en hacerla más angosta (1000 px) y seguramente encontrarás la solución a tu problema. Tendrás también que ajustar el tamaño de las celdas que tienen tamaño en píxels.
Kike! Tienes toda la razón. Lo averigué hace un par de días...y lo solucioné! No lo avisé antes por aquí porque como tampoco contestaba nadie..pero perfecto, he cambiado todo a tamaño de 1000 px para estar entre medias mas o menos de todo y ahora va bien.

Muchas gracias a TODOS por vuestras respuestas. Un saludo!

Cita:
SOLUCIONADO

Última edición por YoelMontes; 08/03/2011 a las 10:37

Etiquetas: pantalla, resolución
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:55.