Jump to content

Centrado de imagenes


Recommended Posts

Hola,

estoy montando este sitio: www.taxiayerbe.com la hoja de estilos esta aquí: www.taxiayerbe.com/estilos.css

 

Me gustaría que las imágenes saliesen centradas, así como adaptadas al tamaño de la pantalla o dispositivo que se use. También hay unos márgenes que aparecen y que impiden que el contenido se centre, dejando espacio por la derecha.

A ver si alguien puede echarme una mano,

 

 

Gracias, un saludo.

Link to post
Share on other sites

Puedes probar a dar un tamaño al div #imagenaling, un width: 100%; para centrar las div "imagenes" lo más fácil es darles tamaño en porcentaje, no fijo, siempre en función del tamaño de la pantalla. Manteniendo las dimensiones de las imágenes actuales (250x250px) las dimensiones de las divs deberían ser un 24% para pantallas de de 1000 a 1200px, un 33% entre 1000 y 780px... etc. Eso sumado al text-align=center seguramente te dará lo que buscas.

 

Lo más fácil es usar un CSS adaptable, te facilitará mucho las cosas. Aquí lo explican de forma muy fácil de entender:

http://www.lawebera.es/diseno-web-movil/hacer-diseno-web-adaptable-responsive-design.php

 

Salú! ;-)

Link to post
Share on other sites

Hola Jesús.

Me hubiera gustado responder rápidamente pero no me ha sido posible.

Aunque tu pregunta parece sencilla y simple hay muchas cosas en ella. ;-) Así que iré por partes.

 

Comentas que:

También hay unos márgenes que aparecen y que impiden que el contenido se centre, dejando espacio por la derecha.

Ya veo que conseguiste solucionarlo. Elementos con un ancho de 100% y con márgenes. Fuera margen y solucionado.

 

Para seguir te diré que en tu código hay un error importante: Tienes varios elementos con el mismo id. Los id deben ser únicos en la página. Usa las clases. En general usa clase en vez de id, salvo para elementos estructurales de la página como cabecera, pie, etc. o algo que debas identificar espicíificamente.

 

Y ahora al grano. Realizar una web flexible, fluida. adaptativa o "responsive" puede ser un dolor de cabeza cuando quieres ajustar los tamaños de los elementos, su padding, borde, etc. Pero existe una propiedad css que ayuda y es prácticamente imprescindible: box-sizing Ahí mismo te lo explican muy sencillamente en castellano.

Para usarla en toda tu página basta con insertar esto al principio de tu css:

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 box-sizing: border-box;
}

Básicamente lo que hace es incluir el borde y el padding dentro del tamaño asignado a un elemeto. Con lo que un elemento de 450px siempre tendrá ese tamaño independientemente del borde o padding que le asignes y así puedes jugar sin problemas con la estructura de la página sabiendo las medidas de lo que manejas.

 

Para escalar una imagen dependiendo del tamaño de su contenedor basta con asignarle estos valores al ancho y alto:

width: 100%;
height: auto;

 

Puedes crear una clase con estos valores y asignarsela a las imágenes que desees.

 

Y por fin para centrar un elemento sobre su contenedor le asignas este margen: margin: 0 auto; Evidentemente pudes modificar los márgenes superior e inferior.

 

Y ahora lo serio. :-D

 

Para que tu diseño se comporte apropiadamente en diferentes tamaños de ventana puedes usar media queries. Básicamente son unas condiciones css para distintos anchos de ventana. Dentro de cada una de ellas pones tus selectores css y haces que tus elementos se comporten o muestren de forma diferente en distintos dispositivos. Esto es muy resumido e incompleto y quizá inexacto pero creo que así se entiende.

Imagina algo tan simple como el tamaño de una tipografía. En un ordenador puedes poner el texto de la cabecera de 80px pero en una tableta o móvil eso es impresentable. Con una media query le dices que cuando detecte una pantalla menor de 400px el tamaño de ese elemento sea de 20px o lo que desees. Todo esto lo puedes hacer en tu hoja de estilo. Es un mundo.

 

Con todo esto, que no es poco, te puede bastar para hacer un buen trabajo. Lo importante es saber lo que quieres mostrar y como se debe comportar en cada dispositivo o tamaño de pantalla.

 

