He vivido ajeno al mundo de los frameworks HTML hasta que descubrí Bootstrap. Desde entonces no he hecho más que encontrar y descubrir otros tantos, con sus propios componentes listos para usar, sin tener que toquetear el CSS y los distintos estilos, algo muy interesante si no eres un gran diseñador (me incluyo).
Simplemente voy a poner una lista de ellos, para tenerlos presentes y como referencia para un futuro:
Aunque algo distinto, esta tabla o 'grid' parece bastante interesante también si lo que buscas es ese tipo de componentes:
jqGrid
Para móvil, tenemos jQuery Mobile que funciona únicamente con JavaScript. Hay otros frameworks, quizá más potentes, pero también más complejos que ofrecen un desarrollo en HTML, JS y CSS que luego irá compilado en formato de aplicación para las distintas plataformas móviles. Titanium es un buen ejemplo de una de ellas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
lunes, 23 de septiembre de 2013
martes, 21 de febrero de 2012
Ocultar la barra lateral de blogger
En ocasiones puede interesarnos ocultar la barra lateral del blog en ciertos lugares: por ejemplo en las páginas, o en algún post en concreto.
Para ello, tendremos que editar la plantilla de nuestro blog. Siempre que se hace esto, recomiendo hacer una copia de seguridad con anterioridad, por si acaso algo falla o por si queremos volver a la versión anterior y descartar los cambios de ocultar la barra lateral de blogger.
Después de hacer la copia de seguridad, vayamos a ver como ocultar la barra lateral de blogger:
Si lo queremos aplicar para todas las páginas por ejemplo, cambiaremos la condición:
O si lo queremos aplicar para los posts, entonces la condición será:
Como ejemplo, podrás observar que esta página no tiene barra lateral: he ocultado la barra lateral de blogger en este post en concreto.
Para ello, tendremos que editar la plantilla de nuestro blog. Siempre que se hace esto, recomiendo hacer una copia de seguridad con anterioridad, por si acaso algo falla o por si queremos volver a la versión anterior y descartar los cambios de ocultar la barra lateral de blogger.
Después de hacer la copia de seguridad, vayamos a ver como ocultar la barra lateral de blogger:
- Entramos en Plantilla y hacemos click en Edición de HTML
- Buscamos la etiqueta </b:skin>
- A continuación introducimos el código siguiente:
<b:if cond='data:blog.url == "http://la-URL-de-tu-post-o-pagina"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>
Si lo queremos aplicar para todas las páginas por ejemplo, cambiaremos la condición:
<b:if cond='data:blog.pageType == "static_page"'>
O si lo queremos aplicar para los posts, entonces la condición será:
<b:if cond='data:blog.pageType == "item"'>
Como ejemplo, podrás observar que esta página no tiene barra lateral: he ocultado la barra lateral de blogger en este post en concreto.
martes, 7 de febrero de 2012
Centrar un DIV posicionado absolutamente
Para centrar un div, por muchos es conocido el método de aplicarle un margen como sigue:
Sin embargo este método no nos servirá si el div que queremos centrar está posicionado absolutamente. En el caso más básico, podemos tener lo siguiente:
La solución para estos casos pasa por situarlos en el centro de la pantalla (50%) con un margen a la izquierda negativo de la mitad de su ancho. Digamos que nuestro DIV tiene 600px de ancho, para centrarlo:
Pero podemos ir un poco más allá. Hasta aquí hemos supuesto que conocemos el ancho del DIV que queremos centrar, pero no siempre es así, en ocasiones, el contenido de un DIV es dinámico y cambiará constantemente. El método anterior no nos servirá. La solución aquí es meter nuestro div dentro de un contenedor que nos ayudará a centrarlo:
Y así quedará perfectamente centrado en la página
margin: 0 auto;
Sin embargo este método no nos servirá si el div que queremos centrar está posicionado absolutamente. En el caso más básico, podemos tener lo siguiente:
<body> <div style="position:absolute"></div> </body>
La solución para estos casos pasa por situarlos en el centro de la pantalla (50%) con un margen a la izquierda negativo de la mitad de su ancho. Digamos que nuestro DIV tiene 600px de ancho, para centrarlo:
<body> <div style="position:absolute;width:600px;top:0;left:50%;margin-left:-300px;"></div> </body>
Pero podemos ir un poco más allá. Hasta aquí hemos supuesto que conocemos el ancho del DIV que queremos centrar, pero no siempre es así, en ocasiones, el contenido de un DIV es dinámico y cambiará constantemente. El método anterior no nos servirá. La solución aquí es meter nuestro div dentro de un contenedor que nos ayudará a centrarlo:
<body>
<div style="position:absolute;left:50%;">
<div style="position:relative;left:-50%;"></div>
</div>
</body>
Y así quedará perfectamente centrado en la página
miércoles, 1 de febrero de 2012
Altura de un DIV igual que la de sus hijos
Hoy vuelvo con un poco de CSS. Es una cuestión que se me ha planteado en muchas ocasiones: digamos que tienes un div contenedor de otros dos o tres divs con una altura no definida que varía en función del contenido que le vayamos a meter. Estos divs estarán colocados con un float para que tengan la forma de columnas y queden uno junto al otro. Un ejemplo de esta estructura sería:
Cómo he comentado, si a los divs internos (columna1 y columna2) les aplicamos un estilo para que "floten" quedarán en forma de columna: float:left;
Sin embargo tendremos un problema con el contenedor que no se adaptará a la altura de los hijos y se quedará con una altura de 0
Para solucionar esto, hay que añadir un último div a la estructura que no tenga la propiedad float y con un clear:both como se ve a continuación:
De esta manera quedará solucionado el problem y el div padre se quedará adaptado a la altura de la más alta de las dos columnas
Visto en muchos sitios, pero cogido de aquí
<div id="contenedor">
<div id="columna1">contenido de altura variable</div>
<div id="columna2">
<div id="sub1">mas contenido</div>
<div id="sub2">mas contenido</div>
...
</div>
<div>
Cómo he comentado, si a los divs internos (columna1 y columna2) les aplicamos un estilo para que "floten" quedarán en forma de columna: float:left;
Sin embargo tendremos un problema con el contenedor que no se adaptará a la altura de los hijos y se quedará con una altura de 0
Para solucionar esto, hay que añadir un último div a la estructura que no tenga la propiedad float y con un clear:both como se ve a continuación:
<div style="clear:both;"></div>
De esta manera quedará solucionado el problem y el div padre se quedará adaptado a la altura de la más alta de las dos columnas
Visto en muchos sitios, pero cogido de aquí
Suscribirse a:
Entradas (Atom)