Selecciona tu idioma / Select your language:
EN
Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as I can visually locate where the elements are positioned, if they’re collapsing, which elements are involving, etc. I use outline because it’s a property that does not modify the box model and won’t going to break more elements that are already working fine. If I use border instead, it will add 1 or 2 px to the box and can add more unnecessary problems. In addition, I use the red color not only because it’s strongly visible, but it’s fastest writing on the keyboard (lazy huh?).
Anyway, that was the introduction. I made this bookmarklet that does the job for me directly on the browser, so I don’t add dirt to my stylesheet or to the HTML file. I could use the web inspector from the browser (or Firebug) but this method is quicker. The bookmarklet asks you for which selector to draw (div is by default but it could be any selector from jQuery sentences) and the color (red is the default but it can be blue, green, #f60, etc).
I hope it can be useful for somebody else than me.
Requirement: you have to be connected to the Internet, it calls jQuery from Google API’s.
ES
Frecuentemente en mi etapa de debugging (cuando necesito solucionar algo dentro del marcado HTML/CSS que estuviera provocando algún conflicto) utilizo la propiedad CSS outline para contornar los elementos HTML y ver dónde están ubicados, si están colapsando, qué elementos envuelve, etc. Utilizo outline porque es una propiedad que no influye en el modelo de caja y no va a hacer que se quiebren los elementos que ya sé que están correctamente posicionados. Si utilizara border le agregaría mínimo 1 ó 2 pixeles a la caja y seguro provocaría un problema más del que estoy tratando de resolver. Además, utilizo el color rojo no porque es uno de los colores más fuertes y menos comunes dentro de un layout, sino que es el más rápido de escribir (en inglés) dentro del CSS. Me acostumbré.
Enfin, esa fue la introducción. Hice un bookmarklet que hace ese trabajo por mí directo en el browser, sin tener que ensuciar mi hoja de estilos y menos el HTML. Podría utilizar el web inspector del browser (ó Firebug) pero este método es más rápido. El bookmarklet te pregunta qué selectores dibujar (por defecto es div pero puedes utilizar cualquier selector mediante las sentencias de jQuery) y además del color (por defecto es red pero puedes utilizar blue, green, #f60, etc).
Espero pueda ser útil a alguien más que a mí.
Requisito: tienes que estar conectado a Internet ya que llama a jQuery desde Google API’s.
Outlinr ← click&drag
How to install a bookmarklet / Cómo instalar un bookmarklet
La condición dice:
Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu sitio no llega hasta el fondo de la ventana, la imagen de fondo llegará sólo hasta donde llegue el contenido.
Para solucionarlo, basta con definir:
html {
height: 100%;
}
Ahora, esta solución es útil cuando sabes que el contenido es y será menor al alto de la ventana; si tu contenido es dinámico es mejor que utilices min-height:
html {
min-height: 100%;
}
Gracias a inyaka por hacerlo notar.
Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:
#container {
width: 600px;
display: inline-block;
}
.floto {
float: left;
}
Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:
Para contrarrestarlo, define también ancho fijo en los elementos flotantes:
#container {
width: 600px;
display: inline-block;
}
.floto {
width: 280px;
float: left;
}
Nada es perfecto… es un método más.
]]>Para quitarlo, basta declarar en CSS:
textarea {
resize: none;
}
Ver ejemplo
(En Safari-Chrome)
Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ”. Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas?
Esta pregunta que ha intrigado al hombre por años no tiene una respuesta definitiva. Por lo menos no la he encontrado de manos de la W3C, pero sí el uso de comillas en ciertas declaraciones tiene sentido:
… single quotes (‘), and double quotes (") must come in matching pairs …
Primero, no dice que deben ser utilizadas. Segundo, dice que si las utilizas, deben estar en par (si abres con comilla simple cierra con simple, etc.). Pero:
Inside the quotes, characters are parsed as a string.
Esto es lo importante. Si utilizas las comillas simples o dobles, el valor se pasa como string. Un ejemplo práctico y descuidado: si tienes una imagen con espacios en su nombre:
background: url('back ground.png')
Si utilizas comillas en su declaración la imagen se mostrará:
Si no la utilizas, el browser no encontrará la imagen:
Este comportamiento es independiente del doctype que estés utilizando. Yo las uso.
Link:
]]>Para esta nueva versión, he agregado las nuevas etiquetas que conforman HTML 5 para elementos de tipo bloque (las que son inline no las necesitan) y aproveché de realizar las siguientes mejoras en lo existente:
- Soporte para nuevas etiquetas HTML 5
- Mejor reset para campos de formularios
- Mejoras para listas ordenadas (<ol>) y tablas (<table>)
Ya está activo en este nuevo sitio, y espero sea aprovechado y de mucha ayuda en sus proyectos. La idea, como saben, es simplificar el codificado mediante el reset de estilos que traen por defecto los navegadores web.
]]>
En esta ocasión el layout es bastante simple, uno típico que encontrarás en cualquier sistema de comentarios para blogs. Pero es un buen puntapié para que veas de qué se trata esto. Además, contiene las etiquetas fundamentales y más utilizadas para capturar datos de usuarios.
Espero sea de ayuda y que se entienda, como siempre lo muestro en 2 formatos: streaming para web y uno en alta calidad para que lo bajes y estudies offline. Además, puedes descargar el material utilizado para este videocast.
]]>CSS tiene una ‘obscura’ propiedad llamada vertical-align. Lo obscuro se debe a que es confuso su entendimiento, y por ende su uso. Para ayudar a aclarar eso, este artículo lo atacará por dos ámbitos más que necesarios: alineado de elementos de formulario y de imágenes.
Vertical-align tiene uso principalmente en etiquetas que son por esencia de tipo inline. Si tratas de utilizar esta propiedad en un <div> por ejemplo, o en un <p> quizás es por eso que te hayas frustrado ya que estos elementos son de tipo block. Cuando vertical-align es definido para elementos inline, se comporta como el antiguo y obsoleto atributo valign="". Tomando este principio, su uso en imágenes junto a texto se ven resultados concretos:
Los valores de vertical-align son:
- baseline: valor por defecto, el elemento es ubicado en la base del elemento padre.
- sub: alinea el elemento como si fuera subescrito (<sub>).
- super: alinea el elemento como si fuera sobrescrito (<sup>).
- top: la parte superior del elemento es alineado con la parte superior del elemento en la misma línea.
- text-top: la parte superior del elemento es alineada con la parte superior del padre de los elementos de texto.
- middle: el más interesante; el elemento es ubicado en la mitad del elemento padre.
- bottom: también interesante; la parte inferior del elemento es alineado con la parte más baja de la línea.
- text-bottom: la parte inferior del elemento es alineada con la parte inferior del padre de los elementos de texto.
- %: alínea el elemento en valores porcentuales de la propiedad line-height (se permiten valores negativos).
Otro importante uso de esta propiedad es con etiquetas de formulario, principalmente cuando queremos alinear los nombres de los campos (generalmente envueltos en <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto:
Como décadas pasadas, esta propiedad también puede ser utilizada en reemplazo del atributo para celdas de tablas, bajo los mismos valores. Como las celdas por defecto tienen vertical-align: middle definidos, puedes utilizar los otros valores para lograr lo que necesites.
¿Milagrosa? Bueno, suena bien hasta ahora pero está lejos de ser la solución definitiva, ya que IE6 e IE7 soporta esta propiedad a su manera, como siempre.
Links
]]>Por todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha sido de gran utilidad desde entonces. Esta vez, les traigo uno nuevo: Floatfix (nuevamente bautizado así por mí). Con este método, superas el colapso del contenedor a causa de elementos bloque flotantes dentro de él utilizando la propiedad CSS… ¡float!
¿Float para arreglar otros floats?
Así es, si tu elemento caja que contiene otros elementos que están flotando colapsa, pues simplemente flótalo y todo volverá a la normalidad.
Volveré a explicar el asunto. Miren en el siguiente ejemplo como #container contiene (valga la redundancia) a 2 elementos que están flotando. Bueno, basta con que sea 1 y ya #container estaría colapsando (no los envuelve).
#container {
margin: 40px;
}
.flout {
float: left;
}
Bueno, si utilizan .clearfix todo volvería a la normalidad; si tienen ancho fijo en el #container y agregan overflow: hidden también todo estaría normal, pero en vez de eso, sólo floten el #container a cualquier lado: left o right:
#container {
margin: 40px;
float: left;
}
.flout {
float: left;
}
Así de simple y de contradictorio. Funciona en todos mis browsers de pruebas y claro tiene sus pros y contras. Pero depende de cada uno manejar la mejor solución a sus problemas. Este es sólo uno más.
Link:
]]>
Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.
En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.
Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:
<ul id="menu">
<li><a href="#">Uno</a></li>
<li class="cabeza"><a href="#">Dos</a>
<ul>
<li><a href="#">Dos.Uno</a></li>
<li><a href="#">Dos.Dos</a></li>
<li><a href="#">Dos.Tres</a></li>
</ul>
</li>
<li><a href="#">Tres</a></li>
<li class="cabeza"><a href="#">Cuatro</a>
<ul>
<li><a href="#">Cuatro.Uno</a></li>
<li><a href="#">Cuatro.Dos</a></li>
</ul>
</li>
</ul>
Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo funcionar:
ul {
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
li.cabeza>ul {
display: none;
}
li.cabeza:hover>ul {
display: block;
}
Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:
$(document).ready(function(){
// primero escondemos todos los subniveles
$('li.cabeza > ul').hide();
// luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery
$('li.cabeza').hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}); });
Muy simple. Ahora, con Mootools (1.11):
window.addEvent('domready', function() {
// creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez.
var list = $$('li.cabeza');
// luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none
list.getElement('ul').setStyle('display', 'none');
// ahora agregamos los eventos de mouseenter y mouseout respectivos
list.each(function(el) {
el.addEvent('mouseenter', function(){
$(this).getElement('ul').setStyle('display', 'block');
});
el.addEvent('mouseleave', function(){
$(this).getElement('ul').setStyle('display', 'none');
});
});
});
Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.
]]>