Hace ya algún tiempo había creado un pequeño tutorial de como crear un sistema de pestañas independiente de frameworks Js. Para una iniciación no estaba mal, aunque tenía algúnas limitaciones que impedían añadir “subpestañas” o determinados tags usados en el script, lo que a la larga lo convertía en uno de tantos scripts que pasan al olvido.

Es por ello que decidí rehacer el código. Más sencillo, más claro y obviamente más útil. Este nuevo sistema permite añadir pestañas dentro de un panel, e incluso utilizar nuevos divs para el caso de que los contenedores a usar ya lo sean.

Empezamos creando el contenedor que tendrá nuestro sistema de pestañas. Un simple div nos valdrá.

<div id="panel"></div>

Dentro de este panel, añadiremos las pestañas. Al igual que en muchos sistemas, utilizaremos listas, aunque bien podríamos utilizar simples enlaces.

<ul id="tabs">
  <li>opción 1</li>
  <li>opción 2</li>
  <li>opción 3</li>
  <li>opción 4</li>
</ul>

Bien, ahora crearemos un panel donde se ubicarán las contenidos de cada pestaña. Una buena estructura sería una capa (div) principal, y otra tantas capa (div) por cada pestaña

<div id="paneles">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Todo junto nos quedaría así

<div id="panel">
  <ul id="tabs">
    <li>opción 1</li>
    <li>opción 2</li>
    <li>opción 3</li>
    <li>opción 4</li>
  </ul>
  <div id="paneles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Lo interesante es crear los estilos y no depender de imágenes. Estos estilos aplicarán las esquinas redondeadas de las pestañas al igual que en los sistemas windows, con excepción – como no – a los explorer, que no disponen de propiedad de “redondeo”.

/* tamaño y forma del panel principal */
#panel {
  position: relative;
  width:400px;
  height: 300px;
  margin: 100px 0px 0px 100px;
}
/* configuracion de las pestañas */
#tabs {
  position:absolute;
  left: 0px;
  top: 0px;
  margin:0;
  padding:0;
  width: 400px;
  overflow: hidden;
  z-index: 20;
}
#tabs li {
  float:left;
  */
  esto produce compatibilidad al redondear
  en los distintos navegadores
  /*
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  */
  esto impide seleccionar el contenido
  de las pestañas eliminando ese feo
  efecto de selección al clickar y
  arrastrar
  */
  user-select: none;
  list-style: none;
  margin: 1px 1px 0px 0px;
  display: block;
  height: 21px;
  line-height: 21px;
  padding: 0px 8px;
  outline: 0px none;
  font-family: arial;
  font-size: 10px;
  text-decoration: none;
  color: #000;
  border: 1px solid #91A7B4;
  border-bottom-width: 0px;
  background: #fff;
  border-radius: 4px 4px 0px 0px;
  cursor: pointer;
}
#tabs li.active {
  margin-top: 0px;
  height: 21px;
  line-height: 19px;
  border-top: 3px solid #324A62;
  cursor: default;
}
/* Configuración de los paneles */
#panel #paneles {
  position:absolute;
  left: 0px;
  top: 23px;
  width: 398px;
  height: 275px;
  border: 1px solid #91a7b4;
  border-radius: 0px 4px 4px 4px;
  background: #fff;
  overflow: hidden;
}
#panel #paneles > div{
  margin:10px;
  width: 378px;
  height: 255px;
  font-family: arial;
  font-size: 12px;
  text-decoration: none;
  color: #000;
  overflow: auto;
}

Y el javascript que hace que funcione todo esto

function cm_tabs(options)
{
  if((options.tab && options.tab != '') &&
     (options.container && options.container != ''))
  {
    var tabs		= document.getElementById(options.tab).children;
    var containers	= document.getElementById(options.container).children;

    for(var i=0; i< tabs.length; i++)
    {
      tabs[i].i = i;
      containers[i].style.display = 'none';

      tabs[i].onclick = function()
      {
        for(var e=0; e < containers.length; e++)
        {
          tabs[e].className = ''
          containers[e].style.display = 'none';
        }
        tabs[this.i].className = 'active';
        containers[this.i].style.display = 'block';
      }
    }

    if(options.active && options.active <= tabs.length && options.active != '')
    {
      tabs[(options.active-1)].className = 'active';
      containers[(options.active-1)].style.display = 'block';
    } else {
      tabs[0].className = 'active';
      containers[0].style.display = 'block';
    }
  }
  return false;
}

