Efectos visuales

Descripción

Esta página muestra algunas aplicaciones de utilización de posicionamiento y otras propiedades de bloques CSS.
En ella se utilizan cuatro bloques principales, cuyos nombres aparecen en el menú de navegación del margen derecho, para el diseño de la página.
A medida que se pulsa en uno de los enlaces del menú, aparecerá en este bloque central el código CSS utilizado para el correspondiente bloque y el trozo de código HTML donde se aplica.

Body

El body se utiliza como bloque de contención del resto de los bloques, ocupará el 80% de la anchura de la pantalla, dejando un margen izquiedo del 10%.Se le ha dado un valor relative para su position.

Código CSS utilizado:

body{
position:relative;
left:10%;
width:80%;
border-left:navy 1px solid;
height:550px;
}

Codigo HTML donde se aplica:

Cabecera

La cabecera es un bloque de posicionemiento absoluto, ubicado en la parte superior del documento. Su anchura coincide con la del bloque padre y su altura está fijada a 100px.
Este bloque a su vez contiene otros dos, uno con el título ubicado en el margen superior izquierdo y otro, con el subtítulo, ubicado en la esquina inferior izquierda.

Codigo CSS utilizado:

#cabecera{
display:block;
position:absolute;
left:0;
top:0;
width:100%;
border: navy 2px solid;
height:100px;
background:#cccccc;
font-family:arial;
color:navy
}
.titulo_cabecera{
display:block;
position:absolute;
top:10px;
left:10px;
font-size:20px;
}
.subtitulo_cabecera{
display:block;
position:absolute;
right:10px;
bottom:10px;
font-size:15px;
}

Codigo HTML donde se aplica:

<div id="cabecera">
<p class="titulo_cabecera">EFECTOS VISUALES</p>
<p class="subtitulo_cabecera">Curso WEBCSS</p>
</div>

Menú

El bloque menú tiene, al igual que la cabecera un posicionamiento absoluto, de esta forma conseguimos que se ubique donde queremos,justo debajo de la cabecera en el margen izquierdo del body. Su anchura ocupará el 20% del body y su longitud está fijada a 200px.
En este bloque se situan los enlaces con las distintas anclas del documento.

Codigo CSS utilizado:

#titulo_menu{
text-align:center;
text-size:1.2em;
font-weight:bold;
}

Codigo HTML donde se aplica:

<div id="menu">
<p id="titulo_menu"Código CSS</p>
<hr />
<ul>
<li><a href="#apartado_body">Body</a></li>
<li><a href="#apartado_cabecera">Cabecera</a></li>
<li><a href="#apartado_menu">Menú</a></li>
<li><a href="#apartado_central">Central</a></li>
</ul>
</div>

Central

El bloque central es donde se encuentra el contenido de la página HTML, este tiene el posicionamiento absoluto, ocupando el resto del body que no es ocupado por el menú, y al igual que este, colocado debajo de la cabecera.
En este bloque se utiliza la propiedad overflow, tomendo esta el valor de scroll por ello que aparece la barra desplazadora.

Codigo CSS utilizado:

#central{
display:block;
position:absolute;
left:20%;
top:110px;
overflow:scroll;
width:80%;
height:450px;
}

Codigo HTML dande se utiliza: