7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 1/17
Alineación de elementos
con
Hojas de Estilo (CSS)
Ing. Marlene Melián Montalvo
División de Servicios Web. CITMATEL
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 2/17
Aspectos a tratar:
• ¿Qué es CSS?
• Razones para usar CSS
• Problemas en el uso de CSS
• Elementos en HTML y en CSS
• Márgenes cerrados
• Columnas líquidas. Expansión vertical
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 3/17
¿Quées CSS?
CSS (Cascading Style Sheets, u Hojas de
Estilo en Cascada) es la tecnología
desarrollada por el World Wide Web
Consortium (W3C) con el fin de separar la
estructura de la presentación.
Hoy en día es casi imposible diseñar un
sitio sin el empleo de las CSS debido a
las múltiples ventajas que el uso de las
mismas representa.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 4/17
Razones para usar CSS
• Separación del contenid o y la presentación
• Flexibilidad
• Dis eño úni co para las páginas del s it io
• Limp ieza del código fuente
• La compat ib i lidad y cont inuidad • Estandarización frente a especif ic aciones
pro pietarias, etc.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 5/17
Prob lemas en el uso de CSS
- Las alineaciones con o sin posicionamiento
- El uso columnas líquidas que no son más que
la expansión de una columna hasta ocupar la
totalidad del espacio deseado, independiente
del tamaño del contenido de la misma.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 6/17
Elementos en HTML
y en CSS
Hay dos tipos de elementos en HTML:
- Los elementos de bloque
- Los elementos en línea
Los elementos a nivel de bloqu e sonmo strado s con u n salto de línea antes y
después, mien tras q ue los elemen tos en línea
son mos trados en el lugar que aparecen en el
f lu jo d el texto
Document type definition: DTD
Elementos de bloque Elementos en línea
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 7/17
Elementos en HTML
y en CSS
Los elementos de bloque son aquellos quehabitualmente, pero no siempre contienen otros
Elementos. Normalmente pueden funcionar como
contenedores.
Los que sólo pueden contener otros elementos de bloque.
Body (en DTD estrechos).
Tipos de elementos de bloque
Los que pueden contener texto y elementos en línea
P (párrafo).
Pueden contener otros elementosen bloque así como elementos
en línea DIV y LI.
Elementos en línea
Generalmente sólo pueden contener texto y otr s elementos en línea.o
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 8/17
Los térm inos de b lo que y en línea tam b ién
existen en CSS, donde son usados paradist ing uir entre dos t ipos di ferentes de cajas,
los rectángulos invis ibles q ue c rean la
pres entac ión de una págin a.
Generalmente los elementos de blo que en
HTML generan cajas de blo que, mientras que
los elementos en línea gen eran cajas en línea.
HTML
Elementos de bloque
Elementos de línea
generan
generan
Cajas de bloque
Cajas de línea
CSS
Propiedaddisplay
Controlador
de presentación, no de contenido
Flujo normal del documento
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 9/17
Para un elemento flotante o posicionado
absolutamente, la propiedad display generalmente
se ignora, con excepción de cuando usamos
display:none
Valores de la propiedad display
block
list-item
table
run-in (a veces)
Cajas de bloque
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 10/17
Caja de bloque principal
contiene
Elementos de bloqueElementos en línea
generan
Cajas de bloque
anónimas
Una caja de bloque principal se convierte
en el bloque de contención para sus
bloques descendientes, asumiendo que
estén posicionados estática orelativamente. Para las cajas flotantes y
posicionadas absolutamente, se aplican
otras reglas.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 11/17
Elemento de bloque o Valores prop. display generadora de bloque
generan
Caja de bloque principal
Contiene sólocajas de bloque
Contiene sólocajas en línea
o
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 12/17
Márgenes cerrados
La distancia vertical entre dos cajas hermanasen un contexto de formato de bloque se
controla con las propiedades margin- top y
margin-bot tom.
La distancia vert ical entre dos cajas de b loque
adyacentes en un contexto de form ato de
bloqu e puede cerrarse, lo que sig ni f ica que se
comb inarán en u n únic o m argen b ajo c iertas
circunstancias.
Lo s márgenes se cierr an únic amen te cuando
están en c ontac to d irecto u no co n o tro. Si
ex is te un padding o un borde ent re el los, nose cierran.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 13/17
La propiedad text-align se especifica para la caja debloque contenedora
La propiedad vertical-align se especifica para cajas
en línea.
Permite cualquier tipo de alineación vertical, pero no
está pensado para ser el equivalente a la propiedad
"valign" de HTML en celdas.
Alineación izquierda
Alineación derecha
Alineación centrada
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 14/17
Columnas líquidas. Expansión vertical
Una de las propiedades frustrantes de las CSS está
determinada por el hecho de que los elementos se
expanden verticalmente sólo 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> sólo va a extenderse hacia abajo 200px.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 15/17
¿Cómo solucionar entonces el problema que vemos
en la siguiente figura?
Columna1
Columna2
Columna3
Cortar
imágende altura
1 pixel
Necesitamos obtener
Columna1 Columna2 Columna3
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 16/17
Contenedor
1 pixel
Propiedades:
background-image: url(...)background-repeat: repeat-y
Con este truco obtenemos la impresión deseada.
7/18/2019 Alineacion Elementos CCS
http://slidepdf.com/reader/full/alineacion-elementos-ccs 17/17
Direcciones en Internet donde se puede encontrar
información 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