Finalmente ejecutamos el javascript con los parámetros que más nos convengan.

<script type="text/javascript">
  cm_tabs({tab : 'tabs', container : 'paneles', active : 1});
</script>

Donde la propiedad “tab” representa el ID del contenedor de las pestañas, “container” de los paneles que conforman el contenido de las pestañas. Esto nos permitiría dado el caso, colocar las pestañas en un lado y el contenedor en otro. Finalmente “active” representa la pestaña que queremos se muestre como activa el ejecutar el script. Así de sencillo.

El código completo y listo para funcionar lo podéis obtener de los siguientes enlaces:
[ ejemplo de pestañas ] [ otro ejemplo más complejo ] [ descargar ]

Tags: css,, javascript

Con gran ilusión actualizo un blog al recién sacado del horno Worpress 3.1 – eso si, en local, que las cosas hay que probarlas antes – y me llevo la primera sorpresa negativa. O soy yo que estoy pitoño o los listados de posts en el backend de WordPress no se ven como debiera. Mmmm, empezamos mal.

Si bien es cierto, esto tiene una sencilla solución y sin necesidad de tener que tocar css de la administración ni plugins ni cosas raras.

Abrimos nuestro archivo functions.php y añadimos la siguientes líneas

function extra_css_admin() {

    echo '<link rel="stylesheet" type="text/css" media="all" href="'.TEMPLATEURL.'/admin-css.css" />';
}
add_action('admin_head', 'extra_css_admin');

Con esto lo que conseguimos es añadir una nueva hoja de estilos a la zona de administración del wordpress y es aquí donde empieza la magia creando una hoja de estilos llamada “admin-css.css” – aunque también se puede llamar de otras formas – y dentro añadimos estas 3 declaraciones.

.posts {
     width: auto !important;
}
.fixed .column-comments.sortable a, .fixed .column-comments.sorted a {
     height: 16px;
}
.posts div {
     height: auto;
}

De esta manera sobreescribimos las css del propio wordpress mientras no sacan un parche que lo arregle.

Editado : Esto sólo ocurre con algunos plugins instalados.

Tags: wordpress,, css

Los navegadores modernos (olvidaros de explorer) y las css avanzadas, nos permiten modificar – en este caso – y sin utilizar javascript, los input de tipo “checkbox” y “radio” con la ayuda de las etiquetas “label”, pudiendo personalizarlos hasta límites inimaginables. Como siempre, el límite lo pone nuestra creatividad.

Esto lo conseguimos con esta estructura

<input type="checkbox" name="check_01" id="check_01" />
<label for="check_01">Opción</label>

Con una imagen similar a esta

Y estas pequeñas líneas de css

input[type=checkbox] {display: none;}
input[type=checkbox] + label {
    background: #fff;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(img/check_02.png) 0px 0px no-repeat;
    text-indent: -1000em;
}
input[type=checkbox]:checked + label {
background: url(img/check_02.png) 0px -16px no-repeat;
}

Las cuales tienen una explicación muy sencilla.
input[type=checkbox] nos permite seleccionar todos los campos “input” de tipo “checkbox“.

input[type=checkbox] + label nos permite seleccionar todos los campos “input” de tipo “checkbox” y además, el elemento “label” que se encuentre a continuación. No debe haber ningún otro elemento depués del campo “input“.

input[type=checkbox]:checked + label, nos permite seleccionar todos los campos “input” de tipo “checkbox” cuyo atributo “checked” sea igual a “checked” y además, el elemento “label” que se encuentre a continuación.

De esta manera, podemos hacer cosas similares a las que he montado en un ejemplo.

