Foro diseño/web/editorial

Foro ceslava | Diseño gráfico / web / editorial | Formación » Diseño Web

Diferenciar estilos de divs contenidos dentro de una class con otros estilos

(8 mensajes)
  1. jfcolomer
    Miembro

    Muy buenas, llevo ya unos días bastante perdido con el siguiente problema.
    Estoy desarrollando el siguiente sitio http://juanfolgarlouroabogados.es/index2.html
    y el caso es que el menu está compuesto por un "accordion" en javascript que se va desplegando para mostrar las distintas secciones de la web, hasta ahí todo bien, el caso es que el accordion está compuesto por una ul en la que cada li es una de las secciones del menú, luego cada li tiene una altura y anchura antes de desplegarse.
    Una vez que despliego una sección del accordion y quiero añadir contenido pues no hay problema, pero a la hora de añadir una lista de términos, estos heredan la altura y anchura de cada uno de los li del accordion antes de desplegarse, y como podeis ver en la seccion OFICINAS, me muestra cada li con esa altura y anchura.
    He probado con !important, con background-image:none pero no hay forma.
    A alguien se le ocurre algo?
    Gracias.

    Publicado hace 6 años #
  2. ceslava
    admin

    Hola Juan,


    Parece un problema de especificad CSS, ¿has probado #wizards li ?

    Saludos

    Publicado hace 6 años #
  3. jfcolomer
    Miembro

    Hola Cristian, gracias por responder ;)
    Pues la verdad es que sí y no hay manera, pero he probado a añadir esto al final de mi hoja de estilos:
    ul.accordion li.bg1 .description  li{
       height:5px;
       width:5px;
    }
    Si le pongo width y height, me muestra los li con dicha altura y anchura, si lo suprimo, les da la misma altura y anchura que tienen los li del accordion antes de ser desplegados, es decir, unos 135 de anchura por 480 de altura.

    Publicado hace 6 años #
  4. ceslava
    admin

    Hola Juan,


    No te hace falta tanto, lo que le da la altura de 480px es

    ul.accordion li

    Si a #wizards li le pones una altura con height lo tendrás solucionado.

    Es cuestión de especificidad y los ID tienen más valor que las clases. 

    Saludos

    Publicado hace 6 años #
  5. jfcolomer
    Miembro

    Hola Cristian, ya voy acotando el problema ;)
    Como bien dices, les he dado una altura y anchura al #wizards li y solucionad, bueno, una vez quitado también su respectivo border-right y border-bottom.

    http://www.juanfolgarlouroabogados.es/index2.html

    Lo que pasa que he intentado hacer lo mismo para una lista normal y corriente (accordion ESPECIALIDADES) , es decir, de texto, y claro, no me debería hacer falta darles altura y anchura no? porque si se la doy, como he hecho:

    ul.accordion li.bg0 .description  li{
       height:5px;
       width:20px;

       border-right:0px;
       border-bottom:0px;
      
    }

    Pues me sigue saliendo el dichoso fondo de marras, y si no le doy ninguna pues hereda la del ul.accordion li y en el caso de dejarsela a cero, pues resulta que no me aparecen los términos (especialidad1,.....)

    No sé si me estoy explicando bien :S

    Publicado hace 6 años #
  6. ceslava
    admin

    Hola Juan,


    Te recomienda que leas sobre la especificidad CSS, por ejemplo aquí:


    Se trata de que entiendas qué selector tiene prioridad cuando hay conflictos.

    Se trata de una fórmula muy sencilla de aplicar una vez entendida. 

    Te dejo también esta lectura sobre CSS


    Y también te recomiendo que instales Firebug para Firefox, de esta forma verás los estilos ordenados por especificidad que se están aplicando.

    Saludos

    Publicado hace 6 años #
  7. jfcolomer
    Miembro

    Muchas gracias Cristian ;)

    Publicado hace 6 años #
  8. hostpapa
    Miembro

    Se ve que has podido arreglar todo porque el sitio se ve muy bueno!

    Publicado hace 6 años #

RSS feed para este Tema

Responder

Debes Identificarte para publicar.