Archivo de la categoría: HTML

Código html que voy necesitando con el día a día

Alinear Horizontal y Verticalmente

Posted on por
Responder

Para ello introduciremos el objeto a centrar en otro con  propiedades display:table, el objeto a centrar tendrá el Display:table-cell.

Sigue el ejemplo

.ExternContainer{
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 position: absolute;
 display: table;
 }
 .InternContainer{
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 }

Recurso: http://www.w3.org/Style/Examples/007/center-example

Método para centrar Listas Horizontalmente:

HTML:
<div id="menu-outer">
  <div class="table">
    <ul id="horizontal-list">
      <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
      <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
      <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
      <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
    </ul>
  </div>
</div>

CSS:

#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-list li {
        display: inline;
    }

Recurso: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

Problema de render al insertar mapa de google.

Posted on por
Responder

Aparece un error al introducir un mapa de google en páginas responsive.

Al parecer google no gestiona bien el with de las imagenes a cargar.

En este enlace se detalla el problema y aporta una solución al mismo.

http://todojoomla.wordpress.com/2013/02/14/problema-con-imagenes-de-google-maps-en-responsive-web-design/

El texto en bruto se inserta para conservarlo en local:

Problema con imagenes de Google Maps en Responsive Web Design

Publicado en febrero 14, 2013 de

Aunque no es un problema que se produzca únicamente en Joomla, sino en cualquier página Responsive Web Design que incluya un mapa de Google Maps, me parece interesante comentarlo por si nos sucede en la implementación de alguna de nuestras plantillas.

El problema que me he encontrado es que Google Maps no renderiza correctamente las imagenes dentro del mapa de nuestro sitio web. No se ve el muñeco de Google Street view, ni la imagen para cerrar los “info windows”, ni otra serie de imagenes asociadas al mapa.

Intentando buscar una solución al problema, me encuentro que google utiliza un sprite css para cargar las imagenes dentro del mapa. Es decir, todas las imagenes se encuentran en un mismo archivo, y google se encarga de posicionarlas en sus sitios respectivos.

Responsive Web Design es una tecnología que recién está empezando y uno de sus puntos débiles es el tema de la imágenes. Una de las técnicas que se suelen utilizar y yo estaba implementando en la maquetación de mi plantilla, es darles a las imagenes una anchura máxima del 100%. Así logramos que se ajusten a la anchura de la pantalla de manera automática, aunque no resolvemos el problema del peso.

img{max-witdh:100%;}

Pues bien, este parece ser el origen del problema de las imagenes dentro de Google Maps. De alguna manera Google se lia al renderizar las imagenes en el mapa si hemos utilizado esta regla css. Así lo único que tenemos que hacer para solucionar el problema, es sobreescribir esa regla para las images de nuestro mapa.

<style>
   #map img{max-width:none !important}
</style>
<div id="map"></div>

Si cargamos nuestro mapa de Google en un div llamado “map”, podemos indicarle al navegador que no aplique la regla css “max-width” a nuestro mapa de Google con el código arriba expuesto.

Espero que este post te resueva el problema de las imagenes con Google Maps y responsive web design.

Scroll Animado con jQuery ( Hugh Lashbrooke )

Posted on por
Responder

Forma sencilla de hacer scroll para dejar la página en un sitio determinado, elegagnte.


function scrollToElement( target ) {
var topoffset = 30;
var speed = 800;
var destination = jQuery( target ).offset().top - topoffset;
jQuery( 'html:not(:animated),body:not(:animated)' ).animate( { scrollTop: destination}, speed, function() {
window.location.hash = target;
});
return false;
}

Origen: http://www.hughlashbrooke.com/simple-animated-scroll-for-jquery/