Veiga: /* Recursos externos */

2010-11-15T14:26:57Z

Recursos externos

Página nueva

== Introdución ==
Có flotado e o posicionamiento CSS permite, en síntese, un máximo control sobre o lugar que cada elemento dunha páxina Web debe ocupar dentro da propia páxina, as súas condicións de visibilidade e "flotabilidade", así como o manexo de capas.
Aquí veremos as propiedades CSS 2.1 para controlar o posicionamento dos elementos: ''float'', ''clear'', ''position'', ''bottom'', ''top'', ''left'', ''right'', ''overflow'', ''clip'', ''visibility'' e ''z-index''.

== Fluxo normal ==
Cando se fala de '''fluxo normal''' significa que os obxectos se dispoñen de arriba a abaixo e de esquerda a dereita.
Flotando e posicionando con CSS conseguimos que os elementos deixen o fluxo normal.

== Flotar ==
Flotar serve para mover unha caixa á esquerda ou dereita ata que o seu borde exterior toque o borde da caixa que o contén ou outra caixa flotante.
{{Alerta|Nota|Cando queremos flotar un elemento éste terá que ter definido implícita o expresamente o seu largo.}}
'''As caixas flotantes non se atopan no "fluxo normal" do documento polo que as caixas que seguen o fluxo normal compórtanse coma se as flotantes non estivesen aí.'''

Flotar é mais que mover unha imaxe, serve para crear deseños multicolumna, barras de navegación de listas non numeradas, aliñación en forma de táboa sen táboas, e moito máis.
Para todo iso empregarase a propiedade '''''float'''''.

Cando colocamos unha imaxe nun documento e lle cambiamos a alineación con respecto ao texto, en realidade o que estamos facendo é flotar. Agora grazas a CSS podemos controlar todas esas propiedades.

=== Caixas non flotantes ===
Para ver as consecuencias de flotar caixas facemos este exemplo base. Trátase de tres divs de distintas cores e tamaños, os tres están metidos no interior dun div chamado "contido" basicamente para que o conxunto se atope centrado no navegador.
:* '''Arquivo html:'''
<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" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>Flotar</title>
</head>
<body>
<div id="contido">
<div id="caixa1"> Caixa 1 </div>
<div id="caixa2"> Caixa 2 </div>
<div id="caixa3"> Caixa 3 </div>
</div>
</body>
</html>
</source>
:* '''Arquivo estilos.css:'''
<source lang="css">
body {
font-weight: bold;
color: white;
}
#contido {
/* Ancho de 700px e centrado no navegador */
width: 700px;
margin: auto;
/* Borde sólido e fondo gris clariño */
border: solid 1px black;
background-color: #CCCCCC;
}
#caixa1 {
width: 100px; height: 100px;
background-color:#FF0000;
border: solid 1px black;
margin: 10px;
}
#caixa2 {
width: 130px; height: 130px;
background-color:#00FF00;
border: solid 1px black;
margin: 10px;
}
#caixa3 {
width: 160px; height: 160px;
background-color:#0000FF;
border: solid 1px black;
margin: 10px;
}
</source>

Como se trata de tres elementos de bloque cada un deles comeza debaixo do anterior.
[[Imagen:flotar1.jpg|center]]

=== Flotar unha caixa á dereita ===
Agora flotamos a Caixa1 á dereita, así que temos que modificar o selector #caixa1 do arquivo estilos.css, o resto deixarémolo igual:
<source lang="css">
#caixa1 {
width: 100px; height: 100px;
background-color:#FF0000;
border: solid 1px black;
margin: 10px;
/*Flotar á dereita */
float: right;
}
</source>

Como se mostra na seguinte imaxe, cando se flota a Caixa1 á dereita, sácase do fluxo normal do documento e móvese á dereita ata que o seu borde dereito toca o borde dereito do bloque que o contén.
[[Imagen:flotar2.jpg|center]]
:: '''Nota:''' Recordade que non chega a "pegar de todo" pois no estilos.css configúrase para as tres caixas unha marxe de 10px en todos os lados.

=== Flotar unha caixa á esquerda ===
Agora ímos flotar a Caixa1 á esquerda, polo que se saca outra vez do fluxo do documento e móvese á esquerda ata que o borde esquerdo toca o borde esquerdo do bloque que o contén.
Temos que modificar o selector #caixa1 do arquivo estilos.css, o resto deixarémolo igual:
<source lang="css">
#caixa1 {
width: 100px; height: 100px;
background-color:#FF0000;
border: solid 1px black;
margin: 10px;
/*Flotar á esquerda */
float: left;
}
</source>

Posto que xa non se atopa no fluxo do documento, non ocupa espazo e sitúase sobre a Caixa2, ocultando así parte dela.
[[Imagen:flotar3.jpg|center]]

=== Flotar todas as caixas á esquerda ===
Ó flotar as tres caixas á esquerda, Caixa1 móvese á esquerda ata que toca a caixa que o contén e as outras dúas caixas móvense á esquerda ata que tocan a caixa flotante anterior.
Temos que modificar os selectores #caixa1, #caixa2 e #caixa3 do arquivo estilos.css tal e como se fixo no apartado anterior.

O resultado obtido podémolo ver na seguinte imaxe.
[[Imagen:flotar4.jpg|center]]
{{Alerta|Nota|Tal e como se ve na imaxe anterior, o div "contido" ten agora unha altura de 0px, xa que todo o que ten no seu interior está fóra do fluxo do documento. É dicir, non ten nada dentro e non precisa ter unha altura determinada.
: Para que se volva a ver o "contedor":
:* Pódeselle poñer unha altura configurando no selector #contido a propiedade ''heigth'' cunha altura maior que o alto da caixa máis grande.
::: Así e todo os divs de cores seguen estando no interior do div "contido" e iso vese en que non saen do ancho marcado por este e o aliñamento é con respecto a el.
:* Tamén se pode flotar á esquerda a caixa con id #contido, así volvería a aparecer, iso si, flotada á esquerda.
:* Engadir un div totalmente baleiro dentro do div "contido" e despois das tres caixas flotadas e que configuraremos coa propiedade '''''clear''''' có valor, por exemplo, '''''both'''''. Esta é, sen dúbida, a mellor solución.}}

::: A seguinte imaxe mostra o resultado de engadir ó selector #contido a propiedade ''height: 200px''.
[[Imagen:flotar5.jpg|center]]

* '''Bloque contedor demasiado estreito.'''
: Un caso curioso é cando o noso div "contido" é demasiado estreito como para que os elementos flotados collan horizontalmente. Se é así, o que non colla desprazarase cara abaixo. Podemos ver esta situación na seguinte imaxe, onde se configurou o ancho do div "contido" con un width de 350px (recordar que a suma dos anchos das tres caixas, mais as súas marxes, é maior que eses 350px).
[[Imagen:flotar6.jpg|center]]
: A orde das caixas no documento HTML é Caixa1 - Caixa2 - Caixa3, pero se cambiamos a orde das caixas a Caixa 3 - Caixa2 - Caixa1 vemos na seguinte imaxe que o resultado cambia moito. Iso é debido a que a Caixa1 tropeza coa Caixa3 ó intentar ser flotada á esquerda.
[[Imagen:flotar7.jpg|center]]

== Marxes negativos e solapamento ==
As dúas grandes regras do flotamento é que os obxectos flotados nunca deberían ir mais alá da área de contido do bloque que os contén e que nunca debería solapar a outros elementos.
Podemos romper estas pautas cando aplicamos marxes negativos:
<source lang="css">
img {float: left; margin: -10px; }
</source>

== Limpar (''clear'') ==
* Se se quere que a área que está ó lado do elemento flotado se manteña limpa e que o seguinte elemento comeze na súa posición normal no bloque que o contén, utilizarase a propiedade ''clear''.
* Pode ter varios valores: ''left'', ''right'', ''both'', ''none'' e ''inherit''.
* O valor ''left'' indica que o elemento comeza por debaixo de calquera elemento que fora flotado no extremo esquerdo do bloque ó que pertence.
* O valor ''right'' igual que ''left'' pero cambiando esquerda por dereita.
* O valor ''both'' move cara abaixo o elemento ata que estea limpo de elementos flotados a ambos lados.

Exemplo:

Partimos da seguinte imaxe e o seguinte texto:

[[Imagen:flotar-1.jpg]]

