Varios CSS en una web

babieka · #1 (**permalink**) 29/07/2008, 03:33

Estoy de los nervios con el CSS, aunque no me ha costado entender su funcionamiento me vuelvo loco en la práctica, me explico.
Estoy creando una web con 4 pestañas con divs y una hoja de estilos CSS. La página de inicio la tengo completada, la segunda pestaña que estoy trabajando necesito cambiar las características css de algunos divs como la cabecera que quiero colocar una imagen de fondo diferente que la de la portada... claro que la cambia pero como tiene el mismo nombre de div la anterior imagen la machaca. Entonces pregunto. ¿Por cada pestaña necesito crear una hoja de estilos diferente? Tengo estas pestañas: inicio, domotica, servicios, actualidad. Entonces usar inicio.css, domotica.css, servicios.css, actualidad.css
Gracias por anticipado.

Mikmoro · #2 (**permalink**) 29/07/2008, 03:40

¿No puedes dar diferentes ID's al div según la página, o es que las cargas con un include siempre la misma?

babieka · #3 (**permalink**) 29/07/2008, 03:45

La página es la misma, pero cambiando el contenido. Lo que deseo es que pueda cambiar la iD para adaptarla a la exigencias, pero claro, si lo hago asi se cambia en todas las páginas porque el CSS es el mismo para todos.

Mikmoro · #4 (**permalink**) 29/07/2008, 04:08

Me refiero a si es la misma cargada siempre con un include, o una copia de la misma en la que cambias cosas.

¿Como es que es la misma pero cambiando el contenido? ¿es un CMS?, ¿es html simple y has copiado la estructura de una página a otra cambiando el contenido y manteniendo todas las cajas?

Es que según sea hay que hacerlo de una forma u otra.

babieka · #5 (**permalink**) 29/07/2008, 04:15

Perdona no entiendo lo que quieres decir con un include. No es CMS es un html simple que he copiado las cajas div de una página a otra y cambio el contenido. el css es el mismo en cada hoja.

Mikmoro · #6 (**permalink**) 29/07/2008, 04:30

De acuerdo. Entonces tienes varias posibilidades, y la mejor que se me ocurre es esta:

a cada página, le das un ID al body (<body id="uno">, <body id="dos">)

y entonces ahora defines la diferencia del div en la CSS dependiendo del ID del body

#uno #tudiv {background-color: red;}
#dos #tudiv {background-color: blue;}

de manera que cuando el ID del body sea "uno", tu div será rojo, y cuando sea "dos" será azul.

¿Ves por dónde va?

babieka · #7 (**permalink**) 29/07/2008, 04:35

Eeeeentendido maestro!
¿Crees que la manera que lo estoy haciendo es correcta? quiero decir si es habitual esta forma de construir una web, porque en el caso de ser muchas ID la hoja de estilos puede ser larga. De todas formas como lo explicas queda aclarado.
Muchas gracias!

Mikmoro · #8 (**permalink**) 29/07/2008, 04:43

Bueno, está bien.

Yo personalmente creo que cambiaría el ID del div que quiero diferente en cada página, porque luego no cuesta nada agrupar en la css, es decir, si tengo 4 ID que comparten 5 características y tienen una diferencia, no cuesta agruparlos para poner la comunes una sola vez y las diferencias en cada uno.

#uno, #dos, #tres {... comunes}
#uno {... particular}
#dos {... particular}
#tres {... particular}

También es posible que una caja tenga un ID y una clase, de manera que puedes manter el ID, añadir una clase diferente a cada uno y en la css mantener en el ID las características comunes y en la clase las diferencias.

Pero bueno, esto es gusto de cada uno. De todas maneras lo estás haciendo bien, y si vas a tener bastantes páginas y diferencias entre las cajas de la estructura, de una manera u otra la CSS irá creciendo, a la fuerza.

babieka · #9 (**permalink**) 29/07/2008, 05:26

una clase diferente pero manteniendo la ID... buena solución también. Muchisimas gracias. Para acabar de dar la tabarra una última pregunta. En una ID quiero incluir una transición de imágenes usando jquery cicle. Resulta que si uso posición absoluta en la div que necesito se ve diferente, pero que muy diferente en explorer y en mozilla. Como no tengo ganas de usar conditional comments para cada explorador queria saber si puedo usar el plugin en un div normal, los ejemplos que he visto ha sido aplicado sobre ID con posicionamiento absoluto.

Mikmoro · #10 (**permalink**) 29/07/2008, 05:30

No sé si será tu problema, pero para IE al poner algo en posición absoluta siempre tienes que marcar dos coordenadas como mínimo (left y el top si es que marcas de izquierda y arriba), porque si no sus valores por defecto son como un 50%. Si sólo quieres marcar la distancia superior, aun así pon left:0 y seguramente se colocará en su sitio.

babieka · #11 (**permalink**) 29/07/2008, 06:58

Probaré y comento la jugada. Gracias de nuevo.

babieka · #12 (**permalink**) 30/07/2008, 11:51

Pues la posición absoluta no me la respeta ni IE ni mozilla, tiene como mínimo 2 valores y no se ve igual en los 2 navegadores. Supongo que se debe alinear con html y no con body y eso que he puesto un asterisco en css para anular los márgenes de las hojas de estilo integradas en el navegador

* { padding:0; margin: 0;}

Mikmoro · #13 (**permalink**) 30/07/2008, 12:24

Comprueba que el elemento que tiene posición absoluta se ubicará en relación a su elemento padre, que para eso deberá tener posicion relativa.

Si no va pega tu código o un enlace a ver qué se ve.

babieka · #14 (**permalink**) 30/07/2008, 12:33

Pues he probado a cambiar las propiedades del elemento padre ID cabecera usando posición relativa y el ID logo que va dentro como posición absoluta y ahora me lo ha respetado tanto en IE como explorer. Entonces el 'truco' está en que si posicionamos el elemento padre ID cabecera con posicion relativa 'sin dar ningún valor', estará posicionado y se convertirá en el punto de referencia para el posicionamiento absoluto de ID logo. Es decir, el posicionamiento absoluto se vuelve relativo con este truquillo. Corrígeme si me equivoco. En todo caso si sobre la marcha tengo alguna duda, te consultaré. No me canso de repetir que me estas ayudando mucho.

Mikmoro · #15 (**permalink**) 30/07/2008, 12:36

Es exactamente así, estás en lo cierto.