Documento sin título

La propiedad clear especifica que lados de un elemento flotante de otros elementos no están permitidos.

------ FLOAT en el siguiente código ------

<html>
<head>
<title>Documento sin título</title>
<style type="text/css">
#uno_rojo {
background-color: red;
width: 100px;
float:left;

}
#dos_azul {
background-color: blue;
width: 100px;

margin-left:10px;
}
#tres_verde {
background-color: green;
width: 100px;
float:left;

margin-left:20px;

}
#cuatro_amarillo {
background-color: yellow;
width: 100px;
float:left;

margin-left:30px;

}
</style>
</head>

<body>
<div id="uno_rojo">uno_rojo</div>
<div id="dos_azul">dos_azul </div>
<div id="tres_verde">tres_verde</div>
<p>hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola </p>
<div id="cuatro_amarillo">cuatro_amarillo </div>

</body>
</html>

------ CLEAR en el siguiente código ------

<html>
<head>
<title>Documento sin título</title>
<style type="text/css">
#uno_rojo {
background-color: red;
width: 100px;
float:left;

}
#dos_azul {
background-color: blue;
width: 100px;
float:left;
clear:left;

margin-left:10px;
}
#tres_verde {
background-color: green;
width: 100px;
float:left;

margin-left:20px;

}

</style>
</head>

<body>
<div id="uno_rojo">uno_rojo</div>
<div id="dos_azul">dos_azul </div>
<div id="tres_verde">tres_verde</div>

</body>
</html>

--- CLEAR en el siguiente código para conseguir la siguiente apariencia.
No se permite tocar float

------ CLEAR en el siguiente código ------

<html>
<head>
<style type="text/css">
#uno_rojo {
background-color: red;
width: 100px;
float:left;

}
#dos_azul {
background-color: blue;
width: 100px;
float:left;

}
#tres_verde {
background-color: green;
width: 100px;
float:left;

}
</style>
</head>

<div>adios</div>

<div id="tres_verde">tres verde</div>
<div>hasta luego</div>
</body>
</html>

-- Hacer pruebas con los valores position:relative; y top::100:px; en la solución del ejercicio anterior. Recordar que a un DIV con position (absolute o relative) se le pueden aplicar las propiedades TOP y LEFT

Realizar el siguiente diseño

Si necesitáis ayuda, en el manual que hay en la documentación, llamado Maquetar en 5 pasos, se explica paso a paso

DOCUMENTACIÓN

Manual CSS-maquetacion
Maquetar en 5 pasos
Trucos CSS para no enloquecer
MARGIN - PADDING - WIDTH en DIV
- Supongamos un DIV con
  - La anchura efectiva de la caja negra es de 50+100+50=200
  - Conclusión: Cuando utilizamos WIDTH estamos queriendo decir el espacio útil donde poder meter contenido, y no la anchura del elemento. La anchura del elemento es padding-left+width+padding-right
- Para estar seguros que todos los elementos HTML de nuestro código tienen los mismos valores en todos los navegadores, esto lo reiniciamos mediante la siguiente regla CSS
  *{margin:0;padding:0;}

Valores inline y block en la propiedad DISPLAY

Elementos de bloque (block)
- Los elementos de bloque generan una nueva línea (renglón) y ocupan, salvo que se especifique lo contrario, todo el renglón
- Se comportan como cajas
- Son elementos de bloque: address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
Elementos inline
- Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque.
- Son elementos inline: a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.
Con CSS podemos modificar la presentación, y por ende el comportamiento.

Ejemplo1: convertir un elemento de bloque en uno de linea

Ejemplo2: convertir un elemento de linea a uno de bloque. Normalmente nuestro objetivo será poderle dar alto y ancho
Prueba conversión de enlaces a bloque

<htm> <head> <title>Documento sin título</title>
<style type="text/css">
a {
background-color: #FF0;
display: block;
margin: 10px;
height: 80px;
width: 100px;
float: left;
padding-top: 50px; }

.enlace_especial {
background-color: #FF0;
display: block;
margin: 10px;
height: 100px;
width: 100px;
float: right;
}

body {
text-align: center;
}
</style>
</head>

Fuente original

Valor none en Propiedad DISPLAY

Servirá para que no se vea el elemento

Normalmente se utiliza en combinación con JS para mostrar/ocultar elementos dependiendo pej de la pulsación de un botón

Valores en MARGENES

Si se especifican todos seguidos se leen como si fuera un reloj contando desde las 12, es decir:

margin: arribapx derechapx abajopx izquierdapx

Si sólo se especifca un valor, este será el de los 4 lados

margin: 10px;

significa

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Unicamente si el elemento es un DIV y se especifican 2 valores, tenemos que interpretar que los otros 2 que faltan, tienen los mismos valores para la misma dimensión (horizontal o vertical)

