Foros del Web » Creando para Internet » CSS »

Rizando el rizo...

Estas en el tema de Rizando el rizo... en el foro de CSS en Foros del Web. Dado que algunos problemas de diseño CSS pueden resolverse creando un estilo para cada navegador, y uniendo a esto la cuestión de estilos diferentes para ...
  #1 (permalink)  
Antiguo 19/06/2008, 06:24
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Rizando el rizo...

Dado que algunos problemas de diseño CSS pueden resolverse creando un estilo para cada navegador, y uniendo a esto la cuestión de estilos diferentes para la visualización en pantalla y para la impresión de una página, pregunto:

¿Cómo se puede (si es que se puede) armonizar ambas cosas? Dicho de otro modo: si quiero que una página tenga un estilo para IE, otro para Firefox y otro para Opera, y que además tenga un estilo para pantalla y otro para impresión, ¿cómo sería el código CSS y su orden? Y en el caso de aplicarse a un solo documento, ¿se necesitan forzosamente archivos externos, o todo eso -los estilos para cada navegador, para pantalla y para impresión- podrían incluirse en la cabecera de esa página?
  #2 (permalink)  
Antiguo 19/06/2008, 12:11
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Rizando el rizo...

no entiendo para que queres que tenga estilos diferentes para cada navegador?
  #3 (permalink)  
Antiguo 19/06/2008, 15:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Rizando el rizo...

Hola Ekbrilo
Desde mi bisoñez en estos temas, pero haciendo memoria de otros posts de este foro:
No es necesario definir una estilo para cada navegador. En ciertos casos sí que se necesitan algunos "hacks" (¿se escribe así?) al objeto de obtener el mismo resultado en alguno de ellos. Esto es, que por alguna particularidad, fallo o forma de interpretar alguna propiedad, hay que definir alguna cosilla en especial para un navegador o versión en concreto.
Sobre el hecho de vincular el estilo a una hoja externa o incluirla en la misma página, creo que los que saben aconsejan el primer método, .css por un lado y .html por otro. Pero siempre hay excepciones, y un día de estos, Mikmoro comentaba que había tenido que incluir código css en la página para que un menú fuese al 100%.
Espero te sirva como base para seguir descubriendo.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 19/06/2008, 15:33
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Respuesta: Rizando el rizo...

Hola Ekbrilo, cómo vas??

Teóricamente y lo que muchos aconsejan es que hagas tu estilo para cualquier navegador, osea una solo hoja y en lo posible evitando hacer "hacks" (si se escribe así kseso? ). Tampoco... utilizar estilos locales.

En cuanto a lo de peresentar la página de una manera en pantalla y otra en impresión, lo haces con el atributo media del tag link. Te tocaría leer mas sobre eso

Espero te sirva
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 20/06/2008, 06:30
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Os agradezco vuestras opiniones, y paso a responderlas, o más bien a matizar mi exposición inicial.

DragonX, el motivo de crear un CSS diferente para cada navegador (al menos para los tres principales) no es otro que ahorrar tiempo en la resolución de problemas de diseño. Se pierde muchísimo tiempo (a mí me pasa) intentando solucionar cualquier majadería irritante que afea una página en determinado navegador, mientras que en otro se ve impecable. Creo que es una solución práctica, pues hay veces en que intentar corregir el fallo a base de pruebas lo único que hace es amargarte, perder el tiempo y, encima, comprobar que el defecto sigue ahí. De ahí la idea de atajar problemas con CSS distintos. Hay gente que insiste en el consejo de probar, insistir, etc; pero de esa manera puedo tardar meses en solucionar una pijadilla, y yo no quiero perder tiempo con acertijos de código.

kseso, sé que el método recomedado es el archivo CSS externo; lo que pasa es que si se trata de un solo documento no sé si vale la pena hacerlo. Por supuesto es válido y funciona igual con una página que con mil a la vez; pero si es una sola página la implicada, igual el archivo externo es una medida un poco excesiva (digo yo, no lo sé...)

Carxl, Mikmoro me explicó la manera de lograr un código para pantalla y otro para impresión; lo que no sé es cómo podría estructurarse armónicamente con CSS diferentes para cada navegador.


Saludos a todos.
  #6 (permalink)  
Antiguo 23/06/2008, 05:49
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Parece difícil la cosa, ¿no?
  #7 (permalink)  
Antiguo 23/06/2008, 06:26
 
Fecha de Ingreso: junio-2008
Ubicación: El mundo
Mensajes: 35
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: Rizando el rizo...

Aunque tu página sólo vaya a utilizar una clase CSS lo correcto es colocarla en un archivo aparte y no en el head del HTML.... o al menos desde la filosofía del web 2.0 que mucha razón tiene en recomendarlo puesto que ayuda a garantizar factores de calidad del software como mantenibilidad, flexibilidad, reusabilidad y facilidad de prueba..... en pro de un buen desarrollo de software SIEMPRE vale la pena tener el CSS en un archivo aparte .

Ahora vamos al meollo del asunto... es cierto que hay que evitar usar hacks para corregir los estilos segun el navegador, pero hay ocaciones en que sencillamente es imposible lograr que se vea igual en todos sin hacer correcciones.... el principio en el que me baso cuando hago un website es que firefox se apega más a los estándares que IE, y si desarrollas correctamente en firefox en la mayoría de los exploradores obtendrás el resultado deseado EXCEPTO en nuestro amigo IE.... la buena noticia es que Microsoft (quizas a sabiendas de su gran debilidad en este aspecto) ha provisto de los comentarios condicionales, que permiten agregar hojas de estilo específicas para IE (incluso especificas para ciertas versiones)... ¿pero cómo funciona esto?

