crisp presentation

• Home
• Portfolio
• Services
• Contact

Lo primero que encontramos es un div vacío con la clase “clear”, a esto lo explicaré luego cuando veamos el CSS. Como podemos ver se repite la clase titulo que da estilo al H2, esto es porque ambos títulos son iguales. Acá realicé una “caja” con la clase de ‘preview’ que tiene una imágen, un título y su descripción, luego copio y pego el div entero para y solo cambio la imágen a mostrar (prev02.jpg). Ahora pasemos al #sidebar… ¿Complicadísimo no? jajaja, la verdad que es muy simple, solamente texto, pero igualmente debemos darle sus clases para poder ubicarlos luego en la página. Con esto damos por terminado el HTML, deberían ver en su navegador algo muy feo sin estilos, ni colores ni coherencia, así que manos a la obra nuevamente, tomate 5 minutos, preparate un café y volvé que seguimos con el estilo…. --------------------------------------------------------------------------------------------------------------------------------------- Ahora vamos a pasar a aplicar el CSS. Bueno….voy a tratar de explicar la máxima cantidad de puntos, tal vez a alguien más experimentado le parezca aburrido, pero siempre es bueno refrescar y afirmar los conocimientos. Empecemos por los estilos “fijos”, son los que se repiten varias veces en el html, recordemos que aplicamos el reset anteriormente. dijo:.clear{ clear: both; } body{ background:url(../imgs/body_bg.png) repeat-x; font-family:Arial, Helvetica, sans-serif; font-weight: 100; font-size: 10pt; color: #7b5a47; } a{ color: #7b5a47; font-weight: bold; } Como ven aquí le doy estilo a lo que usamos anteriormente (el div vacío con la clase clear), lo que hace esto es “limpiar” cualquier float que quede del div anterior, se puede usar clear: left, right o both que sirve para ambos lados y es la que uso siempre. Ahora al body le aplicamos el fondo repetido en el eje x, tamaño y tipo de letra predominante en la página y el color. Como se podrán dar cuenta el tamaño predominante no es 10pt sino 12pt según photoshop, pero me gusta siempre empezar con 10pt y después variar el tamaño asignandole valores en em (se van a dar cuenta de que les hablo más adelante) 1em equivale a la medida de la letra “m” del tamaño de letra que estemos utilizando (osea una “m” de 10pt). Como se puede apreciar en la página todos los enlaces están en negrita, es por eso que el estilo que le damos a los links es bold y el color #7b5a47; que vendría a ser un marrón oscuro. --------------------------------------------------------------------------------------------------------------------------------------- Ahora vamos al header... dijo:h1.logo{ background: url(../imgs/logo_bg.png) no-repeat; width:201px; height:51px; float: left; margin-left:65px; } h1.logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; } Reemplazamos al H1 con clase logo por la imagen recortada, le asignamos el ancho y alto exacto de la misma, le damos un margen izquierdo para que no quede “pegado” al borde y lo flotamos a la izquierda para que el menú top no quede abajo sino que se ubique a la derecha del logo. Luego decimos que todos los enlaces (a) que se encuentren dentro de un H1 con clase logo se muestre como bloque y ocupen el máximo de ancho y alto posible (osea los valores de su parent que son 201×51 pixeles). con la propiedad text-indent: -9999px; enviamos el texto fuera de la pantalla, esto es para que se vea sólo la imágene que colocamos y el texto exista pero no se vea. --------------------------------------------------------------------------------------------------------------------------------------- Pasamos al menú. dijo:#nav_top{ float:right; width: 419px; height: 19px; padding: 15px 0px 15px 35px; margin-right: 20px; text-align: center; background: url(../imgs/nav_top_bg.png) repeat-x; border: 1px solid #ded5cf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #nav_top li{ display: block; float: left; margin-right: 20px; padding-right: 20px; height: 35px; background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; text-decoration: none; } #nav_top li:last-child{ background: none; Primero al menú lo flotamos hacia la derecha, le asignamos las medidas y repetimos en x el fondo que recortamos antes, le damos el bordeado sólido de 1px con el color correspondiente. Como pueden ver le estamos dando un redondeado a las puntas del menú, con la propiedad border-radius lo hacemos, para que lo pueda interpretar mozilla añadimos -moz-border-radius: 10px y para que la gama de wbekit lo muestre como queremos agregamos -webkit-border-radius: 10px; #nav_top li significa que afectaremos TODOS los li que estén dentro de un elemento con id=nav_top: Los hacemos bloques y los flotamos a la izquierda para que esté uno al lado del otro, luego damos un margin-left y un padding-left iguales de 20px esto es para que entre cada uno de ellos exista la misma separación. background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; con esto decimos que a cada elemento li agregue el divisor, que no se repita y que lo agregue a la derecha y abajo. Aquí vemos que sucede algo que no queremos, y es que el último elemento también tiene un divisor, cómo lo eliminamos?? con una pseudo-clase: #nav_top li:last-child esto afectará solo al último elemento li que se encuentre dentro del div con id nav_top. dijo:#nav_top li a{ font-size: 1.2em; text-decoration: none; } #nav_top li a:hover,a:active{ color: #d17b00; } Ahora quitamos el subrayado de los enlaces que se encuentren en un li y a la vez en el div con id nav_top y le aplicamos el tamaño de 1.2em, osea que el tamaño de letra sea 1.2 “m” de 10pt…..se entiende? espero… a:hover -> Cuando el mouse pasa por encima del enlace el color será #d17b00 a:active -> Cuando es presionado el enlace el color será #d17b00 --------------------------------------------------------------------------------------------------------------------------------------- Vamos al slider, que es muy simple: Este sólo es el estilo para posicionar la imágen del slider falso ya que veremos luego cómo colocar un slider funcional usando jQuery dijo:*/ .img_slider{ width: 847px; height: 100%; margin: 0 auto; background: url(../imgs/dummy_slider.jpg) no-repeat; } --------------------------------------------------------------------------------------------------------------------------------------- Ahora si, pasamos al contenido. dijo:#contenido{ margin-top: 50px; } h2.titulo{ font-size: 1.4em; margin-bottom: 25px; } .desc{ width: 480px; line-height: 1.1em; font-size: 1.1em; } Le damos un margen superior de 50px, al título un tamaño y un margen inferior para separar el texto descriptivo al cual le damos un ancho fijo de 480px, tamaño y una separación entre renglones de 1.1em. dijo:.menu_contenido{ margin-top: 50px; width: 596px; height: 75px; position: relative; left:-25px; background: url(../imgs/bg_menu_contenido.png) no-repeat; margin-bottom: 40px; } .nav2{ display: block; width: 685px; height: 50px; padding-top: 15px; margin-left: 40px; } .nav2 li{ display: block; float: left; list-style: none; margin-left: 10px; padding-left: 10px; } .nav2 li a{ color: #523c2f; text-decoration: none; font-size: 1.2em; letter-spacing: .1em; } Al cuadro q va a contener los 3 botones le damos su tamaño y el fondo que recortamos antes, como pueden ver tiene position relative, esto es porque quiero “empujar” un poco este cuadro, que salga del contenedor, lo saco -25px de izquierda con respecto a su parent (osea #contenido) Para los botones no hay mucho que explicar ya que se repiten las propiedades del menú anterior, cambian los valores. Podemos ver en el HTML que a cada li le dimos una clase diferente, esto es porque cada li muestra una imágen diferente con respecto al otro, al estilo lo podemos hacer así: dijo:.ideas{ display: block; height: 46px; width: 152px; padding-top: 18px; background: url(../imgs/lampara.png) no-repeat; } .execution{ display: block; height: 46px; width: 166px; padding-top: 18px; background: url(../imgs/lapiz.png) no-repeat; } .passion{ display: block; height: 42px; width: 153px; margin-top: 3px; padding-top: 15px; background: url(../imgs/corazon.png) no-repeat; } .ideas a{ padding-left: 80px; } .execution a{ padding-left: 50px; } .passion a{ padding-left: 60px; } Como cada imágen es diferente las medidas de ancho y alto varían de uno a otro, pero la idea es la misma, luego a cada enlace de cada uno de los li le damos un relleno izquierdo como para posicionar el texto como nos parezca adecuado. --------------------------------------------------------------------------------------------------------------------------------------- Pasemos a la muestra de productos... dijo:.preview{ margin-top: 45px; } .preview img{ border: 5px solid #c8bbab; float: left; margin-right: 24px } h3{ margin-bottom: 15px; font-size: 1.3em; } Aquí no hay mucho que explicar, solamente que separamos la imágen del resto del texto, le damos un borde ancho, lo flotamos a la izquierda para que el texto que sigue no quede abajo de la imágen y al título un tamaño de 1.3em. --------------------------------------------------------------------------------------------------------------------------------------- Con el sidebar... El sidebar es REALMENTE simple, hay mucha cantidad de texto y si entendieron lo anterior a esta sección la pueden hacer solos, igualmente explicaré paso a paso como vengo tratando de hacerlo, no sé a ustedes, pero amí ya se me terminó el café, voy por otro… Segundo y creo que último café, si, ya falta poquito y terminamos. dijo:#sidebar{ margin-top: 30px; padding: 20px; padding-left: 40px; } #sidebar p{ margin-bottom: 15px; width: 240px; line-height: 1em; } .noticia{ margin-bottom: 45px; } Como vemos aquí damos las dimensiones que contendrán las noticias y la dirección en la barra lateral, a esto lo logramos agregando un relleno de 20px pero uno de 40 del lado izquierdo, las noticias que agreguemos tendrán una separación inferior de 45px con respecto a la siguiente. dijo:.linea_divisora{ border-bottom: 1px solid #d2cdbf; margin-bottom: 45px; } Esto es sólo para crear la línea divisora entre las noticias y la dirección. Nada del otro mundo. dijo:.direccion{ width: 200px; background: url(../imgs/direccion_bg.jpg) repeat-y; padding-left: 20px; } .direccion li{ padding-bottom: 3px; } La dirección se encuentra en un cuadro de un anchod e 200px y tiene un fondo de triangulitos que se repiten a lo alto y está posicionado por defecto a la izquierda, le damos un padding-left de 20px para que el texto no esté sobre el fondo. Luego damos una separación inferior entre cada elemento li de 3px. --------------------------------------------------------------------------------------------------------------------------------------- Footer…lo más fácil para el último. dijo:#footer{ padding-top: 40px; /* Esto afecta la sección Maquetación, está comentado.*/ } .copyright{ float: left; } .autor{ float: right; } --------------------------------------------------------------------------------------------------------------------------------------- Algo para explicar? naa, si llegaste acá entendiste todo supongo. Espero que lo hayan logrado, cualquier duda o consulta no dejen de escribirme, igualmente si encuentran errores, o correcciones por hacer son bienvenidas, estamos para aprender y cambiar. Espero que les haya gustado el post, y nos vemos en el siguiente!