Archivos de la categoría ‘Clases’
Overflow y Formularios
Dejar un comentarioEn 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
Dejar un comentarioHoy 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.
Ismael no viene
Comentarios (3)Alumnos: por un caso fulminante de Sars + Gripe Aviar no voy hoy Martes a clases. Pero antes de que se pongan a saltar en un pie de alegría, les dejo unos ejercicios para que aprovechen tanto tiempo libre. Así soy de aguafiestas.
El ejercicio será revisado el próximo Martes y quien no lo haga deberá contar el chiste más fome que se sepa en el patio central del Uniacc, con un altavoz.
El Ejercicio
La tarea es simple: deben estructurar un documento XHTML con 5 bandas de música o películas que les gusten. Cada elemento debe tener un título, una breve descripción y una lista con los detalles técnicos (sello/productora, año, autor/director) y, si existe, un link a más información en la web.
El documento además debe tener un título y una introducción general (por ejemplo “lista oficial de mis grupos preferidos”), con nombre e email, todo en el HTML.
El documento debe incluír al menos los elementos H1, H2, A, STRONG y P. Además se evaluará el uso de la etiqueta META y sus atributos en el HEAD y la estructura general del documento. Revisen los ejercicios anteriores si no saben de qué estoy hablando. Si tienen dudas, pregúntenme en los comentarios de este artículo.
Suerte.
Ismael.
Columnas 2
En la clase de hoy seguimos desarrollando un layout a dos columnas usando el atributo “float”.
#mi_columna {
float:left;
}
Además vimos el uso de la clase clearfix para corregir un error común en el uso de “float”.
El zip con los archivos lo encuentran en la carpeta “material_clases”, en los archivos del curso en eCampus.
Revisen el código del ejemplo, acumulen dudas y preguntas.
Próxima clase: manejo de imágenes en CSS, sobre el layout que ya tenemos. Trabajaremos sobre un PSD que usaremos de modelo para replicar con CSS.
Lectura sugerida (me permito linkear a mi propio sitio, por comodidad 
):
- Columnas CSS: Floats (EstadoBeta).
- CSS: dónde van las imágenes? (EstadoBeta).
Recuerden dejar sus preguntas en los comentarios.
Columnas 1
En esta clase hicimos una introducción a la diagramación con CSS.
Contenidos
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.
