[SOLUCIONADO] ¿Qué fallo tan tonto debo tener?

diegoguerrero · #1 (**permalink**) 19/09/2015, 17:33

No me funciona el css. Por favor, ayuda porque me estoy liando bastante. Gracias

index.html

Código HTML:

Ver original<html>
    <head>
        <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div id="2cols50">2cols50</div>
    </body>
</html>

styles/styles.css

Código CSS:

Ver original@charset "UTF-8";
/* GENÉRICOS */
body{
    margin: 5px auto;
}
a{
    text-decoration: none;
}
/* RESPONSIVE */
    /* COLUMNAS - PROPIEDADES GENERALES */
    /* COLUMNAS - PROPORCIONALES AL BODY */
        #2cols50{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86, 61, 124, 0.15);
            border: 1px solid rgba(86, 61, 124, 0.2);
            width: 50%;
            position: relative;
            min-height: 1px;
            padding-right: 1.5em;
            padding-left: 1.5em;
        }

xfxstudios · #2 (**permalink**) 19/09/2015, 19:28

y que es lo que no funciona o adivinamos????

diegoguerrero · #3 (**permalink**) 20/09/2015, 01:50

Cita:

Iniciado por xfxstudios

y que es lo que no funciona o adivinamos????

Simplemente no se ejecuta el CSS sobre el HTML.

JustinKO · #4 (**permalink**) 20/09/2015, 02:18

Hola, no sabía que no se podía hacer hasta que no lo he visto en tu código, pero al parecer al tener un número al principio de tu ID no te lo reconoce en el CSS. Quítaselo y verás como funciona.
He comprobado con clases y pasa lo mismo.

según he leído en este post el problema es porque el CSS no admite números ni ciertos caracteres antes del . y # de los selectores y en caso de tener por necesidad que utilizar ese id o clase puedes poner la / delante del número:

Código CSS:

Ver original#\2cols50{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86, 61, 124, 0.15);
            border: 1px solid rgba(86, 61, 124, 0.2);
            width: 50%;
            position: relative;
            min-height: 1px;
            padding-right: 1.5em;
            padding-left: 1.5em;
        }

(esta opción la he probado en code pen y no me funciona, no sé por qué)

o poniendo el selector entre corchetes:

Código CSS:

Ver original[id="2cols50"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86, 61, 124, 0.15);
            border: 1px solid rgba(86, 61, 124, 0.2);
            width: 50%;
            position: relative;
            min-height: 1px;
            padding-right: 1.5em;
            padding-left: 1.5em;
        }

Saludos

joseanguiano · #5 (**permalink**) 20/09/2015, 07:10

Código HTML:

Ver original<link href="styles/styles.css" rel="stylesheet" type="text/css"/>

por que no pruebas añadiendo un ../
probablemente tus archivos esten en diferentes carpetas
ejemplo y es por ello que no encuentras la ruta

Código HTML:

Ver original<link href="../styles/styles.css" rel="stylesheet" type="text/css"/>