[SOLUCIONADO] HTML no detecta una clase CSS

[spank_226]

Buenas a todos.

Este problema es complicado de explicar, así que voy a pasar a enlazar código a ver si así puedo explicarme mejor.

Estoy usando una división con imagen de fondo y quiero poner un texto encima. La división está escrita de este manera:

Código:

<div class="img-header-art" style="background:url(images/cabecera-articulo.jpg) no-repeat;">
   <h3>¿Cómo valorar una startup?</h3>
</div>

Bien, tanto la clase como la etiqueta h3 tienen su propio CSS, que es el siguiente:

Código:

.img-header-art {
	height: 480px;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.img-header-art h3*{
	color: #fff;
	font-size: 4vw;
	text-shadow: 2px 2px black;
	line-height: 1.2em;
	letter-spacing: -1px;
	font-family: 'Gotham-Medium', Helvetica, sans-serif;
	letter-spacing: -1.5px;
	margin: 0;
	text-align: left;
	text-transform: uppercase;
}

El CSS tiene todo lo que quiero, pero aquí viene el problema. Para la imagen, solamente detecta el alto, el resto lo ignora, como igualmente ignora TODO el CSS de la etiqueta h3, y no tengo ni idea por qué podría ser. Espero haberme explicado bien. ¿Alguna sugerencia?

Gracias de antemano.

[AngelKrak]

que te parece si empiezas por quitarle el * que esta al lado de .img-header-art h3 saludos ;) y cualquier otra cosa pregunta ;)

y yo veo que esta bien todo >_<
http://codepen.io/AngelKrak/pen/wBYvxd

[pzin]

Además en style deberías de poner background-image ya que con background sobreescribes varias propiedades debido a que es un shorthand.

[spank_226]

Buenas.

Os comento:

• La * se me coló a la hora de copiar el código, y he podido comprobar gracias al link que me diste que funcionaba correctamente, pero sigue sin detectar el código CSS.
• Al utilizar background-image, la imagen de fondo desaparece pero se queda el espacio correspondiente a la misma, sin notar ningún cambio en las letras.

Este mismo método lo utilizo en otras partes de la web, sin ningún tipo de problema. ¿Necesitáis algún tipo de información adicional (acerca de lo que estoy usando), que os ayude a ver cómo solucionar esto?

Gracias por la ayuda. Un saludo.

[AngelKrak]

el codigo correcto hasta donde yo recuerde y el porque no te agarra el Background-image es porque lo tienes mal >_< deberia de ir asi >_<

style="background-image: url("images/cabecera-articulo.jpg")

y si tienes una demo de la pag o imagenes quedaria mejor porque asi no podemos hacer nada >_< y de preferencia pasa todo el codigo completo de tu pag, no solo el modulo con problemas >_<

[NueveReinas]

No entiendo porque le agregas el fondo desde el "style" del DIV...

Prueba con esto:

Código:

.img-header-art {
	height: 480px;
	width: 100%;
	background-image: url("images/cabecera-articulo.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}

.img-header-art>h3{
	color: #fff;
	font-size: 4vw;
	text-shadow: 2px 2px black;
	line-height: 1.2em;
	letter-spacing: -1px;
	font-family: 'Gotham-Medium', Helvetica, sans-serif;
	letter-spacing: -1.5px;
	margin: 0;
	text-align: left;
	text-transform: uppercase;
}

Y te recomiendo añadirle un "background-color" para que cuando tarde mucho en cargar la página (3G o WiFi lento) el visitante sepa que "algo va ahí".

[pzin]

Iniciado por AngelKrak

el codigo correcto hasta donde yo recuerde y el porque no te agarra el Background-image es porque lo tienes mal >_< deberia de ir asi >_<

Las comillas no son obligatorias: http://www.w3.org/TR/CSS21/syndata.html#uri

NueveReinas supongo que será un dato dinámico.

[NueveReinas]

Iniciado por pzin

Las comillas no son obligatorias: http://www.w3.org/TR/CSS21/syndata.html#uri

Pero son recomendables. :)

[pzin]

Iniciado por NueveReinas

Pero son recomendables. :)

No dice nada la W3C de que sean recomendables, básicamente porque es muy muy raro que se deban de usar, sería una URL bastante atravesada. Pero bueno, que no está mal no usarlas. Yo nunca las uso, no tiene demasiado sentido.

[spank_226]

Buenas.

Le he estado dando muchas vueltas al código, y la solución fue bastante sencilla: eliminar espacios. No se porqué fue esa la solución, pero parece que ya no da más problemas. Ahora me estoy peleando para usar el atribulo position para dejar el título abajo a la izquierda, pero parece ser que es imposible! Aunque eso es otra batalla jajaja.

Muchas gracias a todos por la ayuda. Un saludo.