giancarlospot - desarrollo web » CSS http://www.giancarlospot.com Fri, 02 Jul 2010 18:16:31 +0000 en hourly 1 http://wordpress.org/?v=3.0 Un “auto height” cuando se usa float en css http://www.giancarlospot.com/css/un-auto-height-cuando-se-usa-un-float-con-css.html http://www.giancarlospot.com/css/un-auto-height-cuando-se-usa-un-float-con-css.html#comments Mon, 31 May 2010 18:15:26 +0000 giancarlo http://www.giancarlospot.com/?p=335 Existen problemas cuando se está armando con capas y css una web, ya que muchas veces necesitamos tener una columna a la izquierda de la otra. Para lograr esto, necesitamos poner los tamaños de anchos exactos para que no se mueva para abajo la capa que debe estar al costado, pero también se debe trabajar con una capa contenedora y esto es lo que a muchos les trae problemas cuando el alto de la capa  (height) es dinámico.
Para solucionar este inconveniente siempre debemos tener una capa contenedora, pero como no sabemos el alto que ésta debe tener, le debemos de poner

<style type="text/css">
div.contenedor{
     display: inline-block;
}
</style>

Así, la capa crecerá en base a las capas que estén adentro, aunque estas tengan la propiedad “float”. Veamos un ejemplo

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
}
div.contenedor div.izquierda{
	float: left;
	width: 150px;
	background-color: #FF0000;
	margin-right: 10px:;
}
div.contenedor div.centro{
	float: left;
	width: 280px;
	background-color: #0000FF;
}
</style>

Por cierto, ven que utiizo herencia de capas, si no están muy familiarizados con el armado de CSS vean este link para armar sus página webs con CSS y DIVs

<div class="contenedor">
     <div class="izquierda">
     <p>Izquierda</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
     <div class="centro">
     <p>Centro</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
</div>

Al final van a ver que obtendrán este resultado, el cual no quieren:

Pero si le agregan el atributo display al estilo “contenedor”, tendrán justamente lo que necesitan, que la capa contenedor crezca verticalmente como las que están dentro de él:

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
	display: inline-block;
}
</style>

Aquí está lo que quieren

¿Qué les pareció? ¿Les sirvió?

]]> http://www.giancarlospot.com/css/un-auto-height-cuando-se-usa-un-float-con-css.html/feed 1 Acordion con JQuery y con el plugin Jquery easing http://www.giancarlospot.com/javascript/acordion-con-jquery-y-con-el-plugin-jquery-easing.html http://www.giancarlospot.com/javascript/acordion-con-jquery-y-con-el-plugin-jquery-easing.html#comments Mon, 11 Jan 2010 04:24:57 +0000 giancarlo http://www.giancarlospot.com/?p=284 El uso del acordion en las páginas webs de ahora son muy usados y es más simple de lo que uno se puede imaginar, sobre todo si lo usas con JQuery. En realidad qué es? Puede ser un <div> oculto que los muestras cuando le das clic a otro DIV, bueno yo uso DIVS pero puedes usar un <p> u otra etiqueta.
Primero creamos los div con la información. Vamos a ponerle un número para poder identificar más rápido los títulos y la información en base a al div en el que se encuentran.

<div class="acordion">
 
<div id="item_1" class="item">
 
<div id="titulo_1" class="titulo">Título 1</div>
 
 
<div id="info_1" class="info">Información 1</div>
</div>
 
 
<div id="item_2" class="item">
 
<div id="titulo_2" class="titulo">Título 2</div>
 
 
<div id="info_2" class="info">Información 2</div>
</div>
 
 
<div id="item_3" class="item">
 
<div id="titulo_3" class="titulo">Título 3</div>
 
 
<div id="info_3" class="info">Información 3</div>
</div>
</div>

Hemos encerrado todo en un div con el estilo “acordion”, dentro hay grupos, agrupados por un div con el estilo “item” y dentro hay dos divs, el título (estilo “titulo”) y la información (estilo “info”). Vamos a darle estilo a estas capas.

div.acordion{
	width: 200px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.item div.titulo{
	background-color: #FF6;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 3px;
	height: 21px;
}
div.item div.info{
	background-color:#69F;
	padding: 5px;
}

Le hemos dado tamaño, tipografía, colores, bordes, etc. Esto lo puedes cambiar en base a los colores que quieras utilizar o la tipografía, sin que esto percuta con el funcionamiento. Ahora lo que se debe hacer es ocultar la información, para que solo sea mostrada cuando se le de clic al título, esto lo hacemos en el estilo “info”.

div.item div.info{
	background-color:#69F;
	padding: 5px;
	display: none;
}

Ahora veamos el Javascript, yo llamo a los JS antes de cerrar la etiqueta BODY. Vamos a llamar al los JS jquery.js y jquery.easing.js. Además, cuando termine de cargar el documento vamos a hacer que el acordion funcione, para esto vamos a utilizar el método each de Jquery. Esto lo utilizo para que se sepa cual es el título y la información de cada “item”.

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.easing.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

Luego recuperamos el titulo y la información por cada “item”, aquí es donde usamos el número que le pusimos a los divs. Cuando le demos clic al título, su info respectiva se mostrará o se ocultará dependiendo del caso.

$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1]; //RECUPERAMOS EL NÚMERO
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle();
		});
	});
});

