Vieites en 11:46 25 oct 2008

2008-10-25T11:46:38Z

Página nueva

{{En_Construcion}}
== Condicións ==
* Axustar o deseño para albergar sempre a maior e mais importante columna da páxina independentemente da resolución do monitor no que se mostre.
* O contido da páxina débese de axustar ó ancho das pantallas.
* Todas as columnas deben ter a mesma altura.
* Ningunha columna débese de solapar có pé de páxina.
* Compatibilidade con todos os navegadores.

== Deseño ==
* Non se van a empregar táboas, aínda que dese xeito sería mais sinxelo pero, iso si, menos flexible que empregar elementos ''<div>''.
* O deseño debe axustarse sempre a albergar a maior das columnas da páxina, a que conteña a parte principal da Web.
:* Cada columna colócase de forma absoluta (en relación ó elemento ''<div>'' que as contén a todas), menos a que alberga o contido da páxina, que se colocará de forma estática.
* Para facer que as columnas sexan tan altas como o seu contido empregaremos as propiedades de desprazamento ''top'' e ''bottom''.
* Para facer que ningunha columna se solape có pe de páxina faise que este se situe a continuación do elemento ''<div>'' que contén todas as columnas. E, ademais, este elemento ''<div>'' será tan alto como a mais alta das columnas secundarias.
* Para facer que a páxina aumente o seu ancho nas pantallas de maior resolución e se reduza nas de menor, empregaremos as propiedades de ancho ''minimun'' e ''maximun'' que CSS nos proporciona.

== O Código e a súa Explicación ==
Segue os seguintes pasos para crear o proxecto presentado:

=== Creando o XHTML ===
<source lang="html4strict">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Deseño con varias columnas</title>

<link rel="stylesheet" type="text/css" href="varias-columnas.css" />
</head>

<body>
<div id="encabezamento">
<h1>Encabezamento</h1>
</div>

<div id="contenedor">
<div id="primeira-columna">
Texto da primeira columna
</div>
<div id="contido">
Texto da columna Contido
</div>
<div id="terceira-columna">
Texto da terceira columan
</div>
</div>

<div id ="pe">
<h6>Pe</h6>
</div>
</body>
</html>
</source>

=== Primeiro contido do arquivo .CSS ===
<source lang="css">
/* Documento CSS varias-columnas.css*/

body {
background: white;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
/*padding dun elemento é a cantidade de espazo
entre o borde e o conteido do elemento.*/
padding: 0;
}

h1, h6 {
margin: 0;
font-weight: normal;
}

#contenedor {
position: relative;
/*A propiedade min-height, establece unha
altura mínima para un elemento*/
min-height: 400px;
height: auto !important;
height: 400px;
border: 1px solid gray;
background: lightgrey;
max-width: 1000px;
min-width: 750px;
width: auto !important;
width: 750px;
margin: auto;
}

#primeira-columna,
#terceira-columna {
position: absolute;
top: 0;
bottom: 0;
border: 1px solid gray;
background: rgb(240,240,240);
width: 200px;
margin: 3px;
}

#primeira-columna {
left: 0;
}

#terceira-columna {
right:0;
}
</source>

=== Primeira modificación ===
A primeira modificación é no código XHTML. Para que as columnas secundarias poidan ter bordes, espazo de recheo e marxes debemos engadir dous novos elementos ''<div>'', que denominaremos:

<source lang="html4strict">
<div id="contenedor">
<div id="primeira-columna">
<div id="primeira-columna-interior">
Texto da primeira columna
</div>
</div>
<div id="contido">
Texto da columna Contido
</div>
<div id="terceira-columna">
<div id="terceira-columna-interior">
Texto da terceira columan
</div>
</div>
</div>
</source>

Deseño con varias columnas - Historial de revisiones

Vieites en 11:46 25 oct 2008