background preloader

Diseño Web

Facebook Twitter

Build Internet. CSS Font. Capítulo 13. Otros. Problema al centrar imagenes con jquery/javascript. Veréis tengo un problema al intentar centrar imágenes verticalmente mediante jquery. Os copio el código tal y como lo tengo ahora: index.php: Código PHP: my_jquery_scripts.js: $(document).ready(function() { /* Centrar altura de cada imagen respecto a div padre */ // Altura de div "padre" var altura_div_padre = $(".img_div").css("height"); var altura_div_padre = altura_div_padre.slice(0, -2); $(".img_thumb").each(function() { // Altura de la imagen var altura_img = $(this).attr("height"); // Restamos altura del div "padre" y dividimos entre 2 redondeando a entero var resto_altura = Math.round((altura_div_padre - altura_img) / 2); // Centramos la imagen con el resultado $(this).css("position" , "relative").css("top" , resto_altura); }); El script funciona perfecto SOLO SI NO es la primera vez que visitas la página (o pulsas Ctrl+F5), es decir, si entras por primera vez no funciona, a partir de ahí ya puedes recargas tantas veces como quieras que funciona sin problemas.

Imágenes en HTML. Vemos cómo colocar una imagen en una página web y algunos atributos básicos para asignarle estilos a las imágenes en HTML. Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestra información y darle un aire mucho más estético. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien tendrá más dificultad en encontrar la información necesaria. El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un poco impaciente.

En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente diremos que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. La etiqueta que utilizaremos para insertar una imagen es <img> (image). Tag HTML dt. Bypass main content Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML. Descripción El elemento HTML dt contiene un término en una lista de definiciones (elemento HTML dl). Éstos términos pueden ser visualmente asociados a una descripción (elemento HTML dd) o no.

En las listas de definiciones un sólo término puede tener una descripción, más de una o ninguga. Ejemplos A continuación, una lista de definiciones es representada con diferentes asociaciones entre términos y descripciones. Código Lenguaje de marcado hipertextual basado en SGML y no compatible con XML. Lenguaje de marcado hipertextual extensible basado en XML, un subconjunto de SGML. Lenguaje creado para reducir la orientación presentacional de sus predecesores.

XML, un subconjunto de SGML. Vista Lenguaje de marcado hipertextual basado en SGML y no compatible con XML. Charles Hola Estás ahí? Susan Hola!! Dir. Minitutorial: Diseño líquido con Dreamweaver CS6 « Uklaworld.

CV