Cmacias.com » xhtml http://www.cmacias.com Otro blog más de diseño Sat, 06 Aug 2011 18:26:10 +0000 en hourly 1 http://wordpress.org/?v= Emulando a los iframes con css http://www.cmacias.com/emulando-a-los-iframes-con-css/ http://www.cmacias.com/emulando-a-los-iframes-con-css/#comments Sat, 12 Jul 2008 00:43:53 +0000 cmacias http://www.cmacias.com/?p=101 Layout frame

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: ,

]]> http://www.cmacias.com/emulando-a-los-iframes-con-css/feed/ 3 position:fixed compatible con todos los navegadores http://www.cmacias.com/positionfixed-compatible-con-todos-los-navegadores/ http://www.cmacias.com/positionfixed-compatible-con-todos-los-navegadores/#comments Tue, 08 Jul 2008 23:28:11 +0000 cmacias http://www.cmacias.com/?p=99 Siempre he pensado que las buenas ideas o soluciones a problemas estaban ahí, al lado nuestra, y que además no eran complicadas. Solo hay que pensar con claridad y pensar en algo simple.

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: ,

]]> http://www.cmacias.com/positionfixed-compatible-con-todos-los-navegadores/feed/ 5 Layout 100% alto http://www.cmacias.com/layout-100-alto-ii/ http://www.cmacias.com/layout-100-alto-ii/#comments Wed, 25 Jun 2008 23:32:33 +0000 cmacias http://www.cmacias.com/?p=90 Layout al 100% de alto

Después de haber navegado mucho buscando la versión perfecta – que pienso que no existe – yo hago mi pequeña y humilde propuesta. Yo desde luego que le voy a sacar mucho provecho. Si desde luego a alguien más le sirve y le evita tener que darle a la cabeza, otra alegría que me llevo.

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: ,

]]> http://www.cmacias.com/layout-100-alto-ii/feed/ 23 Mejorando los selectBox http://www.cmacias.com/mejorando-los-selectbox/ http://www.cmacias.com/mejorando-los-selectbox/#comments Mon, 16 Jun 2008 22:15:00 +0000 cmacias http://www.cmacias.com/?p=80 Como diseñador quisquilloso que soy, uno de los objetivos que busco en la web, es el diseño total. Es decir, el poder diseñar cada uno de los elementos que componen una web, desde el primer hasta el último elemento.

Y uno de los elementos quizá mas toscos y feos sean los controles de formulario. Si en un post anterior conseguí de mejor o peor manera controlar el aspecto de un selectBox multiple, ahora estoy tratando de mejorar los selectBox.

El resultado hasta el momento es este:


En principio es totalmente configurable tanto en estructura como en aspecto, y aunque aún me quedan algunos aspectos por pulir (compatibilidad de navegadores, testeo, etc), el resultado creo que no es malo y dá el pego. No es obstrusivo, por lo que en caso de no tener activado el javascript, se mostraría el control normal.

En breve liberaré una primera versión de testeo.

Tags: , , ,

]]> http://www.cmacias.com/mejorando-los-selectbox/feed/ 7 Editores Wysiwyg http://www.cmacias.com/editores-wysiwyg/ http://www.cmacias.com/editores-wysiwyg/#comments Thu, 12 Jun 2008 09:50:56 +0000 cmacias http://www.cmacias.com/?p=76 wysiwyg

Desde un tiempo hacia aquí, ya es costumbre añadir editores visuales a las zonas de administración de nuestros proyectos. Evidentemente en función de la libertad que le demos al usuario, nos decantamos por un editor u otro, y es aquí cuando nos entra la duda de que editor usar, cuanto pesará y si tendrá soporte o no para imágenes.

Este es un listado de editores Wysiwg de libre uso. La gran carencia de casi todos ellos es que no disponen de un gestor de imágenes que nos permita llevar una librería de imágenes o simplemente subirlas al servidor. Se salva de la quema el FcKeditor que dispone de uno gratuito y el TinyMce, que aunque es de pago, su precio es asequible, disponiendo además de un plugin para WordPress.

Los hay también de pago, pero realmente no hacen nada que algunos de estos editores no hagan, por lo que he preferido no incluirlos en la lista. Y Gestor de Imágenes del TinyMCEtambién editores que forman parte de un framework, como por ejemplo el editor visual de ExtJs, para los cuales evidentemente hay que utilizar toda su estructura de javascript.

