Overflow y Formularios

En la última clase vimos técnicas para hacer “cajitas con scroll” usando una cominación de height y overflow:auto.

HTML

<div id="cajita">

    <p>Contenidos...</p>

    <p>Más contenidos..</p>

    <p>Etc.</p>

</div>

CSS

#cajita {

   height:100px; /* alto fijo */   overflow:auto; /* esto genera el scroll */

}

Además vimos lo básico para la contrucción de formularios HTML.

<fieldset id="grupo-1">

   <legend>Datos personales></legend>

   <label for="nombre">Tu Nombre:</label>

   <input type="text" id="nombre" name="nombre" value="" />

   <input type="submit" value="Enviar" />

</fieldset>

Los archivos utlizados en clases están en el eCampus.

Position: absolute

Hoy vimos otra forma de diagramar bloques usando una combinación de elementos con el atributo position en absolute y relative.

Para una descripción más completa de la técnica y código de ejemplo, pueden ver éste artículo en mi blog.

Los archivos para los ejercicios hechos en clase están en Uniweb.

Editores de código

Como los Desarrolladores Web 4×4 no usan Dreamweaver, aquí les dejo un par de editores recomendados para Mac o PC. La verdad hay muchos pero no los he probado todos, así que dejo los que conozco. Indico los que no son grátis.

PC

• Notepad++
  No es muy bonito, pero le lleva colores de sintaxis, auto-indentado y otras gracias. Muy liviano y grátis como el aire.
• Aptana.
  Grátis. No lo he probado pero se ve muy bien.
• Notepad 2
  También se ve sencillo, con todo lo necesario, y grátis.

MAC

• TextMate
  Muy simple, rápido y fácil de usar. Colores de sintaxis, auto-indentado y, lo mejor de todo, vista del arbol de directorios.
  USD39, pero en mi humilde opinión valen la pena.
• TextWrangler
  No es lo mejor, pero sirve. Es el que usamos en clases y es grátis.
• BBEdit
  El hermano mayor (y pagado) de TextWrangler.
• Smultron
  Grátis y bueno.

Si tienen más para sugerir, agreguenlos en los comentarios.

Columnas 1

En esta clase hicimos una introducción a la diagramación con CSS.

Contenidos

• Elementos DIV para estructuración de secciones de contenido
• Atributo CSS float

Links relacionados

En este artículo explico cómo usar DIVs junto con al atributo float para diagramar columnas.

Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran en PositionIsEverything. Explicación en español en CSSLab.