Agora aplicámoslle á marca IMG un estilo no que lle indicamos que a imaxe flote a esquerda, e ademáis engadímoslle un padding de 10px. E obteremos o seguinte resultado:

[[Imagen:flotar-2.jpg]]

Podemos observar que a imaxe sigue no seu lugar (co padding de 10 px correspondente) e o texto sube para flotar ó arredor da imaxe.

O '''problema''' que atopamos é que o div principal non é suficientemente alto para rodea-la imaxe, e isto é debido a que '''cando flotamos unha imaxe ésta é sacada do fluxo normal do documento'''. Polo tanto o div principal xa non ve a imaxe como parte do seu contido, polo que non pode rodeala.

Hai 2 formas de '''solucionar este problema''':

'''1ª.- Engadirlle ó contedor principal a propiedade float'''. O facer isto o contedor principal abarcará o resto dos float anidados que teñamos dentro. O resultado é o seguinte:

[[Imagen:flotar-3.jpg]]

'''2ª.- Facer un clear both nalgún elemento que esté dentro do contedor principal (xeralmente o derradeiro elemento)'''. Ísto pódese facer engadindo por exemplo á marca BR dita propiedade clear.

Aquí vémo-lo código do exemplo, e observamos que temos o contedor principal, unha imaxe e un párrafo e ningunha marca máis. Polo que podemos engadir un BR ó termina-lo párrafo e o resultado sería o mesmo.

[[Imagen:flotar-4.jpg]]

'''Polo tanto cando temos un elemento cunha propiedade clear, que esté contido dentro de un outro, dita propiedade cancelará a partir de ahí os floats que estean activados e o contedor principal expandirase automáticamente ata abarcar tódolos contedor anidados ,incluídos os elementos con propiedade float.'''

E o resultado será polo tanto:

[[Imagen:flotar-5.jpg]]

== Posicionamento ==
=== Introdución ao posicionamento ===
Unha vez familiarizado có modelo de caixas é preciso pasar ós modelos de posicionamento e de formato visual para conseguir entender a forma na que se organizan os elementos nunha páxina.
=== Propiedade ''display'' ===
Nun documento temos elementos de tipo bloque como ''p'', ''h1'', ''div'',... e elementos "en liña" como ''strong'' e ''span''. É posible cambiar o modo en que o documento interpreta estes elementos empregando a propiedade ''display''.
* Para facer que un elemento "en liña" se comporte como un elemento de tipo bloque estableceremos a súa propiedade ''display'' en ''block''.
* Para facer que un elemento non xere caixa establecemos a súa propiedade ''display'' en ''none'', isto fará que a caixa e todo o seu contido non se mostrará e non ocupará espazo no documento.

=== Propiedade ''position'' ===
Para posicionar elementos nun documento temos a propiedade ''position''.
A propiedade '''''position''''' admite cinco valores: ''absolute'' , ''relative'' , ''static'' , ''fixed'' e ''inherit''. Por defecto é ''static'' que será que segue o fluxo normal dado pola posición dese elemento no (X)HTML.

* '''''position:static'''''
:: A posición ''static'' é o valor por defecto de todos os elementos HTML, e polo tanto non fai falla especificar este estilo.
:: Os elementos en posición estática vanse debuxando un a continuación dotro, segundo as regras ordinarias, fluíndo coa páxina.

