En los dos ultimos episodios por asi decirlo, creamos un div que iba a contener a todos los demas divs y asi atarlos en las tinieblas, al mejor estilo del señor de los añillos, y tambien le colocamos un fondo bonito, hell yeah.
Hora de mas lecciones de maquetacion de HTML5 para crear nuestro superjuego!.
Nociones Básicas para maquetar en HTML5
Hay un estilo en CSS llamado display que nos permite indicar si nuestro elemento sera mostrado como un bloque o como un elemento inline. Hay mas opciones pero estas dos son las principales. Para posicionar elementos tienen que ser del tipo block, ya que con block nos permite ponerle margenes, padding (padding es el espacio entre el borde de nuestro contenedor y su contenido) y border (la linea que rodea a nuestro contenedor). Por defecto todos los divs tienen display:block y son los elementos que usaremos para posicionar mejor el contenido. Para los curiosos encontre esta pagina que puede explicarles mejor este tema.
Ahora normalmente los display block son colocados de arriba a abajo. Un item a la vez. |
| Los diferentes estilos de CSS que puedes aplicar a un display:block normalmente |
 |
| Sin Float |
 |
| Con Float |
Creando la estructura del Header con HTML
Una de mis premisas al hacer desarrollo es tratar de eliminar lo máximo en Tags que no nos sirvan, creanme eso nos va a ayudar de sobremanera. Lo primero es crear una ligera estructura de la parte superior de la pagina.
 |
| Haremos todo lo verdecito |
Entonces empezamos con la estructura del HTML. Antes teniamos:
Pero ahora cambiaremos la estructura a lo siguiente:
Vamos por partes explicando este cambio. Como ven todo lo estamos agrupando dentro del tag header, en realidad podríamos agruparlo dentro de un tag div o si quieren un p y prácticamente renderizaria igual, pero para estar acorde a las nuevas tendencias en HTML5 usaremos este nuevo TAG header.
Después dividimos este header en 3 secciones:
Bueno aprendimos a maquetar a punta de floats, y si lo han logrado, dense un abrazo porque el manejo de floats es una de las artes mas difíciles en la maquetación con HTML. Ah pero pequeños saltamontes, aun nos queda por conversar sobre los floats. Nos vemos en el proximo tutorial donde hablaremos algo mas de los elementos floats y crearemos el menu principal. Saludos!
Después dividimos este header en 3 secciones:
- Un primer div#trademarkWrapper conteniendo la imagen de nuestro logo (img) y el titulo (h1). Dicho sea de paso, este es el logo, descargatelo y ponlo dentro de tu carpeta img
- Un segundo div#loginFormWrapper que contendrá nuestro formulario de ingreso con 3 campos, usuario, password y boton de submit. Noten que todos estos campos estan dentro de un tag form, esto es lo normal cuando tienes campos en tus formularios. En siguientes post nos enfocaremos en el manejo de forms, por ahora solo nos dedicaremos a maquetar nuestra web. El tag legend se usa siempre que quieran poner titulos dentro de un form, esto es un estandar ya que si desean podrían usar el tag span o lo que quieran, igual funcionaria, pero hagamoslo de la manera correcta y pongamos los elementos donde corresponden.
- Una tercera seccion nav#mainMenuWrapper que tendra una lista de menus a nuestra disposicion. Un ul como explicamos se usa para crear listas sin orden (unordered list), en simples palabras, todos los li apareceran por defecto con un redondo en lugar de con numeros. Igual eliminaremos esto para darle a estos li un aspecto mas de menu.
Muy bien, añadiendo estos cambios la pagina nos quedaría esto:
Posiciones con Flotantes con CSS
Ok, pongamosle la magia del CSS y veamos como nos vamos a ir acercando a nuestro objetivo. Lo primero es colocar el CSS de posiciones:
Lo que estamos haciendo es ponerle posiciones al div#trademarkWrapper para que este a la izquierda y al div#loginFormWrapper para que aparezca a la derecha. Esto lo hacemos con elementos flotantes y muy importante le colocamos espacios de ancho (widths), sin esto los flotantes no funcionarian muy bien en diferentes navegadores.El clear:both lo aplicamos para liberar los estilos flotantes.
Y así tenemos una forma de posicionar elementos con CSS. Esta es una forma natural de posicionar cosas con CSS, existe otra usando los estilos position, top, left
Dudas con estos temas vean esta pagina web floatutorial, se los recomiendo tanto que ya lo recomende en una entrada anterior, serio chequeen ese tutorial si quieren aprender toda la magia de floats en CSS.
Y así tenemos una forma de posicionar elementos con CSS. Esta es una forma natural de posicionar cosas con CSS, existe otra usando los estilos position, top, left
Dudas con estos temas vean esta pagina web floatutorial, se los recomiendo tanto que ya lo recomende en una entrada anterior, serio chequeen ese tutorial si quieren aprender toda la magia de floats en CSS.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido: