ajustar web a la resolucion de los monitores?

oscarza · #1 (**permalink**) 24/06/2009, 13:41

Hola amigos, estoy haciendo esta web( www punto kingdomtakers punto com ), lo que pasa es que hasta ahora pienso que ella no se ajusta a diferentes resoluciones, que deberia cambiar en el css para lograr que se ajuste??
Se que se hace en vez de "px" con "%" pero no entiendo bien esto todavia

oscarza · #2 (**permalink**) 24/06/2009, 14:11

algun tutorial o manual que hable sobre esto???

gVenom · #3 (**permalink**) 24/06/2009, 14:32

Cómo ver igual tu página en todos los navegadores con CSS

Declaración de intenciones:
En este tip, explicaré cómo conseguir que, mediante CSS, tus páginas WEB se vean igual, de la misma manera en todos los navegadores (importantes: Internet Explorer, FireFox, y Opera)

Tal y como está la estandarización de IE respecto a las normas de la W3C, se hace difícil conseguir que la misma web, sea vista de la misma manera en IE, que en los navegadores buenos (FireFox y Opera)

Como norma general, lo adecuado sería diseñar para FireFox (pues podemos presuponerle un seguimiento aceptablemente fiel de los estándares), y luego retocar los errores que se vean en Internet Explorer.
Opera (el segundo "gran navegador"), lo obvio, pues tiene menos volumen de mercado, y además también es aceptablemente fiel a los estándares, con lo que las últimas versiones de Opera, suelen ofrecer los mismos resultados de visualización que FireFox (lo que es todo un alivio). Aún así, incluyo más información a este respecto, y otros, al final del tip
REQUSITOS PREVIOS:
Es imprescindible, para el correcto seguimiento de este tip, un conocimiento adecuado y con soltura de CSS (en realidad, el conocimiento del CSS debe ser obligatorio para cualquiera que quiera diseñar para la WEB).
Si no sabes lo que es el CSS, o no lo manejas (bien), te recomiendo que antes de seguir, te revises los manuales de CSS que encontrarás en cristalab, en particular estos dos:
• La guía de iniciación, para aprender de qué va el tema.
• La Guía de Referencia CSS 2, con ¿todas? (las más importantes) propiedades aplicables por CSS.
(Ambos, manuales de Ramm)

Para proceder como digo, lo imprescindible será que cuando diseñes, revises primeramente los cambios con Firefox, y después intentes "parchear" los resultados no pretendidos en IExplorer, para ello, podrás emplear lo que llamamos "hacks" de CSS.
Procedimiento:
1. Lo primero, es definir la regla CSS general, que se aplicará a cualquier navegador.
2. Lo segundo, es aplicar las excepciones (hacks), en el orden de "más general>más particular".
Recordad, que impera la ley de cascada, con lo que según se van posponiendo una tras otra, se van sobreescribiendo las directivas preexistentes.
Así, por ejemplo, si tuviéramos problemas con el margen de un elemento con class="div", haríamos:
Código :
.div {margin-bottom:20px; /* se verá en todos los navegadores */
#margin-bottom:15px; /* en todos los IE, se verá con 15px */
//margin-bottom:15px; /* este hack, es equivalente al anterior: todos los IE */
_margin-bottom:10px; /* en todos los IE6, o inferior, se verá con 10px */
}
Que se lería: Para cualquier navegador, el margen es de 20px, pero s i usas IE, que sea de 15px, pero si usas un IE6, o inferior, que sea de 10px.

SI CON ESTO TE DAS POR SATISFECHO, AQUÍ TERMINA TU LECTURA.
Hasta aquí, bien.
Pero... ¿y si eres un fanático de la "validación"?
Pues entonces, verás que los "hacks", son entendidos como errores por el validador, con lo que no obtendrás el verde.
En ese caso, puedes usar lo que llamo "la tontería del IE"; es decir, en lugar de los "hacks", usar la "credulidad" del IE para leer elementos "inexistentes", como el " * ".
Veamos con el mismo ejemplo:
Código :
.div {margin-bottom:20px;} /* se verá en todos los navegadores */
* html .div {margin-bottom:15px;} /* Esta línea se la creen todos los IE6, o inferiores */
*+html .div {margin-bottom:15px;} /* Esta línea sólo se la cree IE7 */
Como veréis, esto ya no son "hacks" (errores) de cara al validador, sino símplemente selectores que no existen (porque no puede haber nada ( * ), encima del "<html>")

