Ajustar web a RESOLUCIÓN DE PANTALLA

YoelMontes · #1 (**permalink**) 05/03/2011, 08:11

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!

IsaBelM · #2 (**permalink**) 05/03/2011, 08:22

además de la capa con posición relativa, los demás elementos han de tener valores relativas no absolutos

YoelMontes · #3 (**permalink**) 05/03/2011, 08:36

Cita:

Iniciado por IsaBelM

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)

YoelMontes · #4 (**permalink**) 05/03/2011, 08:37

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

YoelMontes · #5 (**permalink**) 05/03/2011, 08:50

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???

arepavieja · #6 (**permalink**) 05/03/2011, 09:54

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.

YoelMontes · #7 (**permalink**) 05/03/2011, 10:03

Cita:

Iniciado por arepavieja

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.

YoelMontes · #8 (**permalink**) 05/03/2011, 12:00

Cita:

Iniciado por arepavieja

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;
}

IsaBelM · #9 (**permalink**) 05/03/2011, 14:23

añade esto, a ver que tal

Cita:

* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
}

YoelMontes · #10 (**permalink**) 05/03/2011, 14:46

Cita:

Iniciado por IsaBelM

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!!!

sanxuan · #11 (**permalink**) 05/03/2011, 14:56

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.

YoelMontes · #12 (**permalink**) 05/03/2011, 15:11

Cita:

Iniciado por sanxuan

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!

YoelMontes · #13 (**permalink**) 05/03/2011, 15:21

Mmmm, tic tac, quien tiene la respuesta?? :P

sanxuan · #14 (**permalink**) 05/03/2011, 16:07

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.

YoelMontes · #15 (**permalink**) 05/03/2011, 16:17

Cita:

Iniciado por sanxuan

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....

kike2lucas · #16 (**permalink**) 06/03/2011, 14:17

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.

YoelMontes · #17 (**permalink**) 08/03/2011, 09:59

Cita:

Iniciado por kike2lucas

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