Problemas con css
Hola, a ver si me podéis ayudar con el tema de las hojas de estilo.
Estoy diseñando una web super sencilla para una tienda. Quiero usar hojas de estilo, pero nada más empezar a diseñarla me he dado con la puerta en las narices. Tan solo he puesto una linea utilizando <hr></hr> y le he dado un estilo para cambiarle el color. El código es el siguiente:
<hr width=100% class="linea"></hr>
El problema es que en IE se ve bien, pero en Netscape solo me aparece un puntito (tengo el netscape 7). Si le cambio el width=100% y se lo pongo en pixels si que aparece, sino no.
¿Esto es porque el navegador no es compatible con los estilos aplicados a esa determinada tag? ¿Cómo podría hacer para que se viese bien en todos los navegadores?
Un último favor: os agradecería que me dijeseis dónde puedo encontrar información en la red sobre la compatibilidad de las hojas de estilo con diversos navegadores y versiones.
Muchas gracias de antemano por vuestra ayuda.
Estoy diseñando una web super sencilla para una tienda. Quiero usar hojas de estilo, pero nada más empezar a diseñarla me he dado con la puerta en las narices. Tan solo he puesto una linea utilizando <hr></hr> y le he dado un estilo para cambiarle el color. El código es el siguiente:
<hr width=100% class="linea"></hr>
El problema es que en IE se ve bien, pero en Netscape solo me aparece un puntito (tengo el netscape 7). Si le cambio el width=100% y se lo pongo en pixels si que aparece, sino no.
¿Esto es porque el navegador no es compatible con los estilos aplicados a esa determinada tag? ¿Cómo podría hacer para que se viese bien en todos los navegadores?
Un último favor: os agradecería que me dijeseis dónde puedo encontrar información en la red sobre la compatibilidad de las hojas de estilo con diversos navegadores y versiones.
Muchas gracias de antemano por vuestra ayuda.
1 respuesta
Respuesta de arrobadesign
1
Hasta hace relativamente poco tiempo las únicas herramientas de las que disponíamos para formatear nuestro texto en HTML eran las estudiadas anteriormente. Con este conjunto de herramientas podíamos conseguir de una forma general obtener el resultado deseado, pero en muchas ocasiones no eran suficientes para nuestros deseos.
Con la aparición y puesta en uso de las Hojas de Estilos en Cascada (CSS) disponemos de una herramienta potente y versátil para trabajar con textos en HTML, hasta el punto que el W3C recomienda constantemente su uso, llegando al extremo de desaconsejar gran parte de las etiquetas estándar de HTMl en favor de las Hojas de Estilos.
Mediante esta técnica, perfectamente implementada en Internet Explorer 4 y superiores y en Netscape Navigator 6x, y parcialmente en Netscape Navigator 4x, podemos tener un control casi total sobre el texto de nuestro documento, mediante unas sencillas reglas de construcción y uso, que simplifican notablemente nuestro trabajo.
No es el objetivo de este capítulo un estudio exhaustivo del estándar CSS, que ya va por su versión 2, si no el estudio de cómo podemos formatear el texto en HTML, por lo que vamos a ver sólo aquellas partes de CSS que nos facilitan esta tarea.
Uso general de las Hojas de Estilos.-
La misión básica de las Hojas de Estilos es definir bloques o porciones de texto en nuestra página que van a tener unas propiedades de estilo de texto determinadas. Mediante el uso de la sintaxis propia de CSS podemos establecer o fijar cada una de las propiedades de formato que debe tener cada una de estas porciones de texto.
La asignación de un determinado estilo se puede hacer de diversas formas:
En línea: consiste en establecer dentro de la etiqueta definitoria del bloque una serie de características de estilo, que afectaran a todo el texto comprendido en el bloque. Esto se consigue con el uso del atributo STYLE, que posee a su vez una serie de sub-atributos y parámetros, cada uno de los cuales se encarga de definir una propiedad del estilo del texto. Por ejemplo:
<P STYLE="font-size:11px; font-family:Verdana;">parrafo con estilo en línea</P>
Con lo que todo el texto comprendido entre las etiquetas de párrafo aparecerá con un tamaño fijo de 11 pixels y con un tipo de letra Verdana, y cuyo resultado es:
Párrafo con estilo en línea
Mediante una clase o identificador: una clase es un conjunto de propiedades de formato agrupadas, a las que se les da un nombre representativo. Cuando queramos asignar a un bloque de texto las propiedades de esta clase solamente tenemos que fijar que el bloque pertenece a esa clase, y eso lo conseguimos con el uso del atributo CLASS. La definición de las propiedades de estilo de la clase se hace normalmente bien dentro del HEAD de la página, con el uso de la pareja de etiquetas <STYLE TYPE="text/css">...</STYLE>, e incluyendo dentro de ellas el nombre de la clase que deseamos crear asociado con los atributos de estilo que deseemos. Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="cabecera">Este texto es de la clase cabecera</SPAN>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
En este código lo primero que hacemos es definir en la cabeza de nuestra página una clase de estilo, dentro de las etiquetas STYLE, que llamamos cabecera, y que indicamos que es una clase mediante la colocación de un punto delante del nombre. Esta clase de estilo la definimos como de texto de tamaño 15 pixels, de fuente tipo Verdana y de peso bold (negrita). Posteriormente, en el cuerpo de la página, asignamos a un bloque SPAN esta clase de estilo, mediante el uso del atributo CLASS, por lo que todo el texto contenido en este bloque se mostrara con las características de estilo de la clase cabecera.
Otra forma de asignar estilos en la cabeza de la página es mediante el uso del atributo ID. En esta forma, definimos, dentro del HEAD de la página y dentro de las etiquetas STYLE, un estilo de formato de texto mediante la sintaxis #nombre{atributos de estilo}, y luego en el BODY, y mediante el atributo ID="nombre", asignamos a un bloque el estilo así definido. Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="cabecera">Este texto es de la clase cabecera</DIV>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
Con lo que obtenemos un resultado en todo análogo al obtenido mediante la definición de una clase con CLASS, siendo la única diferencia entre ellas (aunque muy importante) a nivel conceptual: mientras que una clase puede ser usada por todos los bloques que deseemos, un identificador ID sólo puede ser asignado a un único bloque, al que a partir de ese momento podemos referirnos en cualquier momento mediante su nombre identificador. Esto es de especial importancia a la hora del tratamiento del bloque mediante HTML Dinámico o JavaScript.
Una vez establecidas una serie de clases de estilo o de identificadores de bloque podemos sacar estos fuera de la cabeza de la página y llevarlos a un fichero aparte, externo. Entonces, para poder usar en nuestra página los estilos en él definidos debemos vincularlo a la misma, lo que se consigue introduciendo en la cabeza de nuestra página la instrucción:
<LINK REL="stylesheet" TYPE="text/css" HREF="ruta fichero">
Las ventajas que este uso supone son enormes, ya que mediante su uso podemos establecer en un sólo fichero el estilo general que van a tener todas las páginas que formen nuestro sitio web, con tan sólo hacer referencia al fichero externo al comienzo de cada página y asignando luego la clase que deseemos a cada bloque la página. Si posteriormente deseamos cambiar un estilo determinado o parte de él no necesitaremos editar cada una de las páginas de nuestro sitio, si no que bastara con cambiar el estilo deseado en el fichero de estilos externo.
El fichero de estilos externo debe contener tan sólo las definiciones de las clases y de los identificadores, en formato de texto plano, y se deben guardar con la extensión .css.
Por ejemplo, un fichero de estilos externo, llamado estilos1.css, podría ser:
.celda{fon-size:10px;font-family:Helvetica;}
#ejemplo1{margin-left:20pt;color:red;}
Si observamos la sintaxis que hemos usado para vincular un fichero de estilos externo o para definir los estilos en cabeza de página mediante las etiquetas STYLE, vemos que aparecen una serie de atributos hasta ahora desconocidos. Su significado es:
REL="stylesheet", indica que nos estamos refiriendo a un fichero de Hojas de Estilo.
TYPE="text/css", indica que el lenguaje empleado para definir estilos va a ser el CSS. Esto es así porque también podemos definir estilos mediante JavaScript, siendo la sintaxis de ambos métodos muy parecida, aunque no es conveniente usar este último tipo, ya que sólo es soportado bien por Netscape Navigator 4x y superiores.
HREF="ruta del fichero", que sirve para indicar al navegador dónde se encuentra el fichero de estilos externo. La ruta puede ser relativa a la estructura de carpetas local del servidor o disco local, o puede ser absoluta, en cuyo caso deberemos especificar el URL completo donde se encuentra el fichero.
NOTA.- El tema de los ficheros de estilo externos es especialmente delicado en Netscape Navigator 4x, ya que si establecemos una ruta equivocada o el fichero de estilos asignado no existe normalmente este navegador se queda "colgado" y no acaba de cargar la página web. Ademas, este cuelgue es definitivo, de forma que si hacemos un reload de la página o si cerramos el navegador y lo volvemos a abrir, se volverá a colgar. La única solución pasa por verificar que la ruta o el archivo existen y entonces resetear el ordenador y volver a arracar el navegador para cargar la página.
De todas formas si necesitas más información no dudes en utilizar mi privado.
mail: [email protected]
http://www.arroba-design.com
msn: [email protected]
Jose cortes
Director gerente
Con la aparición y puesta en uso de las Hojas de Estilos en Cascada (CSS) disponemos de una herramienta potente y versátil para trabajar con textos en HTML, hasta el punto que el W3C recomienda constantemente su uso, llegando al extremo de desaconsejar gran parte de las etiquetas estándar de HTMl en favor de las Hojas de Estilos.
Mediante esta técnica, perfectamente implementada en Internet Explorer 4 y superiores y en Netscape Navigator 6x, y parcialmente en Netscape Navigator 4x, podemos tener un control casi total sobre el texto de nuestro documento, mediante unas sencillas reglas de construcción y uso, que simplifican notablemente nuestro trabajo.
No es el objetivo de este capítulo un estudio exhaustivo del estándar CSS, que ya va por su versión 2, si no el estudio de cómo podemos formatear el texto en HTML, por lo que vamos a ver sólo aquellas partes de CSS que nos facilitan esta tarea.
Uso general de las Hojas de Estilos.-
La misión básica de las Hojas de Estilos es definir bloques o porciones de texto en nuestra página que van a tener unas propiedades de estilo de texto determinadas. Mediante el uso de la sintaxis propia de CSS podemos establecer o fijar cada una de las propiedades de formato que debe tener cada una de estas porciones de texto.
La asignación de un determinado estilo se puede hacer de diversas formas:
En línea: consiste en establecer dentro de la etiqueta definitoria del bloque una serie de características de estilo, que afectaran a todo el texto comprendido en el bloque. Esto se consigue con el uso del atributo STYLE, que posee a su vez una serie de sub-atributos y parámetros, cada uno de los cuales se encarga de definir una propiedad del estilo del texto. Por ejemplo:
<P STYLE="font-size:11px; font-family:Verdana;">parrafo con estilo en línea</P>
Con lo que todo el texto comprendido entre las etiquetas de párrafo aparecerá con un tamaño fijo de 11 pixels y con un tipo de letra Verdana, y cuyo resultado es:
Párrafo con estilo en línea
Mediante una clase o identificador: una clase es un conjunto de propiedades de formato agrupadas, a las que se les da un nombre representativo. Cuando queramos asignar a un bloque de texto las propiedades de esta clase solamente tenemos que fijar que el bloque pertenece a esa clase, y eso lo conseguimos con el uso del atributo CLASS. La definición de las propiedades de estilo de la clase se hace normalmente bien dentro del HEAD de la página, con el uso de la pareja de etiquetas <STYLE TYPE="text/css">...</STYLE>, e incluyendo dentro de ellas el nombre de la clase que deseamos crear asociado con los atributos de estilo que deseemos. Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="cabecera">Este texto es de la clase cabecera</SPAN>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
En este código lo primero que hacemos es definir en la cabeza de nuestra página una clase de estilo, dentro de las etiquetas STYLE, que llamamos cabecera, y que indicamos que es una clase mediante la colocación de un punto delante del nombre. Esta clase de estilo la definimos como de texto de tamaño 15 pixels, de fuente tipo Verdana y de peso bold (negrita). Posteriormente, en el cuerpo de la página, asignamos a un bloque SPAN esta clase de estilo, mediante el uso del atributo CLASS, por lo que todo el texto contenido en este bloque se mostrara con las características de estilo de la clase cabecera.
Otra forma de asignar estilos en la cabeza de la página es mediante el uso del atributo ID. En esta forma, definimos, dentro del HEAD de la página y dentro de las etiquetas STYLE, un estilo de formato de texto mediante la sintaxis #nombre{atributos de estilo}, y luego en el BODY, y mediante el atributo ID="nombre", asignamos a un bloque el estilo así definido. Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="cabecera">Este texto es de la clase cabecera</DIV>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera
Con lo que obtenemos un resultado en todo análogo al obtenido mediante la definición de una clase con CLASS, siendo la única diferencia entre ellas (aunque muy importante) a nivel conceptual: mientras que una clase puede ser usada por todos los bloques que deseemos, un identificador ID sólo puede ser asignado a un único bloque, al que a partir de ese momento podemos referirnos en cualquier momento mediante su nombre identificador. Esto es de especial importancia a la hora del tratamiento del bloque mediante HTML Dinámico o JavaScript.
Una vez establecidas una serie de clases de estilo o de identificadores de bloque podemos sacar estos fuera de la cabeza de la página y llevarlos a un fichero aparte, externo. Entonces, para poder usar en nuestra página los estilos en él definidos debemos vincularlo a la misma, lo que se consigue introduciendo en la cabeza de nuestra página la instrucción:
<LINK REL="stylesheet" TYPE="text/css" HREF="ruta fichero">
Las ventajas que este uso supone son enormes, ya que mediante su uso podemos establecer en un sólo fichero el estilo general que van a tener todas las páginas que formen nuestro sitio web, con tan sólo hacer referencia al fichero externo al comienzo de cada página y asignando luego la clase que deseemos a cada bloque la página. Si posteriormente deseamos cambiar un estilo determinado o parte de él no necesitaremos editar cada una de las páginas de nuestro sitio, si no que bastara con cambiar el estilo deseado en el fichero de estilos externo.
El fichero de estilos externo debe contener tan sólo las definiciones de las clases y de los identificadores, en formato de texto plano, y se deben guardar con la extensión .css.
Por ejemplo, un fichero de estilos externo, llamado estilos1.css, podría ser:
.celda{fon-size:10px;font-family:Helvetica;}
#ejemplo1{margin-left:20pt;color:red;}
Si observamos la sintaxis que hemos usado para vincular un fichero de estilos externo o para definir los estilos en cabeza de página mediante las etiquetas STYLE, vemos que aparecen una serie de atributos hasta ahora desconocidos. Su significado es:
REL="stylesheet", indica que nos estamos refiriendo a un fichero de Hojas de Estilo.
TYPE="text/css", indica que el lenguaje empleado para definir estilos va a ser el CSS. Esto es así porque también podemos definir estilos mediante JavaScript, siendo la sintaxis de ambos métodos muy parecida, aunque no es conveniente usar este último tipo, ya que sólo es soportado bien por Netscape Navigator 4x y superiores.
HREF="ruta del fichero", que sirve para indicar al navegador dónde se encuentra el fichero de estilos externo. La ruta puede ser relativa a la estructura de carpetas local del servidor o disco local, o puede ser absoluta, en cuyo caso deberemos especificar el URL completo donde se encuentra el fichero.
NOTA.- El tema de los ficheros de estilo externos es especialmente delicado en Netscape Navigator 4x, ya que si establecemos una ruta equivocada o el fichero de estilos asignado no existe normalmente este navegador se queda "colgado" y no acaba de cargar la página web. Ademas, este cuelgue es definitivo, de forma que si hacemos un reload de la página o si cerramos el navegador y lo volvemos a abrir, se volverá a colgar. La única solución pasa por verificar que la ruta o el archivo existen y entonces resetear el ordenador y volver a arracar el navegador para cargar la página.
De todas formas si necesitas más información no dudes en utilizar mi privado.
mail: [email protected]
http://www.arroba-design.com
msn: [email protected]
Jose cortes
Director gerente
