Blog de José R. Guay

Temas de Microsoft .NET Framework

Como centrar un elemento DIV utilizando CSS

Hola a todos.

El día de ayer me topé en mi trabajo con un requerimiento que estuvo a punto de sacarme “canas verdes” como decimos acá en Guatemala.

El requerimiento consistía en centrar en la pantalla un pequeño cuadro que desplegaba un mensaje de espera cuando se ejecutaba un “Partial Render” de un UpdatePanel de Atlas (o AJAX). El código (por motivos de privacidad no mostraré todo) lucía mas o menos así:

<atlas:UpdateProgress ID=”uProgress3″ runat=”server”>
<ProgressTemplate>
     <div id=”spinner” runat=”server”>
          <img src=”./images/spinner.gif” align=”absmiddle” alt=”"/>  
          <asp:Label ID=”lblProgress” runat=”server”>
               <span id=”progress” style=”color:#94361D”>Processing…</span>
          </asp:Label>
     </div>
</ProgressTemplate>
</atlas:UpdateProgress>

Entonces debía centrar la imagen y el mensaje que aparecía en una cajita en la página, no solamente que apareciera en cualquier lado. En fin… La primera solución que pensé fue utilizar javascript para realizar el trabajo, pero me encontré con dos problemas principales. El primero, debido a que este div se encontraba dentro de la definición del control UpdateProgress no es accesible hacia afuera y debía hacer mucho código para poder encontrarlo. El segundo problema es que la página hace referencia a un “master page” y por lo tanto los algoritmos que hay para eso hacen necesario llamar funciones de javascript al cargar la página pero en este caso no hay un lugar donde poner el evento OnLoad como se hace en el tag de BODY.

¿Cuál fue la solución? Pues recurrir a los confiables y estándares Cascading Style Sheets (CSS), para lo cual hice un estilo con las siguientes características:

.centerbox
{
   position:fixed;
   top:50%;
   left:50%;
   margin-top:-40px;
   margin-left:-125px;
   height:80px;
   width:250px;
   text-align:center;
   padding-top:10px;
   border:1px solid lightsteelblue;
   background-color: #ffffff; 
   font-family:Verdana;
}

Bien, veamos cada uno de los componentes del estilo y analicemos que está pasando. En primer lugar tenemos que la posición definida será de tipo fija (position:fixed), es decir, no lo haremos relativo a ningún punto sino que siempre estará en el mismo lugar (o mas o menos…). Luego he indicado que la distancia a la que se debe ubicar el objeto es al 50% desde el origen superior y el 50% del origen izquierdo (top:50%; left:50%;). El efecto de esto es que sin importar el tamaño de la ventana del navegador siempre tomaremos el centro de ese tamaño como punto de referencia. Ahora, viene lo interesante, El DIV tendrá un tamaño de 250px de largo por 80px de altura ( height:80px; width:250px;) y por tanto es necesario ubicar los márgenes superior e izquierdo en la mitad de esas cantidades para poder estar seguros de que se ha centrado correctamente y de forma realtiva al tamaño de la ventana del navegador. Para esto utilizamos la mitad de las medidas que serían 40px de altura y 125px de largo; pero es necesario que vayan especificados con signo negativo para que se tome del 50% original hacia atrás (si es el margen izquierdo) y hacia arriba (si es el margen superior).

Para ilustrar este efecto hice un extracto de la página ASP.NET en una página de html sencilla que se puede ver aquí: div.jpg

El código es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ejemplo de DIV centrado</title>
</head>
 
<style>
.centerbox
{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-125px;
    border:1px solid lightsteelblue;
    background-color: Navy;
    color: White;
    height:80px;
    width:250px;
    text-align:center;
    padding-top:20px;
    font-family:Verdana;
} </style>
  <body>
     <div id="spinner" class="centerbox">
               <span id="progress">Processing...</span>
     </div>
</body>
</html>
 

Pueden cambiar el tamaño a la ventana del navegador y verán que el div sigue centrado.