A la hora de confeccionar esta lista no querría olvidarme del KTML, que aunque era de pago, cumplía todos los requisitos necesarios que personalmente lo convertían en el mejor editor de todos. Gestión de enlaces e imágenes, vista de código integrada en el mismo editor, panel de propiedades de cada una de las funciones al pié del editor, salida XHTML. Desgraciadamente Adobe dejó el desarrollo de este editor poco después de comprar a Interakt,  la empresa que lo había creado.

tinyMCE



Ya para finalizar, comentar que son dos los editores que se llevan la palma, y no por nada son los más descargados y utilizados de internet, con una comunidad que poco a poco van creando plugins para potenciar más si cabe, la calidad que ya de por si tiene. Evidentemente hablo del TinyMCE y del FCKEditor.

Tags: , ,

]]> http://www.cmacias.com/editores-wysiwyg/feed/ 0 SelectBox múltiple http://www.cmacias.com/selectbox-multiple/ http://www.cmacias.com/selectbox-multiple/#comments Mon, 09 Jun 2008 23:10:19 +0000 cmacias http://www.cmacias.com/?p=72 Por necesidades del guión, tuve que crear para un trabajo un control de formulario de tipo select de selección múltiple. A diferencia de los select normales, este tenía que permitir selecciones de más de un elemento sin tener que acceder al teclado, y además, adecuarse estéticamente con el diseño de la página, por lo que no me quedó más remedio que hacérmelo.

Su funcionamiento es sencillo. Simplemente hago un recorrido por todos los controles select multiples del documento y los sustituyo por unas listas generadas al vuelo con el DOM de javascript y una pequeña función que permite recorrer el select original y comunicarlo con el nuevo y viceversa.

En esta versión y por necesidades del guión y el tiempo, no recibe los eventos que pudiera tener el select original, aunque si es posible manipular el alto, ancho, posición, y los parámetros left, top, right. botom para cambiar la posición y aspecto.

No depende de ninguna librería y simplemente es necesario incluir el archivo js en el documento.

Evidentemente se puede utilizar en cualquier sitio y para cualquier cosa. También se aceptan sugerencias para mejorarlo

[ descargar ] [ ejemplo ]

Tags: , , ,

]]> http://www.cmacias.com/selectbox-multiple/feed/ 0 un sencillo sistema de pestañas http://www.cmacias.com/un-sencillo-sistema-de-pestanas/ http://www.cmacias.com/un-sencillo-sistema-de-pestanas/#comments Sun, 18 May 2008 11:13:50 +0000 cmacias http://www.cmacias.com/?p=34 Ahora que están de moda los sistemas de pestañas, yo también me subo al carro de la moda y propongo mi propio sistema al margen de frameworks. Un poco de html, algo de css y el javascript de toda la vida.

Lo primero de todo es crear la estructura que queremos que siga el sistema. En mi caso quiero hacer un panel limitado en tamaño, para pongamos por ejemplo, un panel de configuración.

<div id="panel">
   <ul id="tabs">
      <li id="tab_01"><a href="#">opción 1</a></li>
      <li id="tab_02"><a href="#">opción 2</a></li>
      <li id="tab_03"><a href="#">opción 3</a></li>
      <li id="tab_04"><a href="#">opción 4</a></li>
   </ul>
   <div id="paneles">
      <div id="panel_01">panel para la opción 1</div>
      <div id="panel_02">panel para la opción 2</div>
      <div id="panel_03">panel para la opción 3</div>
      <div id="panel_04">panel para la opción 4</div>
   </div>
</div>

A cada elemento de la lista de los paneles les añadimos un identificador para después poder ocultarlos y/o mostrarlos según nos convenga. De momento debería de verse así

A continuación viene la parte más divertida, darle forma y color.
Para la forma de las pestañas, usaremos la siguiente imagen:

pestañas

Los estilos serían algo similar a esto.

/* tamaño y forma del panel principal */
div#panel {
   position: relative;
   width:400px;
   height: 300px;
}

