https://manuais.iessanclemente.net/index.php?title=Dese%C3%B1o_con_varias_columnas&feed=atom&action=historyDeseño con varias columnas - Historial de revisiones2024-03-28T22:26:13ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=Dese%C3%B1o_con_varias_columnas&diff=6355&oldid=prevVieites en 11:46 25 oct 20082008-10-25T11:46:38Z<p></p>
<p><b>Página nueva</b></p><div>{{En_Construcion}}<br />
== Condicións ==<br />
* 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.<br />
* O contido da páxina débese de axustar ó ancho das pantallas.<br />
* Todas as columnas deben ter a mesma altura.<br />
* Ningunha columna débese de solapar có pé de páxina.<br />
* Compatibilidade con todos os navegadores.<br />
<br />
== Deseño == <br />
* Non se van a empregar táboas, aínda que dese xeito sería mais sinxelo pero, iso si, menos flexible que empregar elementos ''&lt;div&gt;''.<br />
* O deseño debe axustarse sempre a albergar a maior das columnas da páxina, a que conteña a parte principal da Web.<br />
:* Cada columna colócase de forma absoluta (en relación ó elemento ''&lt;div&gt;'' que as contén a todas), menos a que alberga o contido da páxina, que se colocará de forma estática.<br />
* Para facer que as columnas sexan tan altas como o seu contido empregaremos as propiedades de desprazamento ''top'' e ''bottom''. <br />
* Para facer que ningunha columna se solape có pe de páxina faise que este se situe a continuación do elemento ''&lt;div&gt;'' que contén todas as columnas. E, ademais, este elemento ''&lt;div&gt;'' será tan alto como a mais alta das columnas secundarias.<br />
* 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.<br />
<br />
== O Código e a súa Explicación ==<br />
Segue os seguintes pasos para crear o proxecto presentado:<br />
<br />
=== Creando o XHTML ===<br />
<source lang="html4strict"><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<title>Deseño con varias columnas</title><br />
<!--Enlazamos o arquivo .css--><br />
<link rel="stylesheet" type="text/css" href="varias-columnas.css" /><br />
</head><br />
<br />
<body><br />
<div id="encabezamento"><br />
<h1>Encabezamento</h1><br />
</div><br />
<br />
<div id="contenedor"><br />
<div id="primeira-columna"><br />
Texto da primeira columna<br />
</div><br />
<div id="contido"><br />
Texto da columna Contido<br />
</div><br />
<div id="terceira-columna"><br />
Texto da terceira columan<br />
</div><br />
</div><br />
<br />
<div id ="pe"><br />
<h6>Pe</h6><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
=== Primeiro contido do arquivo .CSS ===<br />
<source lang="css"><br />
/* Documento CSS varias-columnas.css*/<br />
<br />
body {<br />
background: white;<br />
font-family: Arial, Helvetica, sans-serif;<br />
margin: 0;<br />
/*padding dun elemento é a cantidade de espazo<br />
entre o borde e o conteido do elemento.*/<br />
padding: 0;<br />
}<br />
<br />
h1, h6 {<br />
margin: 0;<br />
font-weight: normal;<br />
}<br />
<br />
#contenedor {<br />
position: relative;<br />
/*A propiedade min-height, establece unha<br />
altura mínima para un elemento*/<br />
min-height: 400px;<br />
height: auto !important;<br />
height: 400px;<br />
border: 1px solid gray;<br />
background: lightgrey;<br />
max-width: 1000px;<br />
min-width: 750px;<br />
width: auto !important;<br />
width: 750px; <br />
margin: auto;<br />
}<br />
<br />
#primeira-columna, <br />
#terceira-columna {<br />
position: absolute;<br />
top: 0;<br />
bottom: 0;<br />
border: 1px solid gray;<br />
background: rgb(240,240,240);<br />
width: 200px;<br />
margin: 3px;<br />
}<br />
<br />
#primeira-columna {<br />
left: 0;<br />
}<br />
<br />
#terceira-columna {<br />
right:0;<br />
}<br />
</source><br />
<br />
=== Primeira modificación ===<br />
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 ''&lt;div&gt;'', que denominaremos:<br />
<br />
<source lang="html4strict"><br />
<div id="contenedor"><br />
<div id="primeira-columna"><br />
<div id="primeira-columna-interior"><br />
Texto da primeira columna<br />
</div><br />
</div><br />
<div id="contido"><br />
Texto da columna Contido<br />
</div><br />
<div id="terceira-columna"><br />
<div id="terceira-columna-interior"><br />
Texto da terceira columan<br />
</div><br />
</div><br />
</div><br />
</source></div>Vieites