|
Puede ser interesante que en el diseño de una
página web se encuadre una parte de su contenido. Para ello
es necesario crear un recuadro que, en el caso que voy a
explicar, utiliza una tabla que se apoya en una clase creada
como estilo CSS.
En la página principal de Batiburrillo.net hay
varios recuadros que contienen distintas porciones de
información. Cada uno de estos recuadros está creado por
el método que os propongo.
Para ello es necesario, en primer lugar, crear una clase
que se guardará como un estilo CSS. Esta clase tendría la
estructura siguiente:
| Código: |
.recuadro {
background-color: White;
border: 1px solid #c0c0c0;
padding: 2px 2px 2px 2px;
} |
El nombre de la clase es recuadro.
En ella están definidos cuatro parámetros:
-
background-color: el color de
fondo del recuadro que, en este caso, es blanco.
-
border el borde del recuadro
que tiene un grosor de un píxel y un color de código
hexadecimal #c0c0c0 (gris claro).
-
padding: indica la separación
existente entre el borde y el interior, la zona en
la que va el contenido. En nuestro caso es de 2
píxeles en los cuatro lados.
Para llamar a esta clase podemos
utilizar dos métodos. Introduciendo en la zona <head>
... </head> del documento la definición de la forma
siguiente:
| Código: |
<style type="text/css">
.recuadro {
background-color: White;
border: 1px solid #c0c0c0;
padding: 2px 2px 2px 2px;
}
</style> |
O crear una hoja de estilos, si no la
tienes ya creada, e introducir en la misma la definición
de la clase recuadro. Si esa hoja se llama
estilos.css y se aloja en la carpeta estilos,
deberás llamarla en tu documento, también dentro de la
zona <head> ... </head>, con la instrucción siguiente:
| Código: |
<link rel="stylesheet" type="text/css" href="estilos/estilos.css"> |
Lo que tienes que hacer ahora es
utilizar el estilo en tu página o páginas. Para ello
vamos a crear una tabla que sirva para albergar el
contenido. Algo como lo siguiente:
| Código: |
<table width="100%" class="recuadro">
<tr>
<td>
Aquí va el contenido
</td>
</tr>
</table> |
El valor width, que en este caso
es del 100%, puede adaptarse a nuestras necesidades.
Podemos utilizar valores relativos (100%, 90%...) o
absolutos (750px, 400px...). Si
personalizamos Aquí va el contenido, podríamos
obtener algo como lo siguiente:
|
|
|
:: De mujeres y hombres. Las
relaciones entre sexos opuestos pueden ser buenas o malas, depende de múltiples
factores. A veces la convivencia diaria deteriora lo que un principio era
agradable para la pareja, lo que, a decir verdad, no ocurre siempre. Pero de eso
no vamos a hablar ahora. Queremos mostrar como puede ser un primer contacto
entre un hombre y una mujer, cuando no se conocen... |
|
Adáptalo a tus necesidades. Ten en
cuenta que en una misma página podrás crear varios
recuadros utilizando una única definición de la clase.
|
