Uso de atributos de posición de contenedores para diagramar elementos en un documento web con CSS.

1. NOCIONES BÁSICAS
DE MAQUETACIÓN CON CSS
miércoles 28 de agosto de 2013

2. 1. la maquetación se realiza
por medio de contenedores
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
HTML
cabecera
enlaces
cuerpo
pie
miércoles 28 de agosto de 2013

3. 2. los contenedores (<div>)
sin atributos funcionan por
apilamiento
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
cabecera
enlaces
cuerpo
pie
HTML
miércoles 28 de agosto de 2013

4. 3. el atributo float
permite sacar a un elemento del
flujo del documento, y
posicionarlo a la izquierda o
derecha de otros elementos
adyacentes. Admite tres valores,
right, left y none.
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
cabecera
enlaces cuerpo
pie
#enlaces {
width: 300px;
float: left;
}
miércoles 28 de agosto de 2013

5. miércoles 28 de agosto de 2013

6. 4. el atributo clear
se utiliza conjuntamente con
float para indicar cuando un
elemento flotante permite otros
elementos flotantes junto a el.
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
cabecera
enlaces cuerpo
pie
miércoles 28 de agosto de 2013

7. miércoles 28 de agosto de 2013

8. <div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
cabecera
enlaces cuerpo
pie
#enlaces {
width: 300px;
float: left;
}
#cuerpo {
width: 650px;
float: right;
}
#pie{
clear:both;
}
miércoles 28 de agosto de 2013

9. preguntas??
miércoles 28 de agosto de 2013