Con esto, obtendréis el verde que esperabais.
Otras soluciones, podrían ser:
• Un script de PHP, que te muestre una hoja de estilo según el navegador que visita la web.
• Usar comentarios condicionales, para mostrar hojas CSS alternativas:






EPILOGO
Has llegado hasta el final. Enhorabuena.
Si buscas "hacks" para Opera (más correctamente: líneas que sólo lea Opera), la cosa está más difícil, pues hay menos documentación, y Opera cambia mucho la interpretación (de sus bugs) del CSS de una versión a la siguiente.
Pero algo he encontrado:
Código :
head:first-child+body .div {margin-bottom:20px;} /* Esta línea pasa desapercibida en Opera6, e IE6, e inferiores a ambos */
html>body .div { mar\gin-bottom:20px; } /* Esta línea pasa desapercibida en Opera5, e IE5, e inferiores a ambos */
Estas líneas, pasan desapercibidas en Opera 6, y 5, espectivamente, con lo que se podría definir en ellas, propiedades CSS que no se quiere sigan estos navegadores.
Código :
html:first-child .div { margin-bottom:15px; } /* Esta línea sólo la entiende Opera9 */
Este "hack", sería el que se debería usar para corregir errores en el Opera 9 (último actualmente)

Si buscas muuuuuchos más hacks, puedes encontrar una buena lista aquí.
Si buscas reglas "@import", que sólo sean leídas por algunos navegadores, aquí una gran lista.

Si aún necesitas más documentación, San Google tiene muchísima. Con esta búsqueda, o añadiéndole el navegador en cuestión, tendrás una buena lista de sitios para consultar.

Como ya dije en mi anterior tip, nuestro objetivo, es conseguir que nuestra WEB, se vea igual en todos los navegadores (o al menos, en los más importantes), pero muchas veces, el problema viene por la manera que tiene cada navegador de mostrar los elementos.

Por ejemplo, si sólo pones:
Código :
<p>contenido</p>
Y lo renderizas con varios navegadores, verás que hay diferencias en el resultado entre algunos de ellos.
¿por qué?
Pues como digo, porque cada navegador define como cree conveniente los margenes que le pone al elemento <p>, su padding, su tamaño de fuente, posición relativa...
Esto no sólo le ocurre a los <p>, sino a casi todos los elementos que estamos acostumbrados a usar.
Y cada navegador, tiene su "estilo por defecto". Y nunca coinciden...

¿cómo lo arreglamos?
Reseteando el CSS.

Reseteando el CSS
Mediante este sencillísimo concepto, le diremos al navegador que visualice nuestra WEB, que no queremos que aplique "su estilo", sino el que definamos nosotros.
Para ello, sólo tenemos que "inicializar", al principio de nuestra hoja de estilos, la propiedad que queremos "resetear", del elemento que queramos tener "reseteado".

Por ejemplo, el "reset" más conocido, es:
Código :
* {margin:0px;padding:0px;}
¿Qué hace esto?
Pues puesto al comienzo de nuestra hoja de CSS, le dice al navegador:
<<Quiero que le quites el margen y padding por defecto, a todos los elementos de mi WEB>>
Desde entonces, todos los navegadores le quitarán el margen/padding a cualquier elemento, en consecuencia, este aspecto será igual en cualquier navegador.

Después del reset, claro, tenemos que definir los valores que queramos usar.

¿y hay algún reset más completo?
Hay muchos.
Encontraréis "CSS reset" para todos los gustos, unos más extensos que otros, en Google

