Está en la página 1de 17

Alineacin de elementos

con
Hojas de Estilo (CSS)

Ing. Marlene Melin Montalvo


Divisin de Servicios Web. CITMATEL

Aspectos a tratar:

Qu es CSS?
Razones para usar CSS
Problemas en el uso de CSS
Elementos en HTML y en CSS
Mrgenes cerrados
Columnas lquidas. Expansin vertical

Qu es CSS?
CSS (Cascading Style Sheets, u Hojas de
Estilo en Cascada) es la tecnologa
desarrollada por el World Wide Web
Consortium (W3C) con el fin de separar la
estructura de la presentacin.
Hoy en da es casi imposible disear un
sitio sin el empleo de las CSS debido a
las mltiples ventajas que el uso de las
mismas representa.

Razones para usar CSS

Separacin del contenido y la presentacin


Flexibilidad
Diseo nico para las pginas del sitio
Limpieza del cdigo fuente
La compatibilidad y continuidad
Estandarizacin frente a especificaciones
propietarias, etc.

Problemas en el uso de CSS

- Las alineaciones con o sin posicionamiento


-

El uso columnas lquidas que no son ms que


la expansin de una columna hasta ocupar la
totalidad del espacio deseado, independiente
del tamao del contenido de la misma.

Elementos en HTML
y en CSS
Hay dos tipos de elementos en HTML:
-

Los elementos de bloque


Los elementos en lnea
Los elementos a nivel de bloque son
mostrados con un salto de lnea antes y
despus, mientras que los elementos en lnea
son mostrados en el lugar que aparecen en el
flujo del texto
Document type definition: DTD
Elementos de bloque

Elementos en lnea

Elementos en HTML
y en CSS
Los elementos de bloque son aquellos que
habitualmente, pero no siempre contienen otros
Elementos. Normalmente pueden funcionar como
contenedores.

Tipos de elementos de bloque


Los que slo pueden contener
otros elementos de bloque.
Body (en DTD estrechos).

Los que pueden contener


texto y elementos en lnea
P (prrafo).

Elementos en lnea
Generalmente slo pueden contener
texto y otr os elementos en lnea.

Pueden contener otros elementos


en bloque as como elementos
en lnea DIV y LI.

Los trminos de bloque y en lnea tambin


existen en CSS, donde son usados para
distinguir entre dos tipos diferentes de cajas,
los rectngulos invisibles que crean la
presentacin de una pgina.
Generalmente los elementos de bloque en
HTML generan cajas de bloque, mientras que
los elementos en lnea generan cajas en lnea.
HTML
Elementos de bloque
Elementos de lnea

CSS
generan
generan

Cajas de bloque
Cajas de lnea

Propiedad
display

Controlador
de presentacin, no de contenido

Flujo normal del documento

Para un elemento flotante o posicionado


absolutamente, la propiedad display generalmente
se ignora, con excepcin de cuando usamos
display:none
Valores de la propiedad display

block
list-item
table
run-in (a veces)

Cajas de bloque

Caja de bloque principal


contiene

Elementos de bloque
Elementos en lnea
generan

Cajas de bloque
annimas

Una caja de bloque principal se convierte


en el bloque de contencin para sus
bloques descendientes, asumiendo que
estn posicionados esttica o
relativamente. Para las cajas flotantes y
posicionadas absolutamente, se aplican
otras reglas.

Elemento de bloque

Valores prop. display generadora de bloque

generan

Caja de bloque principal

Contiene slo
cajas de bloque

Contiene slo
cajas en lnea

Mrgenes cerrados
La distancia vertical entre dos cajas hermanas
en un contexto de formato de bloque se
controla con las propiedades margin-top y
margin-bottom.
La distancia vertical entre dos cajas de bloque
adyacentes en un contexto de formato de
bloque puede cerrarse, lo que significa que se
combinarn en un nico margen bajo ciertas
circunstancias.
Los mrgenes se cierran nicamente cuando
estn en contacto directo uno con otro. Si
existe un padding o un borde entre ellos, no
se cierran.

La propiedad text-align se especifica para la caja de


bloque contenedora

Alineacin izquierda
Alineacin derecha
Alineacin centrada

La propiedad vertical-align se especifica para cajas


en lnea.
Permite cualquier tipo de alineacin vertical, pero no
est pensado para ser el equivalente a la propiedad
"valign" de HTML en celdas.

Columnas lquidas. Expansin vertical

Una de las propiedades frustrantes de las CSS est


determinada por el hecho de que los elementos se
expanden verticalmente slo lo que ellos necesitan.
Ejemplo:
Si se cuenta con una imagen que su altura es de
200px y la misma est contenida dentro de un <div>,
este <div> slo va a extenderse hacia abajo 200px.

Cmo solucionar entonces el problema que vemos


en la siguiente figura?

Columna2
Columna1
Columna3

Necesitamos obtener

Columna1

Columna2

Columna3

Cortar
imgen
de altura
1 pixel

Contenedor

1 pixel
Propiedades:
background-image: url(...)
background-repeat: repeat-y

Con este truco obtenemos la impresin deseada.

Direcciones en Internet donde se puede encontrar


informacin sobre el tema tratado:
http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#comparison
http://www.useme.cl/layouts/
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.positioniseverything.net/articles/onetruelayout/examples