/* configuracion de las pestañas */
   ul#tabs {
      position:absolute;
      left: 0px;
      top: 0px;
      margin:0;
      padding:0;
      width: 400px;
      height: 24px;
      z-index: 20;
   }
      ul#tabs li {
         float:left;
         height: 23px;
         padding-left: 8px;
         list-style: none;
         margin-right: 1px;
         background: url(tabs.png) left -48px;
      }
      ul#tabs li.actual {
         height: 24px;
         background: url(tabs.png) left -72px;
      }
         ul#tabs li a {
            display: block;
               /* hack para ie6 */
               .display: inline-block;
               /* fin del hack */
            height: 23px;
            line-height: 23px;
            padding-right: 8px;
            outline: 0px none;
            font-family: arial;
            font-size: 10px;
            text-decoration: none;
            color: #000;
            background: url(tabs.png) right 0px;
         }

         ul#tabs li.actual a {
            height: 24px;
            line-height: 24px;
            background: url(tabs.png) right -24px;
            cursor: default;
         }

   /* Configuración de los paneles */
   div#panel #paneles {
      position:absolute;
      left: 0px;
      top: 23px;
      width: 398px;
      height: 275px;
      border: 1px solid #91a7b4;
      background: #fff;
      overflow: hidden;
      z-index: 10px;
   }
      div#panel #paneles div {
         margin:10px;
         width: 378px;
         height: 255px;
         font-family: arial;
         font-size: 12px;
         text-decoration: none;
         color: #000;
         overflow: auto;
   }

Por lo que el resultado debería ser igual a esto.

Como la cosa ya va tomando forma, necesitamos crear una función javascript que nos permita cambiar tanto la apariencia de las pestañas como la visibilida de cada una de las capas destinadas a tal fin.

Para ello creamos una función como esta

function tab(pestana,panel)
{
   pst = document.getElementById(pestana);
   pnl = document.getElementById(panel);
   psts = document.getElementById('tabs').getElementsByTagName('li');
   pnls = document.getElementById('paneles').getElementsByTagName('div');

   // eliminamos las clases de las pestañas
   for(i=0; i< psts.length; i++)
   {
   // Para evitar meternos en temas de dom
   // hacemos que la clase sea vacío
      psts[i].className = '';
   }

   // Añadimos la clase "actual" a la pestaña activa
   pst.className = 'actual';

   // ocultamos todos los paneles
   for(i=0; i< pnls.length; i++)
   {
      pnls[i].style.display = 'none';
   }

   // Y mostramos el panel que nos interesa
   pnl.style.display = 'block';
}

Al final de nuestro documento, mostramos la pestaña que queremos tener activa de esta forma

   <script type="text/javascript">
      tab('tab_01','panel_01');
   </script>

Y esta misma función será la que utilicemos en cada enlace para poder mostrar/ocultar nuestra información.

<ul id="tabs">
   <li id="tab_01"><a href="#" onclick="tab('tab_01','panel_01');">opción 1</a></li>
   <li id="tab_02"><a href="#" onclick="tab('tab_02','panel_02');">opción 2</a></li>
   <li id="tab_03"><a href="#" onclick="tab('tab_03','panel_03');">opción 3</a></li>
   <li id="tab_04"><a href="#" onclick="tab('tab_04','panel_04');">opción 4</a></li>
</ul>

[ ver resultado final ] [ descargar ]

Tags: , ,

]]> http://www.cmacias.com/un-sencillo-sistema-de-pestanas/feed/ 47 Tooltip básico con css http://www.cmacias.com/tooltip-basico-con-css/ http://www.cmacias.com/tooltip-basico-con-css/#comments Wed, 14 May 2008 18:19:24 +0000 cmacias http://www.cmacias.com/?p=30 Hay veces en que no vale la pena utilizar javascript o scripts muy concretos para funciones básicas de una web. Con una línea de html y cuatro o cinco de css, es posible crear un tooltip, que en más de una ocasión nos será más que suficiente.

Es línea de código html es más que suficiente para crear nuestro tooltip básico

<a href="#" class="tip">enlace<span>Este es el tip.
Se puede añadir <strong>html</strong>, aunque no
<u>conviene</u> <i>abusar mucho</i> de él</span></a>

Nuestro objetivo es ocultar el <span> dentro del enlace y mostrarlo al pasar el ratón por encima del mismo.