Pero hay algo más. El uso de un, no se como llamarlo, grid, rejilla, etc. adaptativa o "responsive" es de muchísima ayuda al construir páginas adaptativas. Hay cantidad de estos sistemas y cada uno es también un mundo. En principio son sistemas basados en la division de la pagina o un elemento en columnas, 12 ó 16 por lo general.

 

Bien, quizá lo mejor es que veas un ejemplo en el que he interpretado lo que tu quieres hacer y luego si te interesa pues preguntas.

Está basado en la utilización de una rejilla que encontré por ahí y conseguí entender y he adaptado un poco. La he usado para las fotos circulares pero se puede usar allí donde sea necesario.

Te he puesto 2 ejemplos iguales, pero el 2º está un poco comentado:

 

Ejemplo 1

Ejemplo 2

 

No me he complicado mucho para que se pueda entender fácilmente. Tiene dos cosas diferenciadas: La foto grande que está en un contenedor centrado y con un ancho máximo de 500px y que como ves se reduce cuando estrechas la ventana ocupando casi todo el ancho.

 

Y las fotos circulares que hacen uso de la rejilla grid-12.css y que estan en un contenedor centrado de ancho máximo 1024px y que tiene 3 clases: grid-4 m-grid-6 s-grid-12 :


  •  
  • grid-4 4 columnas de 12 o 33.3333% del ancho del contenedor. Para ventanas mayores de 801px.
  • m-grid-6 6 columnas de 12 o 50% del ancho del contenedor. Para ventanas entre 401px y 800px.
  • s-grid-12 12 columnas de 12 o 100% del ancho del contenedor. Para ventanas menores de 400px.

 

Gracias a las media queries el navegador detecta el ancho de ventana y aplica las reglas css correpondientes.

 

Te dejo las 2 páginas comprimidas en zip Descargar aqui.

 

Tengo la impresión de que me he liado excesivamente y no soy muy claro... Y antes de empeorarlo lo dejo así y espero tus preguntas si las hubiera.

 

Un saludo!

 

mon

Edited by uhf
Link to post
Share on other sites
  • 2 weeks later...

Hola Jesús!

 

En tu ejemplo debes adjuntar la hoja de estilo grid-12.css. Que es la que estructura la página y la hace adaptativa. Yo la pondría en primer lugar. Ya verás como te cambia. ;)

 

Se que no es fácil aproximarse a un enfoque nuevo de como estructurar una página mediante una rejilla adaptativa. Pero yo he encontrado a esta muy asequible y muy útil para cosas sencillas. Enseguida te acostumbras a usarla y se te hace imprescindible. Hay muchas otras opciones como Bootstrap, Foundation, Skeleton, etc. Pero para mi son mastodontes.

 

Espero que ahora lo veas mejor y pregunta lo que desees.

 

Un saludo!

 

mon

Link to post
Share on other sites

Gracias mon,

menudo despiste, me equivoque al cambiar el nombre de la hoja que debía enlazar… con los nervios de probarlo, je je ahora si, ya esta.

A ver si ajusto lo del teléfono que se desmanda y con poco mas, listo! muchísimas gracias, como decía antes, así da gusto :P

 

Un saludo.

Link to post
Share on other sites

Hola de nuevo:

 

Ahora que ya todo marcha te restan un par de cosillas. Una la mencionas tu: El tema del telefono y en general de toda la cabecera. Usa las media queries. Investiga un poco y si tienes dudas pregunta lo que sea.

 

La otra te la he creado yo o mejor dicho se genera al flotar bloques de diferente altura. En este caso bloques que contienen mayor cantidad de texto y que en determinadas circunstancias generan más líneas y por consiguiente mayor alto de su contenedor. El resultado es que los bloques que tienen un float: left se detienen sobre lo primero que encuentran. Lo mejor es verlo en una imagen

 

 

float2.jpg

 

Esto sucede en este caso al ir estrechando la ventana del navegador. Compruebalo. Pero te sucedería siempre que tengas un bloque que por la razón que sea tenga más altura que los demás.

 

Hay muchas formas de solucionarlo. La primera y más burda es dar un alto fijo a todos los bloques. Un alto suficiente para que te quepa todo su contenido. Pero en el caso de una página adaptable a múltiples resoluciones es compleja e ineficiente.

 

La segunda es también farragosa. Consiste en eliminar todos los float: left de los bloques y asignarles las propiedades display: inline-block y vertical-align: top además lleva un par de retoques más: El contenedor de estos bloques tiene que tener un font-size: 0 por lo cual debes asignar un font-size a los hijos que lo precisen.

 

La tercera es la más elegante y aunque lo parezca no es complicada. Consiste en incluir la libreria jquery y un pequeño script que ecualiza los altos de los bloques que quieras incluso al redimensionar una ventana del navegador.

Este es el código que puedes añadir al final del body:

 

<script>
/**
* equalize.js
* Author & copyright (c) 2012: Tim Svensen
* Dual MIT & GPL license
*
* Page: http://tsvensen.github.com/equalize.js
* Repo: https://github.com/tsvensen/equalize.js/
*/
(function(B) {
   b.fn.equalize = function(a) {
       var d = !1,
           g = !1,
           c, e;
       b.isPlainObject(a) ? (c = a.equalize || "height", d = a.children || !1, g = a.reset || !1) : c = a || "height";
       if (!b.isFunction(b.fn[c])) return !1;
       e = 0 < c.indexOf("eight") ? "height" : "width";
       return this.each(function() {
           var a = d ? b(this).find(d) : b(this).children(),
               f = 0;
           a.each(function() {
               var a = b(this);
               g && a.css(e, "");
               a = a[c]();
               a > f && (f = a)
           });
           a.css(e, f + "px")
       })
   }
})(jQuery);
 
 // smart resize - http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
 (function($,sr){
   // debouncing function from John Hann
   // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
   var debounce = function (func, threshold, execAsap) {
       var timeout;
       return function debounced () {
           var obj = this, args = arguments;
           function delayed () {
               if (!execAsap)
                   func.apply(obj, args);
               timeout = null; 
           };
  
           if (timeout)
               clearTimeout(timeout);
           else if (execAsap)
               func.apply(obj, args);
  
           timeout = setTimeout(delayed, threshold || 100); 
       };
   }
   // smartresize 
   jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 })(jQuery,'smartresize');

   // Modificar si es necesario solo debajo de esta línea 
 $(function() {
   // use equalize to equalize the heights of content elements
   $('.equalize').equalize({children:'.imagen-padding'});

   // re-equalize on resize
   $(window).smartresize(function(){  
     $('.equalize').equalize({reset:true, children:'.imagen-padding'});
   });

 });
</script>

 

Tan solo te restaría añadir en el html la clase equalize al bloque con id= contenido.

 

----------------------------------------------------------------

 

Como verás aquí (al final del anterior script):

Puedes modificar el nombre de la clase del contenedor principal y el nombre de la clase de los bloques que quieres igualar en altura. En tu caso he puesto una clase que ya existe: imagen-padding

 

   // use equalize to equalize the heights of content elements
   $('.equalize').equalize({children:'.imagen-padding'});

   // re-equalize on resize
   $(window).smartresize(function(){  
     $('.equalize').equalize({reset:true, children:'.imagen-padding'});
   });

 

 

 

La política es esta: Dentro del div .equalize todos los bloques .imagen-padding se igualan en altura al más alto.

 

Espero te sea de utilidad.

 

mon

Edited by uhf
Link to post
Share on other sites
  • 1 month later...

Hola de nuevo Jesús.

 

No, no te funciona aún. Y es por dos razones:

 

1ª Tienes que incluir en el head la librería jQuery.

 

2º Modifica la 1ª línea del script que te pasé:

 

(function(B) {

 

por

 

(function(b) {

 

Como ves es solo poner la B en minúscula.

 

Este error se debe al editor del foro que me cambia esa letra b a mayúscula cuando lo meto como fragmento de código. Espero que no me haya hecho otras chapuzas.

 

Lo he comprobado y con esos dos retoques ya funciona perfectamente la ecualización de bloques.

 

Tan solo te queda trabajarte la cabecera para que se adapte a pantallas pequeñas. ¡Ánimo!

 

¡Un saludo! y ya nos contarás.

 

 

mon

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.