Una capa nueva para el borde superior

La imágen de la curva de la parte superior de la página web la vamos a poner como una imagen de fondo (un gif) en una nueva capa que vamos a insertar en la página web, justo que quede al principio de todas las demás. La vamos a llamar curva-superior. Ya sabes, por un lado escribimos unas líneas en el código html de la plantilla.html y por otro lado definiremos las propiedades de esta nueva capa en la Hoja de Estilos llamada estilo-general.css

Abre el archivo plantilla.html con tu Html Kit e inserta esta línea justo entre la línea de la capa glogal y la de contenido:

<div id="curva-superior"></div>

Ha de quedar por tanto así:

.....
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi web</div>
.....

Como verás, esta línea no tiene contenido ninguno. Realmente no le hace falta pues lo único que queremos ponerle es la imagen de la curva de antes, pero eso lo vamos a definir con estilos css, no en el html de modo que se va a quedar así, vacia.

Ahora abre la hoja de estilos estilo-general.css e inserta esta otra línea donde definimos las propiedades de la capa curva-superior:

#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat;}

Qué hemos definido conesa línea de estilo? Le hemos dicho que la imagen de fondo será curva-superior.gif, que está en la carpeta objetos y que no se repita. Si ahora guardas la hoja de estilo estilo-general.css y haces vista previa desde el Html Kit verás este resultado.

Vaya mierda, que decepción. Se ve exáctamente lo mismo que antes de insertar la capa, nada de imagenes con bordes redondeados... qué ha pasado? Bueno, como la capa curva-superior no contiene nada de nada en su interior (en el html) el navegador la muestra con una anchura de cero y una altura cero, por lo que vemos... cero de esa capa y por tanto nada de imagen de fondo. Para arreglarlo basta con ponerle algo de contenido a esa capa, como por ejemplo una letra o una palabra, pero como no quiero que aparezca nada de eso, lo que haremos será definirle en la hoja de estilo una anchura y una altura. Cuál? pues la misma que tiene la imagen y asi nos aseguramos que se ve entera.

#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat; width:800px; height:12px;}

Has visto? Con width: 800px le indicamos que la capa ha de tener 800 pixeles de ancho y con height: 12px le decimos que su altura ha de ser de 12 pixeles, igual que la imagen de fondo. Ahora es de esperar que se vea y además completa, vamos a ver....

Bueno, la cosa va mejorando, aunque ahora encontramos otra cosilla que no nos gusta, y es que haciendo vista previa con Internet Explorer (con el Firefox no ocurre) aunque la imagen sale prefectamente, aparece un espacio en blanco separando la imagen del resto de la página y queda bastante feo.

Esto se arregla muy fácil añadiendo en la hoja de estilo, además de la altura y la anchura de antes, una palabra mágica nueva, que no vamos a explicar ahora pero que puedrás encontrar en el Curso de Estilos CSS. Lo que hemos de añadir es esto:

#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat; width:800px; height: 12px;
overflow:hidden;}

Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente, aunque ahora parece que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienvenido sobra y por otro lado, si le damos color de fondo blanco (white) a esa capa rosa, el efecto será aún mejor.

Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en rojo abajo:

#cabecera {background-color:pink; border-left:black 1px solid; border-right:black 1px solid
; border-top: black 1px solid;}

y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la línea así:

#cabecera {background-color:white;
border-left:black 1px solid; border-right:black 1px solid;}

El efecto conseguido, aunque no es asombroso, es más profesional.