13.- Capa fija en la parte superior de la página.
Fijar una capa para que siempre este visible puede ser muy útil, por ejemplo, para tener una serie de enlaces siempre visibles o alguna publicidad. Con esta idea en mente, me propuse ver como podía tener una capa siempre visible con los enlaces más interesantes para mi Web.
Así, este sencillo código te permitirá tener siempre en la parte superior de tu Web una serie de enlaces, por mucho que te desplaces con el Scholl hacia la parte inferior de la página.
En la demo se ha agregado una cantidad de texto considerable para poder apreciar el efecto. En el código que se presenta a continuación solo aparece un párrafo de texto de relleno para no engordar el código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<title>Capa fija siempre visible en la parte superior de nuestra pagina</title>
<style type="text/css">
<!--
#navega #menu #fijo {
position:fixed;
font-family:verdana,arial;
font-size:11pt;
text-align:center;
padding: 10px 5px 10px 5px; /* margen con valores: arriba - derecha - abajo - izquierda */
top: 0px; /* Distancia hasta el borde superior */
left: 0px; /* Distancia hasta el borde izquierdo */
width:100%;
background-color:#FCAF62;
z-index: 1; /* hace que la capa sea opaca */
}
#texto {
position:absolute;
margin: 20px 5px 10px 5px; /* margen con valores: arriba - derecha - abajo - izquierda */
font-family:verdana,arial;
font-size:10pt;
}
-->
</style>
</head>
<body>
<div id="navega">
<div id="menu">
<div id="fijo">
<a href="#">Enlace 1</a> |
<a href="#">Enlace 2</a> |
<a href="#">Enlace 3</a> |
<a href="#">Enlace 4</a> |
<a href="#">Enlace 5</a> |
<a href="#">Enlace 6</a> |
<a href="#">Enlace 7</a> |
<a href="#">Enlace 8</a> |
<a href="#">Enlace 9</a>
</div>
</div>
</div>
<div id=texto>
<p>Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit sem per laoreet dictum,
quam diam dic tum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis,
massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Donec sed tellus eget sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at,
convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus
fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget
sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum,
turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget sapien
fringilla nonummy.</p>
<p>Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit sem per laoreet dictum,
quam diam dic tum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis,
massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Donec sed tellus eget sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at,
convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus
fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget
sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum,
turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget sapien
fringilla nonummy.</p>
</div>
</body>
</html>
