Tema: FAQ's de CSS
Ver Mensaje Individual
  #82 (permalink)  
Antiguo 27/03/2010, 14:01
Avatar de romel_inc
romel_inc
 
Fecha de Ingreso: diciembre-2007
Ubicación: Venezuela-monagas
Mensajes: 288
Antigüedad: 16 años, 7 meses
Puntos: 14
Respuesta: FAQ's de CSS

¿Como crear columnas “Fácilmente” con muy poco Código?

Además que funcione fino en los diferentes navegadores, Además sin usar tablas, Además Sin usar la etiqueta “li”, Además etc.

Ejemplo 1
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
 

<div style="clear:both;"></div>

</div>


</body>
</html>
Ejemplo 2
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a.estilo{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  

<div style="clear:both;"></div>

</div>


</body>
</html>
Fuente: [En ingles]
http://www.positioniseverything.net/easyclearing.html

Por si acaso subí una copia de la pagina web en caso de que no este online.
a varios servidores. y los ejemplos están incluidos.

http://www.mediafire.com/file/dnznzdzymnr/ejemplos.zip

http://www.megaupload.com/?d=8EWV1LI0


PD: La explicación de como funciona esta en ingles, Seria interesante verla en español y de fácil compresión. Y ver los ejemplos Mejorados ya que no son perfectos pero tienen la idea, Saludos.
__________________
Lo que se usar (JAVA, Spring MVC, IntelliJ IDEA , GAE, CakePHP, Bootstrap, Underscorejs, jQuery, HTML5, CSS3, JSON, Ajax, Prototype), Aprendiendo a usar Angularjs y Git.