[ ejemplo ] [ descargar ejemplo ]

Esto nos permite poder moldearlos a nuestro antojo, permitiendo que en la gran mayoría de los navegadores se visualice de la misma manera.

Sin embargo, nuestro querido Firefox, se guarda una desagradable sorpresa y probablemente más de uno se haya dado cuenta. Y es que cuando tratamos de meter – por ejemplo – dentro de un elemento <button> una etiqueta – por ejemplo un <span>, este nos deja un pequeño padding que nos impide colocar el <span> a nuestro gusto por mucho padding que le quitemos, por lo que terminamos metiendo una posición absoluta y pasamos el trago.

No es una solución que me agrada, ya que un simple padding a cero, debería bastar. Para conseguir arreglar esto, debemos añadir la siguiente línea a nuestro reseteador.

<style>
   /** Eliminando el padding de los botones **/
   button::-moz-focus-inner { padding:0;border:none }
</style>

Ahora podemos maquetar a gusto dentro de los elementos <button> sin miedo a nuevas e inesperadas sorpresas … o no ?

Tags: css, tips

Ni que decir tiene que me he vuelto un maniático a la hora de maquetar una web y conseguir que se vea igual de bien en los navegadores principales (no veas que subidón para el EGO) y el problema de Opera me empezaba a desesperar un poco.

Hoy, por casualidad he descubierto que poniendo esto en la hoja de estilos, conseguimos solucionar el problema.

/** Hack para el scroll doble de opera **/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
   html { overflow: auto; }

   body { overflow: auto; }
}

Espero que sirva de utilidad.

De forma similar a como cambiabamos los campos de tipo file, debemos crear una estructura alrededer de los campos selectBox de una forma parecida a esta

<div class="selectBox">
   <div class="box" id="box">Plantar un arbol</div>
   <select name="mySelectBox" id="mySelectBox">
      <option value="1" class="primero">Plantar un arbol</option>
      <option value="2">Escribir un libro</option>
      <option value="3" selected="selected">Ser Padre</option>
      <option value="4">Hacer un Blog</option>
      <option value="5" class="ultimo">Un texto largo para ver que efecto produce</option>
   </select>
</div>

Donde el div principal es el contenedor del Select, y el div “box” donde escribiremos la selección del combo. Para poder realizar la última acción, crearemos un evento “onchange” que aplicaremos a nuestro comboBox para poder pasar los datos de la selección al div “box”.

onchange="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.options[this.selectedIndex].text"

Y evidentemente le daremos unos “colorines” para que quede “bonito”.

<style type="text/css">
div.selectBox {
   position: relative;
   width: 150px;
   height: 22px;
   border: 1px solid #036;
   background: url(button.png) 130px center no-repeat;
}
   div.selectBox div.box {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 124px;
      height: 16px;
      line-height: 16px;
      font-family: arial;
      font-size: 11px;
      color: #036;
      overflow: hidden;
   }
   div.selectBox select {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 152px;
      height: 24px;
      border: 1px solid #036;
      opacity: 0;
      filter: alpha(Opacity=0);
      -moz-opacity: 0;
      cursor: pointer;
      z-index:100;
   }
      div.selectBox select option{
         padding: 4px;
         font-size: 11px;
         color: #036;
         border-bottom: 1px solid #eee;
         cursor: pointer;
      }
      div.selectBox select option.ultimo{
         border-bottom: 0px none;
      }
</style>

Para complementar estos estilos, añadimos la siguiente imagen que hará las veces de botón

El resultado funciona en todos los navegadores, exceptuando nuestro querido amigo “Explorer6″ donde no sé si se verá correctamente al tener una “emulación” del mismo.

[ demo ] [ descargar ]

Tags: css, diseño, javascript, tips

Hoy con unos conocimientos mínimos de css, es posible construir layout complejos con la apariencia de una aplicación de escritorio.

