Archive for the ‘Tips’ Category
CSS: Centrar nuestra web en el navegador.
Escrito por Marc | Archivado en Desarrollo web, Tips
Continuando con la línea de la última entrada vamos a mostrar un código muy sencillo para conseguir que nuestra web o el contenido que queramos ya sea imagen, texto o contenido del tipo multimedia , lo podamos centrar en el navegador. Utilizando el código que seguidamente explicaremos conseguiremos un centrado horizontal y vertical sea cual sea la resolución de pantalla de los usuarios ya que si redimensionamos el navegador seguirá ajustándose al centro.
La base de este código reside en el posicionamiento absoluto y jugar con los margenes izquierdo y superior negativos. Echando mano de la calculadora tendrémos que sacar unos valores equivalentes a la mitad de las dimensiones del contenido que queremos centrar:
Por ejemplo un contenido de 500 x 450 pixels.
- La mitad del width -250px (margen negativo superior)
- La mitad del height -225px (margen negativo izquierdo)
Pasaremos a ver el código CSS y a comentarlo así quedará mucho mas claro. Tomaremos como base una capa con un width(ancho) de 500 pixels y un height(alto) 450 pixels.
CSS: Columnas con Listas (UL,LI)
Escrito por Marc | Archivado en Desarrollo web, Tips
Una de las cosas que mas me gusta usar de los CSS son las listas (UL, OL) con ellas puedes listar infinidad de contenidos de la forma que desees y lo mejor de todo tabular y espaciar dichos contenidos con una facilidad enorme con un código muy simplificado.
Pero ahora no vamos ha hablar de los listados, si no de como hacer columnas con textos utilizando listas.
Ajax: Actualiza periodicamente el contenido de un div
Escrito por Jesus | Archivado en Desarrollo web, Tips
Una de las funciones disponibles con la librería prototype es Ajax.PeriodicalUpdater() y provee de un método sencillo para realizar llamadas remotas en intervalos de tiempo definidos.
La parte del JavaScript es bien sencilla, solo necesitamos una copia de la librería prototype y la siguiente función definida en el head, aplicandole despues el comportamiento al body,
-
<script type="text/javascript">
-
function actualizacion() {
-
var target = $('muestra');
-
if (!target) return false;
-
new Ajax.PeriodicalUpdater(target, 'script.php',{frequency:'3'});
-
}
-
Event.observe(window, 'load', actualizacion, false);
-
</script>
Para que todo esto funcione, tenemos que añadir un bloque div con la id=”muestra” que sera donde aparezca la información generada desde el script php.
Nuevo PNG fix, mas sencillo que nunca.
Escrito por Marc | Archivado en Desarrollo web, Tips
Si generamos con photoshop un PNG-24 bits con transparencia, veremos que es una imagen donde podemos ver una transparencia total, sin degradados hacia otro color que producen ese efecto de aurea que hace que queden fatal si se posiciona dicha imagen encima de otra imagen o otro color de fondo que no le corresponde.
Los PNG-24 bits tienen este "don", pero como todo "don" conlleva unas consecuencias.
Las consecuencias no son mas que las de siempre en este mundo web, en Firefox funciona todo correctamente, pones el PNG-24 bits lo posiconas y se ve de maravilla. Entonces hacemos lo mismo con Internet Explorer. Colocamos el PNG lo posicionamos, miramos en el navegador que tal ha quedado y.... tachaaaan! Te encuentras un recuadro gris donde tendría que haber una transparencia.
Eliminar espacios que aparecen después de un FORM en IE
Escrito por Marc | Archivado en Desarrollo web, Tips
A todos nos ha sucedido, en algún momento.
Maquetamos una página, respetando la métrica y los espaciados, la dejamos totalmente clavada al PSD que nuestro compañero, "el diseñador" nos ha pasado, entonces le ponemos un formulario en la cabecera, donde nuestro compañero "el diseñador" ha visto oportuno colocar una barra minúscula de mas o menos unos 18 pixeles de altura donde hemos de colocar una caja de texto para que los usuarios se puedan suscribir a un newsletter. Procedemos con la intervención y.... zas! Al ver la web en Internet Explorer, te deja un espacio después del tag /FORM donde caben 2 dedos! Y piensas "como lo vea el amigo, la que me cae"....jajaja (risa fría)
Pues para solventar esto, es tan fácil como echar mano de CSS.
El código es lo siguiente:
-
form{
-
margin:0;
-
padding:0;
-
}
fácil, no? De este modo cuando nuestro amigo "El diseñador" venga a ver lo que hemos echo, lo encontrará todo en su sitio.