Espero que haya sido informativo y les sirva.

Saludos.

Febrero 13, 2008 Publicado por joseguay | ASP.NET, Programación .NET, Visual Studio 2008 | | 6 comentarios

Channel 9

¿Conoces Channel 9?

Es un portal creado y soportado por Microsoft para desarrolladores donde puedes encontrar muchos recursos sobre las tecnologías que se están desarrollando actualmente, así como las tendencias y las cosas que están por venir.

Desafortunadamente no está en español pero puedes eso no debe impedir que le eches un vistazo de cuando en cuando y veas las posibilidades y todo lo que allí se puede aprender.

Disfrútalo.

Enero 28, 2008 Publicado por joseguay | Temas | , , , , , , | Aún no hay comentarios

Características de Visual Studio 2008 y .NET Framework 3.5

Para obtener la última versión de Visual Studio acá están los enlaces: 

  • Si es un suscriptor de MSDN o pertenece a una universidad con una suscripción de MSDN Academic Alliance puede obtener Visual Studio 2008 por medio del sitio de descargas. 
  • Si no es suscriptor de MSDN puede obtener una versión de evaluación de 90 días de Visual Studio Team Suite aquí. 
  • Si quiere utilizar las versiones gratuitas de Visual Studio 2008 Express Edition (que por  cierto son completamente gratis y mucho más pequeñas) puede descargarlas desde aquí. 
  • Si solo quiere utilizar el .NET Framework 3.5 puede descargarlo desde aquí.

    • Algunas de las nuevas características son:

    Soporte Multi-Destino
    VS2008 soporta configurar el destino de versión de .NET Framework que desee utilizar, por ejemplo puede crear, abrir y modificar aplicaciones del .NET Framework 2.0 en VS2008 sin problema alguno, así como aplicaciones de versiones 3.0 y 3.5.

    ASP.NET AJAX y soporte para JavaScript
    VS2008 incluye en su instalación ASP.NET AJAX (no se requiere una instalación adicional).

    Diseñador Web y Soporte CSS
    VS2008 y Visual Web Developer 2008 Express incluyen un mejorado diseñador de HTML (el mismo de Expression Blend) y puede manejar vistas divididas, código, visual, CSS anidados, etc.

    Mejoras en los Lenguajes y LINQ
    Los compiladores de Visual Basic y C# se optimizaron mucho y proveen grandes facilidades y mejoras al desarrollador.

    ——————————————————————————-
    El contenido de este artículo fue tomado del blog de Scott Gutrhie (http://weblogs.asp.net/scottgu/archive/2007/11/19/visual-studio-2008-and-net-3-5-released.aspx)

    Noviembre 20, 2007 Publicado por joseguay | ASP.NET, Programación .NET | , , , , , , | Aún no hay comentarios

    Microsoft Popfly

    Microsoft recien anunció la disponibilidad del nuevo Popfly.

    http://www.popfly.ms

    Popfly es una manera divertida y fácil de construir y compartir páginas web, gadgets y mashups.  Está hecho de herramientas visuales disponibles en línea con las que se puede construir páginas web y mashups en un ambiente social donde se puede hospedar, compartir, calificar, comentar e incluso combinar creaciones de otros usuarios de Popfly.

    Estas son algunas características de Popfly:

    • Availability: Public Beta
    • Cost: Free
    • Storage Limit: 25MB per user
    • System Requirements: Microsoft Silverlight 1.0
    • Browser Support: Mozilla Firefox 2.0, Internet Explorer 6.0 or higher
    • Content Supported: JavaScript, Ajax libraries, HTML, XHTML, CSS, WMV, WMA, MP3, Visual Studio Express projects, JPG, PNG, GIF, and EXEs
    • Release Notes: Available from the Popfly team blog.

    Espero que sea algo para que lo utilicen y empiecen a encontrarle el gusto a Silverlight que es con lo que estará todo construido.

    Noviembre 15, 2007 Publicado por joseguay | Temas | , , , , , , , , , , | Aún no hay comentarios