Entradas con la etiqueta ‘css’

CSS – Sidebar de la Misma Altura que el Contenido

Publicado por Iván Gajate el 23 de abril de 2014 en css | Los comentarios están cerrados.

Algo que parece muy sencillo es tener dos columnas con diferente altura y que ambas tengan la altura de la mas alta.

 

El ejemplo típico es un site con contenido dinámico y una barra lateral con un menú que queremos que tenga la misma altura que el contenido.

Como no podemos usar alturas fijas, podemos utilizar table-cell

 

.wrapper {
    display: table;
}
 
.left {
    display: table-cell;
    width: 50%;
    background-color: red;
}
 
.right {
    display: table-cell;
    width: 50%;
    background-color: green;
}

Ver el resultado

Gracias Antonio!! 🙂

Sublime Text – Sublime Linter

Publicado por Iván Gajate el 13 de mayo de 2013 en css, Desarrollo Web, JavaScript | Los comentarios están cerrados.

Otra de plugins imprescindibles 🙂

Esta vez es el Sublime Linter, un plugin que nos marca los errores en CSS y JavaScript. Muy útil para evitar perder horas hasta que te das cuenta de ese paréntesis que se te ha olvidado o de esa propiedad CSS que no está bien escrita. Un ejemplo de JavaScript:

Y estas son mis preferencias del plugin (Preferences > Package Settings > Sublime Linter > Settings User), para que no me marque demasiados errores que yo se que no lo son o no me interesan (como algunas reglas CSS para Internet Explorer 6 por ejemplo):

{
	"sublimelinter_delay": 0.5,
	"sublimelinter_gutter_marks_theme": "bright",
	"jshint_options":
	{
		"evil": true,
		"regexdash": true,
		"browser": true,
		"wsh": true,
		"trailing": false,
		"sub": true,
		"eqnull": true,
		"unused": true,
    		"undef": true,
    		"devel": true,
    		"boss": true,
    		"smarttabs": true,
    		"jquery": true
	},
	"csslint_options":
	{
		"adjoining-classes": false,
		"box-model": false,
		"box-sizing": "warning",
		"compatible-vendor-prefixes": "warning",
		"display-property-grouping": true,
		"duplicate-background-images": false,
		"duplicate-properties": true,
		"empty-rules": true,
		"errors": true,
		"fallback-colors": "warning",
		"floats": "warning",
		"font-faces": "warning",
		"font-sizes": "warning",
		"gradients": "warning",
		"ids": false,
		"import": "warning",
		"important": false,
		"known-properties": true,
		"outline-none": "warning",
		"overqualified-elements": "warning",
		"qualified-headings": "warning",
		"regex-selectors": "warning",
		"rules-count": "warning",
		"shorthand": "warning",
		"star-property-hack": "warning",
		"text-indent": "warning",
		"underscore-property-hack": "warning",
		"unique-headings": "warning",
		"universal-selector": "warning",
		"vendor-prefix": true,
		"zero-units": "warning"
	}
}

Para instalarlo como cualquier otro plugin de Sublime, abrimos la paleta Command

Abrimos el paquete instalador

E instalamos el Sublime Linter:

 

 

 

Bloquear el scroll con css

Publicado por Iván Gajate el 9 de noviembre de 2012 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

A veces las CSS te dan alegrías como esta. Si queremos que no aparezca la barra de scroll en nuestra página es tan sencillo como crear un estilo con overflow:hidden:

.no_scroll{
    overflow:hidden;
}

y asignarselo al body con jQuery:

$("body").addClass("no_scroll");

Luego para que vuelvan a aparecer:

$("body").removeClass("no_scroll");

Esto me ha resultado muy útil en una página con un lightbox que al estar visible, no quería que el fondo reaccionase a la rueda del ratón. Cuando muestro el lightbox bloqueo el scroll y cuando se cierra lo vuelvo a activar 🙂

htmlText y CSS

Publicado por Iván Gajate el 6 de agosto de 2009 en AS2, AS3, Flash, Tutoriales | 18 comentarios »

Cada vez le estoy cogiendo mas el gusto a esto de usar un texto con formato html en Flash. Ya vimos como se hacía, y yo no lo usaba demasiado porque había que crear la fuente el la biblioteca, y meter mas líneas de código, pero hoy en el curro me ha ahorrado mucho tiempo y veo que al final no son tantas líneas.

Yo antes para hacer algo como esto

htmltext1

donde sabía que eran cuatro títulos cortos, cada uno con un color, distintos tamaños y cuerpos y ya. Pues no me liaba, metía cuatro campos de texto con cuatro nombres y los seteaba de base de datos.

Pero como ya decía Ale Muñoz en Sofá Naranja, "Cualquier elemento de diseño puede existir cero, una o infinitas veces".

Lo que se traduce en mi diseño en que ya no son cuatro noticias, son infinitas, con un paginado muy mono debajo, unas banderitas a la izquierda de cada título y que si un título es muy largo fluya hacia abajo 🙁
Ha llegado el momento de dejarse de vaguerías y hacerlo bien: htmlText y CSS.

Leer el resto de esta entrada

AS3 – Texto con formato con CSS

Publicado por Iván Gajate el 3 de abril de 2009 en AS2, AS3, Flash, Tutoriales | 17 comentarios »

Si queremos un texto con formato en flash no es tan fácil como podría parecer. Al menos yo siempre tengo que andar buscando cómo lo hice la última vez 😛

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Leer el resto de esta entrada