margin: 10px auto;

significa

margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;

Para poner 0, no hace falta poner 0px. Ejemplo: margin-top: 0;

DIV centrado

Un DIV en que en los valores margin-right y margin-left están en auto es un DIV que aparecerá centrado, siempre y cuando su anchura esté definida (para que no sea el 100%)

#alrededor {
margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 22px;
width: 720px;
}

Ejemplo

Tamaño del DIV
- Un DIV coje:

horizontalmente todo el espacio disponible salvo que definamos el valor de width

verticamente, sólo aquel espacio que necesita

max-width y min-width

Servirá para que en pantallas muy anchas no se nos ensanche demasiado un div

Ejemplo
Fuente original

text-align: center;

Si lo definimos en un elemento de bloque como BODY o DIV, esta propiedad se heredará para los DIV hijos.
Ejemplo

DIV con valor (left o right) en Propiedad FLOAT
- No todos los navegadores, en todas las condiciones se vé lo mismo. Coinciden Firefox y Crome, a la vez que coinciden Opera y IE
- al flotar ( con valor left o right)
  - es como si estuviera en una capa flotante
  - se comportan como "globos" que suben hacia arriba.Una vez "arriba", si caben, se colocarán al lado de otros "globos" flotantes
  - si detrás de ellos hay un DIV que no flota, este último se comportará como si el flotante estuviera en otra capa
  - dejan de forzar un salto de línea por la parte superior y por la parte inferior (cosa que hace un div normal sin valor en la propiedad float)
  - las propiedades de MARGIN de auto con las que conseguimos centrar el DIV horizontalmente, centran ahora el DIV pero en el espacio libre
  - DIV no flotante y a continuación DIV flotante
    - el flotante se coloca debajo del no flotante, ya que el salto de línea del </div> del div no flotante es como si produjese en todas las capas
  - DIV flotante y a continuación DIV no flotante
    - Firefox y Crome --> el no flotante y el flotante se superponen, quedando por encima el flotante
    - Opera y IE --> el no flotante se coloca al lado del flotante
  - DIV A flotante + DIV B no flotante+ DIV C flotante
    - En todos los navegadores se coincide
    - El último flotante se coloca debajo del no flotante (que se colocó de forma diferente según navegador), ya que el salto de línea del </div> del div no flotante es como si produjese en todas las capas
  - 3 divs flotantes + un parrafo + div flotante
    - todos los divs flotantes se colocan uno al lado del otro, y al lado, a continuación, si cabe, se colocará también el parrafo
    - debajo del parafo, se coloca el div flotante, ya que el salto de línea del </p> del parrafo es como si produjese en todas las capas
  - Conclusiones
    - los div no flotantes no implican salto de línea.
    - en el estandar más puro (Firefox y Crome), el flotante es como si estuviera en otra capa
    - después de un DIV no flotante o algo que produce un salto de lína, los DIV siguientes, se colocarán debajo de este salto de línea, sean flotantes o no.

Propiedad CLEAR: Evitar que un DIV o capa se superponga con otra
- Seguramente cuando estes maquetando tu sitio web necesitarás tener una capa o bloque que no tenga capas a su/s lados, para eso esta la propiedad CSS Clear.
- Esta propiedad sirve para evitar que una capa se posicione a cualquiera de los lados de nuestro DIV.
- Los valores que admite son estos:
- Se suele utilizar para el pie de página
- Para forzar un cambio de línea cuando tenemos tremendo lio entre divs con float, podemos utilizar los siguiente
  - <div style="clear:both">........</div>
Recordar que a un DIV con POSITION (absolute o relative) se le pueden aplicar las propiedades TOP y LEFT
- Servirá para afinar la posición
- No recomiendo mezclar float con position, pues nos podemos liar

COMO descagar de un html online, todas las imágenes y todos los ficheros de estilos

Con el único que me he podido descargar las imágenes que se utilizaban en los estilos CSS (fondos de los DIVs), ha sido con el OPERA (última versión)

PARA VER Y MODIFICAR EN VIVO los estilos de cualquier página podemos utilizar

el complemento FIREBUGS para Firezilla
Crome (con el botón derecho sobre la página, seleccionamos Inspeccionar elemento)
Opera (con el botón derecho sobre la página, seleccionamos Inspeccionar elemento)
- Mejor que el Crome a la hora de cambiar los valores de los estilos, ya que lo podemos hacer con las flechitas de subir y bajar. Lo alternaremos con el Crome, ya que el Crome suele mostrar una información más simplifcada, y a veces esto ayuda
- Última versión
Dreamweaver, sobre todo si tenemos la última versión CS5

Recomiendo alternar los navegadores Opera y Crome, y a ser posible Dreamweaver CS5