Comunidad de diseño web y desarrollo en internet online

CSS3 no reconoce parámetros entre paréntesis

Citar            
MensajeEscrito el 12 Feb 2012 12:32 am
Hola a todos,

Después de uno de los últimos vídeos de Mejorando.la decidí ponerme a practicar en serio con el HTML5 y CSS3 y cuál es mi sorpresa que algo tan sencillo como, por ejemplo, poner una imágen de fondo, no se por qué, no soy capaz, bueno, lo dejo para resolverlo y, tachan! tampoco me coge el @fontface.... ya empiezo a mosquearme, bueno, pues añado para probar un gradiente y adivináis?? tampoco me lo coge...

Todo lo demás funciona a la perfección, pero todos los estilos que tienen un parámetro entre paréntesis no me los coge, ni usando el bloc de notas, ni el notepad++ ni el sublime text 2 ni ninguno, he probado a poner comillas, quitar comillas, a cambiar la dirección de la ruta incluso poner la imágen en la raiz, pero nada no coge nada, ejemplos:

background: #FC6 url(img/fondo.jpg);
background-image: url("img/fondo2.gif");
@fontface: url("font/h1.ttf");
background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);

Como digo el resto de cosas funciona, como por ejemplo las sombras, y no es problema de las etiquetas o clases por que hay cosas que funcionan bien incluso en las que estas propiedades no, por ejemplo, una de las que tengo puestas el background tiene el shadow y va a las mil maravillas, tanto en chrome, firefox, opera y safari..... bueno, con ie es que no me funciona nada, ni siquiera el html5 me lo reconoce que los estilos de las etiquetas html5 (nav, header, section, article, aside y footer) y me pone todo uno seguido de otro, ni el float ni nada, y no se porqué por que se supone que la versión 9 (que es la que tengo) debería funcionar medio bien, al menos lo más básico no?

Espero que alguien me pueda ayudar... muchas gracias.

Un saludo

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 12 Feb 2012 12:58 am
por cierto, también he probado con -webkit- y -moz-...

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 12 Feb 2012 03:02 am
El código que nos muestra contiene errores.

Código :

@fontface: url("font/h1.ttf");

Es incorrecto. Lo correcto es:

Código :

@font-face: {
 font-family: "mifuente";
 src: url("font/h1.ttf") format('truetype')';
}

Luego:

Código :

background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);

Es incorrecto. Lo correcto es:

Código :

background-image: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);

Y debes poner además una con cada prefijo de navegador -webkit-, -moz- y -o-.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 12 Feb 2012 01:53 pm
Hola DriverOp,

Gracias por tu respuesta.

El gradiente ya me funciona, gracias, depués de ver que no me funcionaba nada de esto, tanto el gradiente como el fontface copié y pegué directamente desde mi manual por que creí que lo estaba poniendo mal y lo que parece es que mi manual es el que está mal, buscaré otro.

He puesto el fontface como tu me indicas pero sigue sin funcionar, tampoco me funciona el background-image para poner una imágen de fondo, entonces ahora el asunto es que no me funcionan los parámetros que tienen ruta, que estoy haciendo mal¿?

Por cierto, leí que ya no iba a ser necesario poner los prefijos para los navegadores, pero veo que aún sigue siendo necesario, no hay prefijo para ie a si que supongo que no funcionarán estos estilos en ie.

Y en cuanto a que no me reconozca el IE9 el hmtl5 sabes por qué puede ser?

....mejor resumo las dudas:

1. no funciona background-image: urg ("img/fondo.jpg");
2. no funciona el @fontface ni poniéndolo como me indicas
3. van a ha hacer compatibles los navegadores para poder olvidarnos de los prefijos (eso leí)
4. los estilos que necesitan llevar prefijo para navegadores no funcionan en ie directamente?
5. según entendí (aunque no termino de creerlo) IE9 iba a ser super compatible con html5 y css3 pero a mi no me lee ninguna etiqueta html5, por qué puede ser?

Bueno, muchisismas gracias!

saludos

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 12 Feb 2012 02:12 pm
ok ok ok

punto 1 solucionado, ya me salen las imágenes de fondo, estaba poniendo mal la url, como está en una carpeta las imágenes....

url(../img/fondo1.jpg);

pero sigue sin foncionar el fontface

gracias

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 12 Feb 2012 08:48 pm
@font-face depende de qué formato de fuente el navegador pueda manejar. IE no reconoce (en realidad se reusa) el formato TrueType si el archivo está marcado como "no distribuible" que es el caso en la gran mayoría de las fuentes TTF. La solución consiste en convertir el TTF en EOT.

Para todos los demás lo más seguro es usar fuentes en formato WOFF.