Entonces orgullosos miramos una y otra vez nuestro layout, que además valida xhtml 1.1, copiamos la url y lo comprobamos en Ópera y también en Safari. Y nada, que somos unos hachas… hasta que nos dá por mirarlo en Explorer 6 (porque en el 7 y el 8 aún queda decente), y nos damos cuenta de que no se vé lo que se debería ver, acordándonos de que es imposible combinar las posiciones left y right, top y bottom.

Pero bueno, soluciones haylas, solo hay que exprimirse un poco el cerebro y atacar a explorer por donde le duele.

Y es por eso, que hice unos experimentos con layouts compatibles con los navegadores buenos y los malos. Solo un pero. Si tenéis el explorer 6 instalado con el “multiple Explorer”, aunque este renderiza como explorer 6, es detectado en los comentarios como explorer 7.

[ ejemplos de layouts ] [ descargar ]

Tags: css, xhtml

Vía divinentd, me encuentro con un código muy, muy simple, que consigue el efecto “fixed” para todos los navegadores.

Estos serían las css

html, body {
   height: 100%;
   overflow: hidden;
}
#container {
   height: 100%;
   overflow: auto;
   position: relative;
   z-index: 2;
}
#div1 {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}
#div2 {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
}
#div3 {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 1;
}
#div4 {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
}

Y esta, un ejemplo de estructura

<div id="container">
   <div id="content">
      <h1>Emulando position: Fixed;</h1>
      <p>Añade un texto</p>
      <p>O tu contenido...</p>
   </div>
</div>
<div id="div1">div id="div1</div>
<div id="div2">div id="div2</div>
<div id="div3">div id="div3</div>
<div id="div4">div id="div4</div>

Lo que estamos haciendo realmente es permitir que el contenido alcance el 100% de alto desde el body y escondiendo el scroll con la propiedad overflow. A continuación, entra en escena la capa contenedora, que se prolonga hasta el 100% del documento, y permitimos el uso del scroll, de forma que da la sensación de que el scroll pertenece al body.

Y ya entonces es cuando creamos la capa o capas con la que queremos emular el position:fixed. Su posición pasa a ser absoluta con respecto al body, de forma que solamente se generará la barra de scroll desde la capa contenedora. Simple, útil y sin hacks.

La única limitación que le veo es que al generarse scroll, el contenido de la capa contenedora se mueve un poco (la mitad del ancho de la barra de scroll), mientras que los elementos que emulen a la posición fixed siguen en su lugar. Esto podría llegar a generar un pequeño desfase en la colocación de algún elemento. Por lo que como dicen en la tele, “Úsese con moderación“.

Tags: css, xhtml

La idea se basa en una estrucura similar a esta

<!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>Layout al 100% de alto</title>
<link type="text/css" href="layout.css" rel="stylesheet" />
</head>
<body>
<div id="layout">
   <div id="cabecera">capa cabecera</div>
   <div id="lateral">capa lateral</div>
   <div id="contenido">capa contenido</div>
   <div id="pie">capa pie</div>
</div>
</body>
</html>

Y la hoja de estilos pretende ser algo como esto, y después intento explicar el porqué y como.

html,body {
   height:100%;
/* necesario para las sub-alturas */
}

body {
   margin:0;
   padding:0;
   overflow-x: hidden;
/* Para evitar el feo scroll horizontal de explorer 7 */
   background:#fff;
}

body, div, p {
   font-family: verdana;
   font-size:12px;
   color:#000;
}

div#layout {
   position:relative;
/* necesario para el posicionamiento */
   margin:0 auto;
/* lo centramos, aunque no funciona para explorer 5 */
   width:750px;
   height:auto !important;
/* para los navegadores de verdad */
   height:100%;
/* Para que explorer lo interprete como alto mínimo */
   min-height:100%;
/* para los navegadores de verdad */
   background:#f0f0f0;
}

div#cabecera {
   background:#cc0000;
   height: 80px;
   padding:10px;
   color: #fff;
}

div#lateral {
   float: left;
   width: 150px;
   padding: 10px;
   padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
   background: #ccc;
}

div#contenido {
   padding: 10px;
   padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
   margin-left: 170px;