Bien los estilos de CSS son interpretados secuencialmente por el browser y almacenados en una especie de caché desde donde se usan, así que si colocas una misma propiedad dos veces, es el último valor el que quedará asignado. El truco con los comentarios condicionales es agregar luego de nuetra hoja de estilos estándar una segunda hoja específica que sobreescriba las propiedades necesarias para corregir los defectos que hayan en IE.... el comentario va mas o menos así:

Código:
<!--[if IE]><link rel="stylesheet" href="hateIE.css" type="text/css" /><![endif]-->
Por experiencia se que un buen CSS que funcione para firefox no necesitará más que unas pocas correcciones para funcionar en IE... la mayoría de ellas probablemente sean para coregir el modelo de cajas de IE que agrega espacio a los márgenes de los divs flotantes. También te recomiendo el uso de alguna hoja CSS reset... para anular algunas diferencias entre browsers antes de empezar....

Espero sea de utilidad!!... saludos

Héctor Borges
www.arepahosting.com
Valencia - Venezuela
  #8 (permalink)  
Antiguo 24/06/2008, 11:27
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Te agradezco la explicación, hectorborges; ahora bien, lo extraño del caso que planteo es que funciona correctamente en IE. Por el contrario, con Firefox debo modificar los valores del posicionamiento de ese elemento menor para que aparezca en la esquina inferior derecha del div grande; si mantengo los valores que funcionan con IE, el elemento menor se ve junto al div grande, pero fuera de él.

Un saludo
  #9 (permalink)  
Antiguo 24/06/2008, 11:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Rizando el rizo...

No lo entiendo.

En este hilo http://www.forosdelweb.com/f53/posic...9/#post2452381

al que finalmente no respondiste si te servía o no, creo que te contesté con un código compatible para IE y FF, sin necesidad de hacks ni comentarios condicionales para el posicionamiento que buscabas.

Mikel.
  #10 (permalink)  
Antiguo 25/06/2008, 05:57
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Tienes razón, Mikmoro, disculpa que no te contestase; probé el código que me dices y no me funcionó. Estaba tan enfrascado en la decepción de no poder solucionar el asunto que hasta se me olvidó postear de nuevo (cosa que habitualmente suelo hacer). En medio de ese olvido y de mi irritación (irritación con el problema, se entiende), pensé que lo mejor sería crear un estilo para IE y otro para Firefox -y eventualmente para Opera-.

Saludos y perdona mi lapsus.
  #11 (permalink)  
Antiguo 25/06/2008, 06:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Rizando el rizo...

No es problema, pero, ¿cómo es que ese código no funciona como quieres?

Enséñame si puedes el código y qué es exactamente lo que quieres conseguir, porque ya me picas la curiosidad y no lo entiendo. Lo del posicionado que comentábamos es bien sencillo, y no entiendo que no funcione eso.

Mikel.
  #12 (permalink)  
Antiguo 26/06/2008, 05:48
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Oído cocina, Mikmoro; estos días ando bastante liado, -causas ajenas a mi voluntad, que suele decirse en estos casos-; pero al primer momento libre que tenga te paso más datos, a ver si damos con la solución al entuerto.

Un saludo y gracias por tu paciencia.
  #13 (permalink)  
Antiguo 06/08/2008, 12:14
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Bueno, lo prometido es deuda, Mikmoro, así que aunque sea más tarde de lo esperado aquí estoy de nuevo. El código que me pasaste sitúa efectivamente el div menor dentro del grande, en concreto en el extremo inferior izquierdo. Antes de detallar más códigos, te diré que intenté -sin conseguirlo- hacer dos cosas con el que tu me diste. La primera, probar a colocar el div menor en el extremo opuesto, o sea, en la esquina inferior derecha. La segunda, disponer bajo el div grande (pero fuera de él, en el body) otros dos elementos -probé divs, botones, imágenes...-, de manera que quedasen alineados correctamente bajo él. En ambos casos usé el mismo número de píxeles para el posicionamiento. El resultado para top es correcto en IE y Firefox, pero el left no coincide; el que se ajusta para IE se muestra excesivo para Firefox, y si lo reduzco hasta ajustarlo para este segundo navegador queda insuficiente en el primero. Por eso planteaba la posibilidad de usar un estilo diferente para cada navegador.

Un saludo.
  #14 (permalink)  
Antiguo 06/08/2008, 12:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Rizando el rizo...

Cita:
Iniciado por Ekbrilo Ver Mensaje
El código que me pasaste sitúa efectivamente el div menor dentro del grande, en concreto en el extremo inferior izquierdo.
Hola de nuevo.

Mmmm... me extraña que lo situe en el extremo interior izquierdo, porque yo te ponía:

bottom: 0px;
right: 0px;

es decir, obligatoriamente inferior derecho.

De todas maneras, si sigues con el problema, pon lo que estás usando y lo que quieres conseguir, a ver si samos con la solución.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 06/08/2008, 12:31
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Respuesta: Rizando el rizo...

Bueno, además de plantearme algunos ejercicios para "soltarme" un poquillo más con esto del CSS, una de las cosas que se me ocurrió al trastear con ese código era la posibilidad de incluir una imagen dentro de un textarea.
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 20:49.