Por favor conusulta caniuse.com para más referencias.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 12 Feb 2012 10:15 pm
Gracias nuevamente por tu respuesta.

La verdad es que el fontface no me funciona en ningún navegador, en IE9 directamente no funciona nada, ni lo más básico (etiquetas html5)

No se que esté haciendo mal, seguro que algo, pero no se qué.

Gracias por el enlace, lo miraré, aunque creo que el caso no es ese por que he probado con todos los tipos de fuentes y nada de nada, finalmente parece que no lo voy a poder probar.

Muchas gracias.
Un saludo.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

firefox
Citar            
MensajeEscrito el 13 Feb 2012 03:11 am
Pues pon el código real que estás usando aquí o mejor aún, danos la URL de la página donde estás haciendo las pruebas.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 13 Feb 2012 08:12 am
@font-face: {

font-family: "h1";

src: url("font/h1.ttf") format('truetype')';

}
h1{
font-family:"h1";
}

La primera parte la he puesto tal como me pusiste en el post anterior, he probado quitando comillas y poniendo ../font/h1.ttf (así es como funcionó el background (aunque no se por qué) y cambiando el tipo de letra por los que hay en la web que me pasaste, pero nada. Ningún navegador.

No tengo la web subida lo estoy haciendo en local.

Gracias.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

firefox
Citar            
MensajeEscrito el 13 Feb 2012 12:18 pm
Prueba con los formatos OTF o WOFF.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Feb 2012 11:29 am
He descargado de Font Squirrel una fuente con todos los formatos y la he probado con todos los formatos y nada de nada: http://www.fontsquirrel.com/fonts/Quicksand, he probado con eot, svg, ttf y woff y no ha cogido ninguna, sin embargo los ejemplos de otras web, como por ejemplo este http://www.antonionavajas.com/curso_css3/tema4_tratamientotextos/ejemplo1.html del tutorial de esta misma web lo veo perfecto, he copiado y pegado lo que pone aquí, he probado a poner la fuente en el raíz....

Bueno he probado de todo, y viendo el estilo.css que se descarga con el kit de fuentes me he dado cuenta del tonto, tontísimo error, tengo ":" puestos detrás de @font-face..... muy bien, contenta por descubrir el error, directamente copio y pego lo que está en el css del kit que lo veo bien y lo pego en mi prueba, poniendo todas las fuentes en la raíz tal y como está en el kit, para probar.... pues... nada....

@font-face {
font-family: 'QuicksandBold';
src: url('Quicksand_Bold-webfont.eot');
src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand_Bold-webfont.woff') format('woff'),
url('Quicksand_Bold-webfont.ttf') format('truetype'),
url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
font-weight: normal;
font-style: normal;

}
h1{
font: 60px/68px 'QuicksandBold', Arial, sans-serif;
letter-spacing: 0;
}

El resto de estilos que le pongo al h1, por ejemplo el tamaño, o una tipografía Arial por ejemplo, lo coge a la perfección.

De verdad que no entiendo, por que un css lo veo bien y ese mismo al ponerlo en mi prueba no lo veo de ninguna manera?

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 15 Feb 2012 02:18 pm
Prueba esto:

Código :

h1 {
   font-family: 'QuicksandBold', 'Arial', sans-serif;
   font-size: 20pt;
   letter-spacing: 0;
}

Pero no olvides usar la Herramienta para Desarrolladores de Chrome (porque veo que usas Chrome), la información que te aporta es muy útil para detectar problemas como el tuyo.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Feb 2012 04:53 pm
Gracias de nuevo DriverOp,

He probado lo que me dices pero tampoco consigo el resultado, sigo sin entender por qué por que con el ejemplo lo veo perfecto, he probado en otros equipos con otros SO y en todos los navegadores y me pasa igual, el ejemplo lo veo pero lo mio no.

Si, aquí entro con es el que suelo usar para navegar, pero tengo varios navegadores, chrome, IE, firefox, ópera y safari, y con todos me pasa lo mismo. No se que herramienta me dices, tengo la de firefox, buscaré la de chrome aunque no debo de saber muy bien como usarlas por que con el firefox no veo nada raro.

Un saludo.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 15 Feb 2012 05:19 pm
Acabo de estar investigando lo de la herramienta de desarrolladores de chrome y he visto que da esto al cargar la página, pero no se porqué????

Failed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.ttfFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.svg#QuicksandBoldFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.woffFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.ttfFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.svg#QuicksandBoldFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.woffFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.ttfFailed to load resource
file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.svg#QuicksandBoldFailed to load resource
GET file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.woff
GET file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.ttf
GET file:///C:/Users/kary/Desktop/Escritorio/pruebas/css/Quicksand_Bold-webfont.svg#QuicksandBold


Da error al carcar todos y cada uno de las fuentes, hace lo mismo lo referencie como lo referencie

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 15 Feb 2012 06:55 pm
¬_¬
No puedes referenciar un archivo desde un HTML pelado.
Estás haciendo pruebas abriendo un archivo .htm directamente desde el navegador. Ningún navegador te va a dejar referenciar un archivo en el sistema de archivos local. Debes trabajar usando un servidor web tal como Apache.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Feb 2012 07:24 pm
a, si? no sabía, no imaginaba que css3 también trabajara del lado del servidor....
pero entonces.... por que el ejemplo que me bajé de font squirrel con las funetes lo abro directamente en el navegador desde la carpeta del escritorio y si funciona???? que raro no???

Acabo de probar con wamp y tampoco funciona, además da el mismo error:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/pruebas/css/Quicksand_Bold-webfont.ttfFailed to load resource: the server responded with a status of 404 (Not Found)
http://localhost/pruebas/css/Quicksand_Bold-webfont.svgFailed to load resource: the server responded with a status of 404 (Not Found)
GET http://localhost/pruebas/css/Quicksand_Bold-webfont.woff 404 (Not Found)
GET http://localhost/pruebas/css/Quicksand_Bold-webfont.ttf 404 (Not Found)
GET http://localhost/pruebas/css/Quicksand_Bold-webfont.svg 404 (Not Found)

No se por que dice que no se encuentra cuando si están los archivos....

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 15 Feb 2012 09:04 pm
Eh, bueno, no se puede discutir con una máquina :D
Si Apache dice que el archivo no está ahí, pues no está ahí. Algunas cosas que pueden estar sucediendo es que o has escrito mal el nombre del archivo o su ruta relativa o tal vez esos archivos no tienen permisos de lectura. Más no puedo hacer puesto que no estoy en tu compu.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 16 Feb 2012 07:51 am
DriverOp, gracias.

No, está todo revisado, y lo que más me fastidia es que está copiado y pegado del ejemplo que está exactamente igual, es más he copiado las fuentes tal cual del ejemplo y puestas en la raíz como en el ejemplo también y nada de nada.... no entiendo la verdad....

En fin, parece que esto se niega a funcionar, cuando se ponen las cosas así no queda más remedio que desistir, es una pena :(

Gracias por intentarlo. Igual a ver si a alguien se le ocurre algo, gracias, gracias, gracias.

Saludos.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 16 Feb 2012 03:42 pm
Uffff... haciendo pruebas e indagando he descubierto algo, lo que no se es como solucionarlo.

Bueno, la estructura de directorios es la siguiente
Raíz: prueba
CSS: prueba/css
Fuentes: prueba/fuentes

Bien, los resultados de las pruebas son los siguientes:


    1. Si pongo la fuente y el css en prueba funciona

    2. Si pongo la fuente y el css en prueba/css o en prueba/fuentes pero juntos, funciona

    3. Si pongo la fuente en prueba/fuentes y el css en prueba, también funciona


Pero:

    4. Si pongo la fuente en prueba/fuentes y el css en prueba/css, ya no funciona. Lo mismo pasa si pongo la fuente en prueba y el css en prueba/css o cualquier otro directorio


Es decir, si el css se encuentra en un directorio no raíz, ahí ya empieza el problema. Ésto no debería de ser así no? o está echo para que sea así? por que rompe la organización de la web.

Gracias

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 16 Feb 2012 04:48 pm
A ver.
Las rutas relativas que aparecen en el HTML son a partir de la ubicación del propio HTML.
Supongamos que tú cargas el HTML usando la dirección:

Código :

http://localhost/prueba/index.htm


Y en el HTML de index.htm tienes esto:

Código :

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


El navegador irá a buscar el archivo CSS en:

Código :

http://localhost/prueba/css/style.css


Ahora bien, si en el CSS tú tienes algo como esto:

Código :

...
src: url("fuentes/mi_archivo_de_fuente.ttf");
...

El navegador seguirá usando la ubicación relativa del HTML, no del CSS, por lo tanto buscará el archivo .ttf en:

Código :

http://localhost/prueba/fuentes/mi_archivo_de_fuente.ttf


Pero si en el CSS tienes esto:

Código :

...
src: url("mi_archivo_de_fuente.ttf");
...

Entonces el navegador irá a buscar el archivo .ttf en:

Código :

http://localhost/prueba/mi_archivo_de_fuente.ttf


¿Se entiende?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 16 Feb 2012 06:57 pm
Haz lo que dice DriverOp y más si cuando termines lo vas a subir a un servidor, si no vas a tener muchos problemas.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 16 Feb 2012 10:13 pm
Si, se entiende, pero acabo de probar y si no le especifico la carpeta donde está la fuente tampoco me la pone, pongo como está en cada caso el html y el css en las pruebas que he puesto antes. En los casos en que me funciona si no pongo la referencia de donde está ubicado la fuente, sólo funciona en caso en el que ambos (css y fuente) estén en el mismo directorio (obviamente)

Bueno, la estructura de directorios es la siguiente
Raíz: prueba
CSS: prueba/css
Fuentes: prueba/fuentes

Bien, los resultados de las pruebas son los siguientes:


1. Si pongo la fuente y el css en prueba funciona
HTML: <link rel="stylesheet" type="text/css" media="all" href="estilo.css" />
CSS: src: url ("fuente.ttf");

2. Si pongo la fuente y el css en prueba/css o en prueba/fuentes pero juntos, funciona
HTML: <link rel="stylesheet" type="text/css" media="all" href="css/estilo.css" />
CSS: src: url ("css/fuente.ttf")

o

HTML: <link rel="stylesheet" type="text/css" media="all" href="font/estilo.css" />
CSS: src: url ("font/fuente.ttf")

3. Si pongo la fuente enprueba/fuentes y el css en prueba , también funciona
HTML: <link rel="stylesheet" type="text/css" media="all" href="estilo.css" />
CSS: src: url ("font/fuente.ttf")


Pero:

4. Si pongo la fuente en prueba/fuentes y el css en prueba/css , ya no funciona. Lo mismo pasa si pongo la fuente en prueba y el css en prueba/css o cualquier otro directorio
HTML: <link rel="stylesheet" type="text/css" media="all" href="css/estilo.css" />
CSS: src: url ("font/fuente.ttf")


Yo creo que lo estoy haciendo bien, ahora ahí ya si, puede que me esté equivocando en algo, pero por más vueltas que le doy no entiendo...

Ah! por si me dicen algo, no se si es por que pongo la css dentro de una carpeta o por que estoy trabajando en local, que para que los archivos que hay en otras carpetas (como imágenes) me las coja (lo que me pasaba al principio con el background) tengo que poner los ../ antes, por ejemplo:

background: #2f2f2f url(../img/fondo.jpg)

probé también ha ponerlo en la url de las fuentes y tampoco funciona

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 17 Feb 2012 12:49 am
Inténtalo en linea y nos cuentas como te fue. Algo estás haciendo mal.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 17 Feb 2012 12:52 pm
Estoy con Kinduff, sube lo que estás haciendo a un servidor así podemos verlo nosotros mismos.

Seguro que lo que está mal es una tremenda tontería. Don't worry, al mejor cazador también se le escapa la liebre de vez en cuando :).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Feb 2012 06:16 pm
Yo creo que simplemente estás teniendo un problema de rutas.
En el caso de CSS (por alguna razón que aún desconozco) las rutas deben ser tomadas desde el CSS y no desde el HTML que lo cargará después, con las fuentes está ocurriéndote lo mismo que te ocurría con las imágenes.
Si tu estructura es:
Raíz: prueba
CSS: prueba/css
Fuentes: prueba/fuentes
Para que puedas cargar las fuentes debes usar:

Código HTML :

url(../fuentes/nombre_de_tu_fuente);

Del mismo modo que usaste los dos puntos para las url de las imágenes.

Otra cosa que noté y no sé si lo usas realmente o es sólo para el ejemplo es que usas como nombre de fuente "h1". No hagas eso, no le pongas a una fuente el nombre de una etiqueta si no quieres agregar más problemas a los que ya tienes.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 21 Feb 2012 10:40 pm
Gracias The Fricky!
Eso fue lo primero que intenté, pero no resultó.

Parece que las fuentes o carpeta de fuentes debe estar en el mismo directorio que esté el CSS ya sea en la propia raíz o en la carpeta de CSS.

Haciéndolo así funciona correctamente.

Gracias a todos.

Saludos.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 21 Feb 2012 10:41 pm
Por cierto, tranquilo, lo del h1 era para el ejemplo :) cada fuente tiene un nombre, gracias!!!

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome
Citar            
MensajeEscrito el 23 Feb 2012 08:05 pm
Es curioso lo que comentas que la fuente deba estar en el mismo directorio del CSS, yo siempre coloco las fuentes y el CSS en directorios aparte (como haz hecho acá) y jamás he tenido ese problema, pero bueno, si funciona ¡no lo toques! ;)

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 23 Feb 2012 10:30 pm
Hola The Fricky!

Pues, efectivamente es raro, pero es de la única forma que consigo que funcione. A si que hasta que no me funcione de otra forma así se queda, igual las fuentes se usan sólo para el css a si que el orden es lógico.

Muchas gracias!.

Por kary©

16 de clabLevel



Genero:Femenino  

Una más

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.