"Lección 2", 2=>"Lección 3"); $ruta=array(1=>"../lec2.html", 2=>"../bases_de_datos_mysql.html"); ?> Propiedad float de los divs o capas - Colocar un logotipo a mi web - Fondo degradado en html

  • En espera
atras

1.6 Colocar el logotipo: float

adelante

Div cabecera y fondo degradado

En este capítulo vamos a colocar toda la parte arriba. Lo primero que vemos ahí (pulsa aquí para ver nuestro objetivo) es un rectángulo azul (la cabecera de la página) y dentro vemos en un lado el logotipo y en otro un anuncio. Pues vamos a empezar poniendo la cabecera.

Para ello lo primero que hacemos es definir el div cabecera en la hoja de estilos. Como vamos a querer que lo que haya por debajo de este div (el menú de navegación que pondremos después) esté separado de la cabecera le pondremos un margin a la misma por abajo, en este caso de 4 píxeles. De esta forma añadimos la siguiente línea a nuestro estilo.css:

#cabecera {margin: 0px 0px 4px 0px}

Ahora nos vamos al html y ponemos el div cabecere dentro del div global, de la siguiente forma:

<body>

<div id="fondo">
<div id="global">
<div id="cabecera">
</div>
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>

</body>

Esta cabecera no tiene de fondo un color normal, sino que tiene un color degradado, que va cambiando. Esto no se puede hacer en código html, por lo que para poder ponerlo así tenemos que usar una imagen de fondo. En este caso usamos esta imagen:

degradado azul

Dadle botón derecho y guardadla en la carpeta imagenes. Ahora lo que hacemos es colocarla de fondo en el div cabecera. Además, como la imagen tiene una altura de 120 píxeles tenemos que indicarle a la cabecera que tenga esa altura. La altura se pone con el código "height: alturapx". De esta forma nos queda la cabecera en la hoja de estilos de ls siguiente forma (en el caso de que la imagen se llame degradado1 y esté en le carpeta objetos):

#cabecera {background-image:url(imagenes/degradado1.jpg); height: 120px; margin: 0px 0px 4px 0px}

Si mirais ahora vuestra página en el explorador vereis que ya tenemos hecha nuestra capa cabecera con su fondo degradado. Ahora sólo tenemos que ponerle lo de dentro.

Colocar el logotipo y el anuncio

Si os fijais el el banner publicitario tiene que quedar a un lado, y el logotipo a otro, y además que queden los dos centrados verticalmente. Para eso lo que vamos a hacer es crear dos divs, uno para cada elemento. Primero creamos el div del logotipo. Para poder poner un div a su lado tenemos que recurrir a una característica llamada float. El código de esta característica es "float: posición", y donde pone posición podemos poner right, left o center. El float sirve para poner el div en un lado concreto y permitir poner cosas al otro lado. De esta forma el div logotipo tendrá un "float: left" y el div banner tendrá un "float: right":

#logotipo {float:left}
#banner {float:right}

Ahora nos vamos a la html, y colocamos los dos divs dentro de la cabecera, de la siguiente forma:

<body>

<div id="fondo">
<div id="global">
<div id="cabecera">
<div id="logotipo"></div>
<div id="banner"></div>
</div>
<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>

</body>

El logotipo en este caso no es una imagen de fondo, sino que es una imagen en sí, en la que si queremos podemos ponerle un enlace (para que cuando demos clic nos mande a una página). Por lo tanto forma parte del contenido, no de los estilos, y hay que ponerlo en la página html con su etiquete.

El código para poner una imagen es <img src="rutadelaimagen" alt="frase">. En este caso tenemos que poner la ruta de la imagen y donde pone "frase" tenemos que poner la frase que se ve cuando dejamos el ratón puesto encima de la imagen (sólo se ve en algunos exploradores). Por lo tanto coged un logotipo que hayais hecho o coged el de esta web y guardadlo en la carpeta imagenes:

logo de tu web de informatica

Una vez tengais el logotipo sólo teneis que añadir el código en el html. En el caso de que la imagen se llame site_logo.gif y esté en la carpeta imagenes quedará así:

<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
 <img src="imagenes/site_logo.gif" alt="Tu web de informática">
</div>
<div id="banner"></div>
</div>

<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>

</body>

En el div banner también podeis colocar una imagen como si fuera un anuncio.

Ahora pasa una cosa, el logotipo cuando vemos nuestra página en el explorador se ve en la parte de arriba, por lo que tenemos que centrarlo horizontalmente, así como despegarlo un poco del lado izquierdo. Esto lo hacemos poniéndole un padding al div logotipo. En esta caso tenemos que tener cuidado. Si habeis cogido el logotipo que puse arriba éste tendrá una altura de 94 píxeles, por lo que si la capa cabecera mide de alto 120 píxeles, nos sobran 26 píxeles, lo que quiere decir que tenemos que poner un padding de 13px por arriba y 13px por abajo:

#logotipo {float:left; padding:13px 0px 13px 10px}
#banner {float:right}

Luego con el div banner haremos lo mismo si queremos colocar una imagen, teniendo cuidado de no superar con el padding el alto de la capa cabecera.

De esta forma el código html nos quedó así:

<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
 <img src="imagenes/site_logo.gif" alt="Tu web de informática">
</div>
<div id="banner"></div>
</div>

<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>

</body>

Y el código css así:

body {background-image: url(imagenes/fondo.jpg); text-align: center}

#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}

#global {margin: 0px auto; width: 800px}

#cabecera {background-image:url(imagenes/degradado1.jpg); height: 120px; margin: 0px 0px 4px 0px}

#logotipo {float:left; padding:13px 0px 13px 10px}
#banner {float:right}

De forma que la página cuando la veamos en el explorador se verá así. Si has tenido algún problema durante lo que llevamos o no te sale como debería no dudes en preguntarnos en el foro.

atras
adelante

Volver a crear webs>>


Creada el 26/04/08 17:09
Copyright © - Todos los derechos reservados - Página creada por Juanma