Como ven, hasta ahí ya funciona el acordio, ahora pongámosle el easing y tiempo, el tiempo es en milisegundos, osea cada 1000 es 1 segundo.

var tiempoAbrir = 1000;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle({duration: tiempoAbrir, easing: "easeOutElastic"});
		});
	});
});

Si prueban hasta este punto, van a ver que cuando se abre uno no se cierra el otro. Para que no estén dos abiertos lo que se debe hacer es que cuando se abra uno se guarda en una variable el que está abierto, entonces si se le da clic a otro se cierra primero éste y luego se abre el otro.

var abierto;
var tiempoAbrir = 1000;
var tiempoCerrar = 500;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			if(abierto == info){
				$(info).slideUp({duration: tiempoCerrar, easing: "easeInElastic"});
			}else{
				if(typeof abierto == "undefined"){
					$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
					abierto = info;
				}else{
					$(abierto).slideUp({duration: tiempoCerrar, easing: "easeInElastic", complete: function(){
						$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
						abierto = info;
					}});
				}
			}
		});
	});
});

El plugin jquery.easing.js tiene diferentes tipos de movimientos, los pueden ver en bajando el ejemplo

Mira el ejemplo
Descarga el ejemplo

No olvides dejar tus comentarios

]]> http://www.giancarlospot.com/javascript/acordion-con-jquery-y-con-el-plugin-jquery-easing.html/feed 0 Armado web con capas (div) y CSS sin tablas http://www.giancarlospot.com/css/armado-web-con-capas-div-y-css-sin-tablas.html http://www.giancarlospot.com/css/armado-web-con-capas-div-y-css-sin-tablas.html#comments Mon, 23 Feb 2009 20:14:51 +0000 giancarlo http://www.giancarlospot.com/?p=85 Antes, armaba todas las páginas con tablas pero ahora la tendencia a armar la web es con divs, además es mejor porque no existe la necesitad de crear tantas tablas y crear tanto código y ayuda al posicionamiento en los buscadores ya que no hay tanto código y las cosas son más claras de entender. No es tan difícil como parece, al contrario. Veamos algunos ejemplos


Vamos a armar la cabecera de una página:

1
2
3
4
5
6
7
8

<div class="header">
<div class="logo"><img src="logo.png" alt="Mi logo" width="256" height="256" /></div>
<div class="links">
<div class="inicio">Inicio</div>
<div class="mapa">Mapa del Sitio</div>
<div class="contacto">Contáctame</div>
</div>
</div>

Esto quedaría así:

Ejemplo 1

Ok, pero cómo haría para que las cosas se muestren mejor? Probemos escribiendo código CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div.header{
	width: 780px;
	height: 256px;
	border: dotted 1px #999999;
	position: relative;
}
div.header div.logo{
	float: left;
	width: 256px;
	height: 256px;
}
div.header div.links{
	float: right;
	position: relative;
	padding-top: 10px;
}
div.header div.links div{
	margin-right: 17px;
	background-repeat: no-repeat;
	background-position: 0 2px;
	padding-left: 21px;
}
div.header div.links div.inicio{
	float: left;
	background-image: url(inicio.png);
}
div.header div.links div.mapa{
	float: left;
	background-image: url(sitemap.png);
}
div.header div.links div.contacto{
	float: left;
	background-image: url(email.png);
}

Como ven todo el diseño cambió, pero no modificamos nada del XHTML
Ejemplo 2

Lo bueno de trabajar así es que tienes el XHTML y según tus estilos todo cambia, así puedes crear diferentes CSS y poder cambiar el diseño de tu página web fácilmente.

Habrán visto que se utilizó
“div.header div.logo”
Esto quiere decir que la propiedad que se le está poniendo es a un div que tenga como “class” “logo” y que este div esté dentro de otro que tenga el “class” “header”, a esto se le puede llamar herencia de estilos.

Descargar ejemplo | Un buen tutorial de CSS | Miren Mancormedia

]]> http://www.giancarlospot.com/css/armado-web-con-capas-div-y-css-sin-tablas.html/feed 4