Veamos un ejemplo de aplicación de bordes

Para practicar, vamos a dibujar algunos bordes en el ejemplo que llevamos hecho. Abre tu Html Kit y abre el archivo estilo-general.css

Ahora, dentro de los corchetes del elemento "contenido" escribe esto de abajo para dibujar un borde a la izquierda y un borde a la derecha:

contenido { ....lo que ya había .......... ; border-left:black 1px solid; border-right:black 1px solid;}

Si ahora guardas la Hoja de Estilo estilo-general.css y haces vista previa en el archivo plantilla.html podrás ver como aparecen bordes negros a los lados de la capa contenidos.

Problema con los distintos navegadores

El objetivo de toda página web es que se vea identicamente en cualquier navegador. Con lo que llevamos hecho en el ejemplo ya podemos observar un fallo. Acabo de descubrir una regla:

"Si defines un borde en un elemento, ese elemento no puede llevar también definido un ancho concreto mediante el width, es decir, no le podemos asignar una cantidad numérica, solamente se le puede definir width:auto". Si no seguimos esta regla, la web no se verá bien en todos los navegadores!"

Para arreglar esto basta con eliminar la cifra de la anchura para la capa contenido. Realmente no va a ser un problema eliminar ese width:800px, pues la anchura ya está definida por la capa que contiene a contenido (global), así que eliminamos width:800px de la capa contenidos en estilo-general.css la guardamos y hacemos vista previa para ver que ha ocurrido.

Vaya, más problemas.... ahora resulta que en Internet Explorer se ve bien, pero con el Opera se nos estropea la estructura... Esto lo arreglamos ahora mismo eliminando en la definición de estilo de la capa contenido la propiedad float:left que en realidad no nos hacía mucha falta.

Ahora sí que se ve correctamente en todos los navegadores... o al menos.. eso espero. Si no es así dímelo en el Foro CCTW vale?