a.tip {
   position:relative;
   color: #006699;
   text-decoration:underline;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 11px;
}
a.tip:hover {
   color: #cc0000;
   text-decoration:underline;
}
   a.tip span {
      position:absolute;
      display: none;
      left: 0px;
      top: 10px;
      width: 180px;
      height: auto;
      padding: 10px;
      padding-top: 20px;
      color: #003366;
      background: url(tip.gif) left top no-repeat;
      border-bottom: 1px solid #006699;
      cursor: default;
   }
   a.tip:hover span {
      position:relative;
      display: block;
      padding: 0;
      margin:0;
      background: none;
      border: 0px none;
      cursor: default;
   }

   a.tip_demo span span, a.tip_demo:hover span span {
      position:relative;
      display: inline;
      left: auto;
      top: auto;
      width: auto;
      height: auto;
      padding: 0;
      color: #000;
      background: none;
      border: 0px none;
      cursor: default;
   }

[ descargar imagen de fondo del css ]

Ejemplo del tooltip

En este texto podemos encontrar Enlaces con tooltips ocultos que además soportan el uso de los tag más frecuentesnegrita, cursiva, texto con color y hasta imágenes si nos trabajamos bien el css

Tags:

]]> http://www.cmacias.com/tooltip-basico-con-css/feed/ 4 Maquillar un file upload 2 http://www.cmacias.com/maquillar-un-file-upload-2/ http://www.cmacias.com/maquillar-un-file-upload-2/#comments Sun, 11 May 2008 11:10:44 +0000 cmacias http://www.cmacias.com/?p=25 Vamos a aprovechar el código obtenido en maquillar un file upload, para complementarlo y que se parezca aún más si cabe a un control de upload solo que a nuestro gusto.

El código inicial cambia un poco. Necesitamos crear un contenedor, y colocar dentro nuestro nuevo botón de upload, y un input de tipo texto para que nos muestre el archivo seleccionado.

<div class="cnt_upload">
   <input id="upload_value" value="" />
   <div class="upload">
      <input type="file" name="upload" onchange="document.getElementById('upload_value').value=this.value" />
    </div>
</div>

En esta ocasión hemos tenido que utilizar javascript para poder pasar mediante el evento onchange del input de tipo file, al de tipo texto.

Ahora que tenemos la estrucura necesaria, pasamos al css

div.cnt_upload {
   position:relative;
   height: 27px;
   width: 200px;
}

div.upload {
   position: absolute;
   left: 120px;
   top: 0px;
   width: 80px;
   height: 24px;
   overflow:hidden;
   background: url(btn_upload.png) left top no-repeat;
   clip:rect(0px, 80px, 24px, 0px );
}

   div.upload input {
      position: absolute;
      right: 0px;
      top: 0px;
      margin:0;
      padding:0;
      filter: Alpha(Opacity=0);
      -moz-opacity: 0;
      opacity: 0;
   }

input#upload_value {
   position:absolute;
   left: 0px;
   top: 0px;
   margin:0;
   padding:0;
   padding-top: 2px;
   height: 20px;
   width: 118px;
   border:1px solid #CCC;
}

[ demo ] [ descarga ]

]]> http://www.cmacias.com/maquillar-un-file-upload-2/feed/ 5 Maquillar un Input file upload http://www.cmacias.com/maquillar-un-input-file-upload/ http://www.cmacias.com/maquillar-un-input-file-upload/#comments Sat, 10 May 2008 10:18:48 +0000 cmacias http://www.cmacias.com/?p=23 Vamos a ver de que forma podemos maquillar los feos controles de upload de los formularios sin utilizar javascript y validando xhtml.

Lo que vamos a hacer es colocar un div en lugar del input_file, y este dentro del div de la siguiente manera

<div class="upload">
      <input type="file"  name="upload" />
</div>

Aplicamos ahora una capa de maquillaje que lo deje irreconocible

div.upload {
   position: relative;
   width: 80px;
   height: 24px;
   overflow:hidden;
   background:url(btn_upload.png) left top no-repeat;
   clip:rect(0px, 80px, 24px, 0px );
}  

div.upload input {
   position: absolute;
   left: auto;
   right: 0px;
   top: 0px;
   margin:0;
   padding:0;
   filter: Alpha(Opacity=0);
   -moz-opacity: 0;
   opacity: 0;
}

Qué es lo que hemos hecho ? Simplemente hacer transparente el input_file, y mediante la propiedad css “clip” evitamos que el control se salga de los límites del div.

Y para que su aspecto sea más profesional todavía, le añadimos al div una imagen como esta
Botón upload

[ demo ] [ descargar ]

]]> http://www.cmacias.com/maquillar-un-input-file-upload/feed/ 17