/* 150px del ancho del lateral
    más 20px del padding del mismo */
   background: #eeeAA0;
}

div#pie {
   position:absolute;
   width:730px;
/* 750px del ancho del layout menos 20px del padding */
   height: 30px;
   padding:10px;
   color: #fff;
   bottom:0;
/* lo encajamos al fondo de todo */
   background:#006699;
}

Lo primero de todo es permitir alcanzar un 100% de altura a la entidad más importante de la estructura, y en este caso me refiero a las etiquetas <html> y <body>, por lo que les damos una altura del 100%.

Acto seguido a la capa “layout” que es la que va a contener el resto de elementos, la posicionamos de forma relativa. Esto nos permite posicionar otros elementos con respecto al contenedor principal, es decir, a la capa “layout“. Después le aplicamos el famoso truco dándole un mínimo de altura del 100%, altura automática declarándola como !important, y para hacerlo compatible con los navegadores de mentira, volvemos a declarar la altura al 100%. Esto evidentemente no anula la altura anterior para los navegadores buenos, ya que hemos puesto el !important.

La cabecera y las columnas contenido y lateral, no tienen nada fuera del otro mundo, a no ser un “padding-bottom” que es igual a la altura de nuestro footer. Esto se debe a que el footer lo posicionamos de forma absoluta, a 0px del fondo (bottom:0px;) por lo que siempre estará pegado al fondo y puede llegar a tapar con su altura parte del texto de las capas citadas.

Espero haberme explicado del porqué de determinados estilos, aunque como dice un conocido

No me enteré de lo que dijo, pero si funciona me vale

Pués eso. Solo apuntar para terminar, que las capas lateral y contenido no se estiran con el resto del layout – eso sería otra historia. Lo que pretendía con este tutorial era que el footer se mantenga siempre abajo de todo e independiente del tamaño de la ventana y del contenido del mismo, que se mantuviera igual.

Alguien me preguntaba por la mañana si esto sirve para el caso en que el lateral necesite tener un color de fondo que alcance hasta el footer. Mi respuesta es si. Simplemente crearíamos un fondo del ancho deseado, y lo colocaríamos de fondo en la capa layout repitiéndose verticalmente.

[ demo ] [ descargar ]

Tags: css, xhtml

Me hacen mucha gracia las reuniones de las “instituciones” o “individuos” que tratan de modernizar las tecnologías como html y css, y todos los post relacionados que piden cosas de las que realmente podemos prescindir, y de las que llegamos a ellas por otras vías – pienso – más lógicas, como integrar javascript con css, variables en las css, y un largo etc.

Y digo yo, por que no reunirse para cosas más lógicas y necesarias como por ejemplo poder jugar con medidas en tantos por cien y la posibilidad de poder restarle valores absolutos ?

Yo vería muy lógico el poder darle una vuelta de tuerca a todo esto, y poder llegar a algo como

   #header    { height: 150px; }
   #content   { height: 100%-250px; }
   #footer    { height: 100px; }

Creo que eso es bastante más útil que otras cosas que realmente pienso que no sirven más que para acarrearnos más problemas. Quién no se ha peleado con un layout y ha tenido que tirar finalmente de javascript porque lo que pretendía hacer no era posible sólo con css ?

Después está el tema del famoso ACID test. Tanta cosa para poder llegar al 100%. No será más fácil hacer propuestas – ellos que pueden – para conseguir cosas útiles ? No voy a ser yo – entre otras cosas – el que vaya a hacer una web con un smiley compuesto de formas ilógicas de encontrar en una web.

En fin, lo que en principio iba a ser un post para hacer mi propuesta de layout al 100% de alto, se convirtió en una pequeña pataleta fruto de la pelea que mantuve anteayer con una interface rebelde e “imposible” de hacer sin javascript – por lo menos si la quería hacer compatible con “otros” navegadores.

Y no voy a seguir, sinó pediría una orden de alejamiento para los programadores de explorer. Calla, calla, que te pierdes.

Tags: css, javascript, pataletas