Yo, suelo usar éste, ligerísimamente modificado, que encontré por ahí:
Código :
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{vertical-align: baseline border: 0; outline: 0;
font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}
* {margin: 0; padding: 0}
body {line-height: 1; height:100%}
:focus {outline: 0}
ol, ul {list-style: none}
table {border-collapse: collapse; border-spacing: 0;}
blockquote, q {quotes: "" ""}
hr {border: 0; color: #000; background-color: #000; height:1px}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
Como veréis, no sólo quita el margen/padding a todos los elementos, sino que hace otras muchas cosas, como "alinear abajo" los elementos de línea, o hacer que se hereden las fuentes en todos los elementos, o quitar el "marco punteado" de los elementos cuando los "seleccionamos", o aplanar los bordes de las tablas, o poner a 1px las líneas <hr>... etcétera.

CONSEJOS:
• Para usar este reset (o cualquier otro), has de ponerlo al principio de la primera declaración CSS que tengas, pues si no, te sobreescribirá las anteriores ("regla de la cascada")
• Cuando uses un "reset", resetea al principio de empezar a diseñar. Si aplicas este reset a un documento que ya tengas hecho y terminado, verás como muchas cosas puede que se te descuadren, y tendrás que "redefinirlas".
• Una buena idea, puede ser, guardar el reset anterior en un documento nuevo (reset.css), y "linkearlo" al principio de vuestras webs, cuando empeceis a trabajar, de la siguiente manera:
Código :
<link href="reset.css" rel="stylesheet" type="text/css" />

Si ya has llegado hasta aquí, puede que aún necesites un último empujón. Puede que aún se te resistan algunas partes de tu WEB, o que no termine de encajar algún div.
Pasaremos entonces a la última parte de esta serie:
Los Hacks de CSS.
______________________________________
Disclaimer:
Como bien dice The Fricky!, los "trucos" del próximo tip son un último recurso). Antes, hay que haberse esforzado en conseguir una homogeneidad visiblemente aceptable en todos los navegadores. Sólo entonces, cuando no nos quedan más cartuchos, se puede abordar el problema desde el lado de los "trucos."

gVenom · #4 (**permalink**) 24/06/2009, 14:33

La importancia de DOCTYPE y de validar XHTML y CSS

Conseguir que tu WEB se vea por igual en cualquier navegador, es muchas veces una ardua tarea.
Hacer que lo consigas, es el objetivo de esta serie de tres tips de CSS.

Yo veo tres problemas principales, que son los causantes de esas "diferencias de visualización" que observamos cuando vemos nuestra WEB con distintos navegadores:
1. Que no escribimos "código limpio", es decir, que somos unos "chapuzas", que no usamos un DOCTYPE, o no lo hacemos correctamente.
2. Que los navegadores tienen como "predefinidas" algunas maneras de ver los diferentes elementos del xHTML (y esas maneras, no suelen coincidir unas con otras).
3. Que ciertas reglas de CSS, no son soportadas por algunos navegadores (IE).
En este tip trataremos el primero de los tres puntos.
En dos tip sucesivos, los dos siguientes:
• Resetear el CSS
• Hacks de CSS (para IE) (y Opera).

Escribir código "limpio":

En numerosas ocasiones, los problemas se deben a que no escribimos el código de manera adecuada. No cerramos elementos, los cerramos en distinto orden a como los abrimos, o escribimos mal la sintaxis de los mismos.
En ocasiones, también se debe a que usamos, para ciertos fines, elementos que no se deberían usar para ellos (lo que ocurre muchas veces que se usa un tag <table>)

Es muy importante escribir correctamente tanto el código CSS como el xHTML. Y sobre todo, este último, pues no podemos olvidar que xHTML, es la base de la WEB, y el esqueleto sobre el que se aplicará el CSS.

Para que el código xHTML sea adecuado y rígido, existe el DOCTYPE:
El DOCTYPE:
Sin extenderme mucho, es una declaración para hacer que el navegador, entienda qué es lo que va a recibir, y cómo deberá procesarlo.
De esta manera, la misma página, con distintos doctype, o peor aún, sin él, se verá de distinta manera, incluso en el mismo navegador.
Por ello, es necesario elegir adecuadamente un doctype, y seguirlo.

¿Las posibilidades? Unas cuantas, pero mi primer consejo es que se usen Doctype para xHTML.
El segundo: que se elija "xHTML STRICT".
De esta manera, le advertiremos al navegador de que va a recibir código xHTML estándar (W3C).

Si es la primer vez que lees este palabro: "doctype", vas a tener que revisar antes algún que otro manual.
Propongo:
• ¿Por qué usar un doctype? (en castellano)
• ¿Qué doctypes existen? (in english)
• Resumen rápido (de la es.wikipedia.org).

