CSS: Como usar el Float y el Clear y no perder la cabeza 3

Uno de los dolores de cabeza mas fuertes cuando estamos maquetando con CSS en un sitio es el uso del atributo float en nuestras capas ya que si estan contenidas dentro de otra capa esta usualmente no converva la altura de la capa que tiene el atributo float.

Como evitar esto? en donde lo podemos utilizar? pues bueno las repuesta son las siguientes:

Como evitar esto?

Utilizando un capa extra con el atributo clear:both;

  1. .clearfix{
  2. clear:both;
  3. }

En donde lo podemos utilizar?

En un template con mas de una columna.

En un calendario ya ven que son cuadritos consecutivos dentro de un contenedor.

o incluso en un ordenamiento de bloques como el que utiliza los startups como netvibes.

  1. .contenedor{
  2. border:1px solid #cccccc;
  3. padding:2px;
  4. margin:2px;
  5. }
  6.  
  7. .capa{
  8. border:1px dashed #cccccc;
  9. background:#f2f2f2;
  10. width:110px;
  11. height:110px;
  12. float:left;
  13. }
  14.  
  15. .clear{
  16. clear:both;
  17. }
  1. <div class=“contenedor”>
  2.                         <div class=“capa”>01</div>
  3.                         <div class=“capa”>02</div>
  4.                         <div class=“capa”>03</div>
  5.                         <div class=“capa”>04</div>
  6.                         <div class=“capa”>05</div>
  7.                         <div class=“capa”>06</div>                             
  8.                         <div style=“clear:both;”></div>
  9.                 </div>

ver ejemplo

Espero estos tips les sean utiles y si hay dudas pues solo pregunte ;)

8 errores en el diseño web 0

En metal.ize han publicado un articulo de lectura obligatoria si eres un diseñador o desarrollador web que habla de los 8 grandes errores del diseño web entre los puntos que menciona estan:

El ultimo punto es muy interesante y solo el titulo dice mucho y con razon en cientos de sitios habras leido sobre porque evitar las tablas, que para mejorar la carga que porque no sirven en los estandares y cosas asi pero no no es cierto al fin de cuentas la tan odiadas tablas te pueden aliviar el dolor de cabeza.

Se los recomiendo leanlo completito, es para guardarlo ya que debemos tener en cuenta que los mejores no somos y siempre es util hacerse de un poco de la experiencia de otros.

via Blog and Web 

80 Templates de 2 columas 0

Necesitas renovar tu diseño pues en mashable se hacen de una recopilacion de 80 templates gratuitos bastante buenos para decargar igual y no los usas pero te pueden servir para ver como los hicieron y empezar el tuyo.

via blogvecindad 

Youtube pone adsense a sus videos

Youtube le añadira adsense a sus videos, dandole la posibilidad a sus usuarios de ganar dinero con sus videos, interesante idea pero quedan dudas por aclarar en Bitelia nos dan mas informacion.

# (Nadie ha comentado)

El poder de la Imaginacion 0

Hace poco les puse un video de como a partir de imagenes que suponian ser algo obseno (ver video) salian dibujos bastante buenos, ahora viene este que apartir de un garabato logra imagenes tipo walt disney, eso es tener imaginacion para hacer las cosas y la mente bien abierta.


via Marcianos 

Logos GRATIS de empresas grandes 2

all free logo

Como el titulo dice all free logos es un sitio que ofrece infinidad de logos de empresas grandes pero con la gran ventaja que te los ofrece en vectores y para descargar de forma totalmente gratuita, los logos vienen en los siguiente formatos: *.ai, *.eps, *.cdr.

Bastante bueno el sitio nos podemos encontrar logos de todo tipo de empresas.

logo de peugeot en vectores

Enlace: AllFreeLogo  / Via: NiceFuckingGraphics

Crea tu portafolio en linea con CreativeBinge 0

Creative BingeCreativeBinge nos ofrece un servicio que creo muchos necesitamos en ocaciones a falta de tiempo de crear nuestro propio portafolio de desarrollos y diseños.

El sitio es una interesante y creativa forma de compartir nuestro trabajo con una comunidad la cual puede votar tu trabajo, segun tambien se organizaran concursos en los cuales podras entrar a participar, tambien existe la posibilidad de enviarle mensajes a otros usuarios y viceversa creando una comunidad y dando la oportunidad a tener nuevos amigos que se dediquen a los mismo que tu o incluso ser contacto por nuevos clientes.

Su creador y desarrollaor es un diñador freelance canadiense, de nombre John Gilfillan, que además tiene su blog, llamado Critrik Acid.

El sitio tiene un diseño muy bueno en tonalidades obscuras y muy limpio y ordenado en el caso de la usuabilidad se saca un 10 muy sencillo y con pocos formularios es decir que puedes crear tu portafolio en muy poco tiempo con pocos clicks, es el primer servicio de este tipo que conosco y me a encantad de hecho ya tengo mi cuenta y estoy empezando con mi portafolio.

Mi Portafolio (estoy metiendo la informacion poco a poco)

via blogultura

suscribete via RSS suscribete via Correo Electronico

Google

Web www.frogx3.com

  • Free Advertising