none
Problemas con los estilos de mi .css, embrollo de estilos :/ RRS feed

  • Pregunta

  • Hola, en mi sistema web aplico varios estilos dependiendo el contenedor y se solapan los estilos. Por ejemplo establezco un estilo  a un objeto de pie de paginación contenido en un div padre y luego el estilo especifico del pie de pagina no se aplica, por mas que le asigne !important. Como puedo solucionar este embrollo de estilos que tengo?¿ Las hojas de css que tengo me las ha dado mi cliente, no es algo que yo haya hecho.

    Muchas gracias....

    martes, 3 de noviembre de 2015 9:30

Respuestas

  • hola

    >>por eso no entiendo bien que orden utiliza el asp para leer los css contenidos en el proyecto de mi trabajo

    este style que muestras lo tienes dentro de un archivo .css?

    si usas el Developer Tools del browser podrias evaluar como aplica los estilos

    imagen

    con este podrias ver como aplcian los estilos y cual esta sobreescribiendo el que quieres aplicar

    >>hay veces que se referencia por <asp:ScriptReference y otras con solo especificar en el class o cssClass se aplica el estilo

    pero defines .css dentro del ScriptReference o solo son .js ?

    los css los defines dentro del

    <link rel="stylesheet" type="text/css" href="style.css">

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 3 de noviembre de 2015 13:13
  • Hola Virginia F,

    Revisa este articulo de como hacer referencia de hojas de estilos (.css)

    Cómo: Vincular hojas de estilo en cascada con páginas Web ASP.NET (Visual Studio)

    Y recuerda lo que comenta Leandro, las hojas de estilos se sobre escriben dependiendo el orden. El estilo base debe estar en la cabecera de la página dentro  de la etiqueta <head></head>. Si necesitas sobre escribir un estilo en alguna parte de tu página puedes agregar una referencia a la hoja de estilos (.css) o incuso agregar el estilo directo con la etiqueta <style></style> (recomiendo usar archivos .css) antes de los elementos a los que quieres aplicar el nuevo estilo.

    Nota: el path de la hoja de estilos pueda cambiar, si usas una estructura de carpetas a diferentes niveles. Por lo que sugiero revises que el path sea correcto, para que se carguen bien tus archivos.

    Espero que la respuesta te ayude.

    Saludos,

    @norrojas

    martes, 3 de noviembre de 2015 15:33

Todas las respuestas

  • hola

    los estilos los defines en archivos .css ? si es asi primero valida que son cargados, para esto usa la Developer Tools del browser, al cual accedes con F12, en la solapa Network podrias validar si el archivo es cargado

    por otro lado recuerda que los estilos aplican en orden, por lo cual si pones uno antes que otro afecta como aplican

    se supone que el estilo base debe ir primero, y luego los demas para que vayan aplicandose en secuencia, valida que lo haces de esa forma

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 3 de noviembre de 2015 11:16
  • Leandro, yo trabajo con aspx y utilizo class o cssClass para referenciar los estilos. Para mi todo esto es muy nuevo, por eso no entiendo bien que orden utiliza el asp para leer los css contenidos en el proyecto de mi trabajo. POrque hay veces que se referencia por <asp:ScriptReference y otras con solo especificar en el class o cssClass se aplica el estilo. Una de mis hojas de css se llama estiloGrid.css. y contiene el siguiente codigo... pero a su vez para otras partes del aspx se asigna otro estilo de un style.css

    Realmente los css me marean jajajaja

    Saludos y gracias

                                

    a.titulo
    {
    color: White;
    text-decoration: none;
    font-weight: bold;
    }

    .celdaGrid
    {
    border-right: 1px solid #6292B4;
    }
    .celda
    {
    margin-
    }

    tr.resaltar, tr.resaltarFila
    {
    cursor: pointer;
    height: 20px;
        font-size: 10px;
    color: #707070;
    }
    .tr.filaGridTitulo, .filaGridTitulo, TH, .TH.filaGridTitulo
    {
    height: 20px;
    background-color: #007EA9;
    /*font-family: Verdana;*/
    /*font-size: 10px;*/
    font-weight: bold;
    color: White !important;
    text-decoration: none;
    }


    tr.filaGrid, .filaGrid, .filaGridAlternate, .filaGridSeleccionada
    {
    height: 20px;
    background-color: #F4F3DF;/*#EBEEF0;*/
    /*font-family: Verdana;*/
    font-size: 10px;
    color: #707070;
    }
    .filaGridSeleccionada
    {
    background-color: #E1ECF7;
    }
    .filaGridAlternate
    {
    height: 20px;
    background-color: white;
    /*font-family: Verdana;*/
    font-size: 10px;
    color: #707070;
    }

    /* ESTILO DEL DataPager del pie de pagina del grid => id=pnPie */

    #pnPie {
        width: 995px !important; 
        border: 1px solid #F9F9F9 !important;
    }


    .numeroPaginaSelectores{

        font-size: 12px !important;
    /*color:#ff0000 !important;*/

        background: #FFF !important;
        border:0 !important;
        border-width: 0px;
        border-color: #FFFFFF;

        box-shadow: 0px !important;
    -moz-user-select:none;
    -webkit-user-select: none;

    margin: 0px !important;

        min-width: 5px !important;
        min-height:5px !important;

        width: 15px !important;
        height:20px !important;

    padding: 3px !important;
    cursor:pointer;

    }

    .numeroPaginaSelectores:hover{
        color:#6292B4 !important;

        background: #FFF !important;
        border:0 !important;

        box-shadow: 0px !important;
    -moz-user-select:none;
    -webkit-user-select: none;

    font-size: inherit !important;
    margin: 0px !important;
    min-width: 10px !important;
    padding: 3px !important;
    cursor:pointer;
    }

    .numeroPaginaSelectores:active{

        color:#007EA9 !important;   

        Border:0 !important;
        font-weight: bold;

        font-size: 16px !important;

        background: #FFF !important;
        border:0 !important;

        box-shadow: 0px !important;
    -moz-user-select:none;
    -webkit-user-select: none;


    margin: 0px !important;
    min-width: 10px !important;
    padding: 3px !important;
    cursor:pointer;

    }


    .numeroPaginaActiva
    {
    color:#007EA9 !important;    
        font-size: 14px !important;  

        Border:0 !important;
        font-weight: bold;
    }


    .barraScroll
    {
    scrollbar-face-color: #6292B4;
    scrollbar-highlight-color: #6292B4;
    scrollbar-3dlight-color: #6292B4;
    scrollbar-darkshadow-color: #6292B4;
    scrollbar-shadow-color: gray;
    scrollbar-arrow-color: white;
    scrollbar-track-color: #EBEEF0;
    }

    .botonSelectorGrid{
        border-style:none;
        /*background-color:#EEEDED;*/
        font-weight:normal !important;
        cursor: pointer;
        font-size:11px !important;
        color: black !important;


    }
    .botonGrid {
        text-decoration: underline;
        border: 0;
        margin: 0;
        padding: 0;
        font-size: 9px;
    }

    martes, 3 de noviembre de 2015 13:03
  • hola

    >>por eso no entiendo bien que orden utiliza el asp para leer los css contenidos en el proyecto de mi trabajo

    este style que muestras lo tienes dentro de un archivo .css?

    si usas el Developer Tools del browser podrias evaluar como aplica los estilos

    imagen

    con este podrias ver como aplcian los estilos y cual esta sobreescribiendo el que quieres aplicar

    >>hay veces que se referencia por <asp:ScriptReference y otras con solo especificar en el class o cssClass se aplica el estilo

    pero defines .css dentro del ScriptReference o solo son .js ?

    los css los defines dentro del

    <link rel="stylesheet" type="text/css" href="style.css">

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 3 de noviembre de 2015 13:13
  • Hola Virginia F,

    Revisa este articulo de como hacer referencia de hojas de estilos (.css)

    Cómo: Vincular hojas de estilo en cascada con páginas Web ASP.NET (Visual Studio)

    Y recuerda lo que comenta Leandro, las hojas de estilos se sobre escriben dependiendo el orden. El estilo base debe estar en la cabecera de la página dentro  de la etiqueta <head></head>. Si necesitas sobre escribir un estilo en alguna parte de tu página puedes agregar una referencia a la hoja de estilos (.css) o incuso agregar el estilo directo con la etiqueta <style></style> (recomiendo usar archivos .css) antes de los elementos a los que quieres aplicar el nuevo estilo.

    Nota: el path de la hoja de estilos pueda cambiar, si usas una estructura de carpetas a diferentes niveles. Por lo que sugiero revises que el path sea correcto, para que se carguen bien tus archivos.

    Espero que la respuesta te ayude.

    Saludos,

    @norrojas

    martes, 3 de noviembre de 2015 15:33