¿Qué pasa si no ponemos doctype?
Pues que tenemos el "desastre" casi garantizado.
El navegador entrará en "QuircksMmode", y hará su "interpretación particular" de nuestra WEB, de manera que muy raramente coincidirá el resultado de los demás navegadores.

¿Cómo declaro el DOCTYPE?
Añadiendo una sencilla primera línea a nuestra página WEB:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Por ejemplo, si usamos xHTML 1.0 Strict, como recomiendo.

¿Qué doctype elijo?
Pues de la lista que puedes encontrar en los links que cité arriba, el que se adapte a tus necesidades.
Pero en principio:
- Si no escribes código xHTML limpio, mejor intenta buscar algún manual.
Si ya sabes HTML, será muy fácil acostumbrarte a la "nueva manera" de trabajar. (mientras, puedes usar HTML4.0 Transitional)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- Si escribes xHTML limpio, imagino que ya estarás usando xHTML 1.0 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Intenta pasar a usar XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Verás que es más exigente, y que algunas etiquetas y atributos no se usan, pero es el precio del progreso.

Si eres uno de los "machos" y "obsesos" de la validación, intenta validar con: xHTML 1.1 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Verás que es mucho más exigente, y que requiere algún que otro conocimiento, pero si lo consigues (se puede), estarás produciendo páginas WEB altamente rigurosas con los estándares, mucho más compatibles, y plenamente accesibles para los medios que están por llegar.

Para otro tipo de documentos, hay otros doctypes (también listados en los links que puse), como los que implementan MathML, o SVG (o la combinación entre ellos y los primeros)

Y ahora, ¿Cómo comprobar si está todo bien?
VALIDAR LA WEB:
Se trata de verificar que el código (x)HTML de tu WEB es coherente con su doctype.
¿Cómo hacerlo? Pues mediante el validador de la W3C.
Con esta herramienta, podrás determinar si tu página pasa el estándar declarado por el doctype, y de esta manera, asegurar su fidelidad a las normas que tu doctype fijó.

Por ejemplo, el resultado de la validación del xHTML de cristalab, se puede ver aquí.
VALIDAR EL CSS:
Se trata de verificar que el CSS que hemos escrito, es igualmente adecuado y sin errores.
Esto debemos hacerlo para asegurarnos la compatibilidad entre navegadores.
¿Cómo? Pues la W3C también nos ofrece su Validador de CSS, que funciona de manera similar al de (x)HTML

oscarza · #5 (**permalink**) 24/06/2009, 14:55

mmm nada que ver con mi pregunta, pero bueno gracias, voy a leerme los manuales de cristalab aver si acaso, a ver sale algo de lo que pregunté!

gVenom · #6 (**permalink**) 24/06/2009, 15:00

upss, jaja, tienes razon, me deje llevar a la carrera y confundi la respuesta, sorry

Kwarwer · #7 (**permalink**) 25/06/2009, 05:38

Si no recuerdo mal eso se conseguía con JavaScript y utilizando diferentes hojas de estilo. No te recomiendo los porcentajes en CSS, dan demasiados problemas.

angelosss · #8 (**permalink**) 25/06/2009, 06:08

hola queria saber si me podeis ayudar con esto que de javascript y las hojas de estilo.

Cita:

Iniciado por Kwarwer

Si no recuerdo mal eso se conseguía con JavaScript y utilizando diferentes hojas de estilo. No te recomiendo los porcentajes en CSS, dan demasiados problemas.

kseso? · #9 (**permalink**) 25/06/2009, 06:12

Cita:

Iniciado por Kwarwer

Si no recuerdo mal eso se conseguía con JavaScript y utilizando diferentes hojas de estilo. No te recomiendo los porcentajes en CSS, dan demasiados problemas.

Mejor bórralo. Se más selectivo con los recuerdo y evita este tipo de recomendaciones.

Unas páginas donde podrás ver algunas formas de hacerlo y plantillas (layouts):
http://matthewjamestaylor.com/
http://www.cssplay.co.uk/layouts/fle...al-height.html
"liquid layouts" + css by google
"plantillas liquidas" + css por google
El resto de variaciones en los términos de búsqueda, ya cada cual

Un saludo