* '''''position: relative'''''
:: A posición relativa é un concepto moi sinxelo de entender. Se posicionamos un elemento relativamente, permanecerá exactamente onde está. Logo, pode cambiar o elemento "relativo ao seu punto de partida" establecendo unha posición vertical ou horizontal.
:: Podemos ver este exemplo no que se desprazou a Caixa2 50px do extremo esquerdo e 50 px do extremo superior da súa posición relativa.
:: '''O CSS quedará así:'''
<source lang="css">
body {
font-weight: bold;
color: white;
}
#contido {
/* Ancho de 700px e centrado no navegador */
width: 350px;
margin: auto;
/* Borde sólido e fondo gris clariño */
border: solid 1px black;
background-color: #CCCCCC;
}
#caixa1 {
width: 100px; height: 100px;
background-color:#FF0000;
border: solid 1px black;
margin: 10px;
}
#caixa2 {
width: 130px; height: 130px;
background-color:#00FF00;
border: solid 1px black;
margin: 10px;
/* Posicionamento relativo */
position: relative;
left: 50px; top: 50px;
}
#caixa3 {
width: 160px; height: 160px;
background-color:#0000FF;
border: solid 1px black;
margin: 10px;
}
</source>
:: '''E obteremos o seguinte resultado:'''
[[Imagen:flotar10.jpg|center]]
:: Fixádevos como se despraza a caixa verde pero o resto do documento segue supoñendo que se atopa na súa posición orixinal (como se non se movera).
Outro elemento posicionado relativamente que lle siga inmediatamente no fluxo HTML calculará a súa orixe como segue:
::: 1. Se o seguinte elemento é un fillo do anterior, a orixe deste seguinte estará no final do anterior.
::: 2. Se o seguinte elemento non é un fillo do primeiro elemento, este seguinte elemento terá a súa orixe onde o primeiro elemento tería o seu final se non se fixaran as súas propiedades ''top'' e ''left''.
:: Para demostrar este segundo punto, mira como queda ó modificar o html e meter a Caixa 1 dentro da Caixa 2 que segue posicionada de xeito relativo:
[[Imagen:flotar11.jpg|center]]
* '''''position: absolute'''''
:: A posición absoluta saca o elemento do fluxo do documento, non ocupando ningún espazo. Outros elementos no fluxo normal do documento actuarán como se o elemento posicionado absolutamente nunca estivese aí.
:: Se o noso elemento absoluto non está contido dentro de ningún outro, a posición de coordenadas mídese respecto do inicio da etiqueta BODY (contedor principal). Se o o noso elemento absoluto está contido dentro doutro elemento, e este contedor está posicionado absoluta ou relativamente, as coordenadas do elemento absoluto "contido" calcúlanse dende a orixe do elemento contedor.

{{Alerta|Determinar orixe coordenadas|
Determinar a orixe de coordenadas a partir do cal se despraza unha caixa situada de forma absoluta é un proceso complexo que se compón dos seguintes pasos:

* Búscanse todos os elementos colectores da caixa até chegar ao elemento da páxina.
* Percórrense todos os elementos colectores empezando polo máis próximo á caixa e chegando até o BODY
* De todos eles, o navegador queda co primeiro elemento colector que estea situado de calquera forma diferente a position: static
* A esquina superior esquerda dese elemento colector situado é a orixe de coordenadas.
}}

:: Os elementos "absolutamente" posicionados dentro dun documento HTML (e tamén os elementos ''children'' que engloba) non forman parte do fluír xeral do resto de elementos do documento. A súa posición é asignada independentemente da que ocupen o resto dos elementos do documento.
:: Configúrase a posición coas propiedades ''top'' e ''left'': coa propiedade '''''top''''' indicamos a posición vertical da esquina superior esquerda do elemento a posicionar con respecto ao elemento anterior existente na páxina e, coa propiedade '''''left''''' a posición horizontal desa esquina con respecto ao elemento contedor.
:: Se configuramos a propiedade ''position'' da Caixa 2 como ''absolute'' o resultado é o seguinte:
[[Imagen:flotar12.jpg|center]]
* '''''position: fixed'''''
** O posicionamento fixo é como o posicionamento absoluto pero o elemento posicionase esta vez en relación o porto de visualización (normalmente, a fiestra do navegador).

[http://www.librosweb.es/css/capitulo5/posicionamiento_absoluto.html Exemplos de posicionamento absoluto]

=== Propiedade ''visibility'' ===

A propiedade visibility dun elemento controla se este será visualizado ou non, segun a fixemos en '''visible''' ou '''hidden'''.

'''Aínda que o elemento non sexa visible, continúa ocupando o seu espazo no fluír do documento'''. é dicir, ao contrario do que ocorría coa propiedade ''display'' (incluída dentro das propiedades de Clasificación): se a propiedade ''display'' fíxase en ''none'', o espazo que debería ocupar este elemento é reutilizado.

=== Propiedade ''clip'' ===

A propiedade clip permite decidir que parte dun elemento será visible.

{{Alerta|Nota|Non afecta o espazo ocupado polo elemento no fluxo HTML.}}

O exemplo mostra a sintaxe para determinar a zona visible, usando regras de estilo in line, ou scripts.

A orde dos parámetros ha de ser: top, right, bottom, left:

{{Alerta|Nota|Para que o clip funcione a posicion debe axustarse a absolute.}}

<pre>
<IMG ID=Olivia1 STYLE="position:absolute; top:0px; left:0px; width:136px;
height:228px; clip:rect(0 136 228 0)" SRC=olivia1.gif>
</pre>

Nesta dirección podedes atopar un uso interesante da [http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html función clip para crear thumbnails].

=== Propiedade ''overflow'' ===
A propiedade ''overflow'' permite elixir o que sucede co contido dun elemento cando este non encaixa ou coincide co rectángulo definido por algunha das propiedades ''top'', ''left'', ''height'' e ''width''. Son catro posibles valores para esta propiedade:
#'''Visible''' -- Expande o tamaño do elemento até dar encaixe a todo o contido, é o valor por defecto.
#'''Hidden''' -- Axusta o tamaño do contido ao declarado do elemento.
#'''Auto''' -- Coloca barras de ''scroll'' no elemento só se o seu contido excede do tamaño fixado.
#'''Scroll''' -- Coloca barras de ''scroll'' independentemente do tamaño do elemento.

Exemplo de ''overflow'':

<source lang="html4strict">
<DIV STYLE="position:absolute; top:60px; left:0px; width:100px; height:100px;
overflow:visible; background-color:red; ">
Isto é corto
</DIV>

<DIV STYLE="position:absolute; top:60px; left:200px; width:100px; height:100px;
overflow:scroll; background-color:green; ">
Isto é largoooooooooo
</DIV>
</source>

=== Propiedade ''z-index'' ===

Se cando definimos algun elemento con posicion absoluta, este ten que visualizarse no mesmo lugar ocupado por outro elemento, producirase unha superposición de elementos visualizandose, na parte coincidente, só o que está ocupando a posición ou capa superior.

Por defecto, os elementos se apilan na orde en que aparecen: o elemento situado mais tarde no arquivo orixe quedará arriba.

A propiedade '''z-index permite especificar o z-orde dos elementos''', isto é, a orde de apilamiento en capas do documento.

{{Alerta|Nota|Os elementos con maior Z-INDEX son colocados encima dos que teñan menor Z-INDEX , quedando estes últimos tapados polos primeiros.
A propiedade Z-INDEX só se aplica a elementos que teñan a propiedade position en absolute ou relative.}}

Exemplos de overflow e z-index.

[[Imagen:Exemplo-overflow.jpg]]

== Herdanza en CSS ==

CSS traballa na herdanza cunha valor denominado '''inherit'''. Cando se aplica a unha propiedade dun elemento este valor, dito elemento terá o mesmo valor que ten o elemento pai.

Por exemplo, con esta folla de estilos:

<source lang="css">
.un{
background-color: blue;
color: black;
}

.dous{
background-color: inherit;
color: inherit;
font-weight: normal;
}
</source>

E o seguinte fragmento HTML

<source lang="html4strict">
<div class="un">
<p class="dous">
Hola mundo, isto é un párrafo !
</p>
</div>
</source>

A cor de fondo do elemento div "un" é de cor azul, porque a cor de fondo da propiedade está establecida en azul.

A cor de fondo do parágrafo é tamén de cor azul, porque a cor de fondo está establecida como inherit, e polo tanto herdará do elemento pai o seu color de fondo e tamén o color do texto por que tamén ten a propiedade como inherit.

Hai que ter en conta que non tódalas propiedades poden ser herdadas.

== Recursos externos ==
* '''Visita o seguinte [http://www.ignside.net/man/css/posicionamiento.php Recurso externo], onde poderás atopar uns exemplos moi bos sobre ''Posicionamento''.'''
*[http://www.barelyfitz.com/screencast/html-training/css/positioning/ Exemplo posicionamento]
* [http://www.librosweb.es/css/capitulo5.html Posicionamento e Visualización]

--[[Usuario:Vieites|Vieites]] e [[Usuario:Veiga|Veiga]] 10 Nov 2008.

Flotar e posicionar - Historial de revisiones

Veiga: /* Recursos externos */