Archivo de la categoría: "CSS"

Cursos gratuitos en Tecnologías de la Información y Comunicación

Sunday, November 21st, 2010

-Rosario, Argentina-

En el mes de febrero comienzan los nuevos grupos. La capacitación está destinado a jóvenes de 18 a 24 años con secundario completo.

Se realizan en el Centro Municipal Distrito Sur (Uriburu y Buenos Aires).

Cursos gratuitos Rosario

Son organizados conjuntamente por la Fundación Ciudad de Rosario, el Polo Tecnológico Rosario, la Municipalidad de Rosario y la Secretaría de Ciencia y Técnica de la Provincia Santa Fe y serán dictados por la UNR y la UTN, con entrega de certificados oficiales.
Los cupos son limitados.

Los Cursos que integran el Programa son:

  • Instalación y configuración centrales telefónicas sobre VoIP.
  • Programación en lenguaje JAVA.
  • Programación en lenguaje PHP.
  • Administración de redes con Linux.
  • Webmaster.
  • Instalación y configuración Cámaras de video sobre IP.

Inscripción e informes:interlab@rosario.gov.ar, teléfono 0341-4802566 interno 192 de 8 a 13hs.

Visto en el Polo Tecnológico de Rosario

Centrar un sitio horizontalmente usando CSS

Tuesday, January 5th, 2010

¿QUE ES UN WRAPPER?

Para lograr centrar un sitio horizontalmente lo primero que hay que hacer es un DIV que englobe a todo el sitio y que generalmente se lo llama “wrapper” (contenedor en inglés) aunque el nombre cada uno lo pone como quiere, es preferible seguir siempre un cierto orden para que sea más fácil de interpretar cuando se lee el código, es decir, cuando uno lee “wrapper” ya se está dando la idea de lo que es. Básicamente el Div llamado wrapper contiene a toda la web (de ahí su nombre) y la gran ventaja es que al modificar sus propiedades estás modificando en definitiva las propiedades de todo el sitio.

.. sitio ...

a continuación vamos a ver un ejemplo práctico de como funciona.

EL HTML

El codigo HTML es muy simple:








Contenido, que a su vez puede contener otros DIVS

En las primeras líneas se declara el documento con el tag DOCTYPE, que lo que hace es “decirle” al navegador que versión de (x)HTML se usa en el sitio de manera que éste sepa que sintaxis y gramática se usa; y en la línea 5 se agrega la hoja de estilos.
Como se vé, el div wrapper casi siempre comienza luego de body y termina antes de /body de modo que contenga a toda la página.

EL CSS

#wrapper{
  margin: 0 auto 0 auto;
  width: 200px;
}

Con estas pocas líneas estamos centrando al wrapper horizontalmente. Siendo el primer 0 el margin-top y el segundo 0 el margin-bottom. Si quisiéramos que nuestro div se encuentre centrado horizontalmente pero 10 píxeles más abajo tendríamos que poner margin: 10px auto 0 auto;
Pero como Internet Explorer es una basura a lo que CSS se trate, este código no resulta correcto (hagan la prueba) y el div continúa sin centrarse. Por el contrario, en navegadores que respetan un poco más los estándares, como Mozilla Firefox, Opera, Chrome, esté código CSS basta.
Lo mejor en este caso es hacer un pequeño “arreglo” para que Internet Explorer pueda entender lo que queremos hacer. El archivo estilos.css quedaría de esta manera:

  #wrapper
  {
    margin: 0 auto 0 auto;
    width: 200px;
    text-align: left;
    background: #eee; //Agrego un fondo gris para visualizar mejor como quedó centrado el div
  }
body
{
  text-align: center;
}

En Internet Explorer 7 y superiores solamente con colocar el text-align:left; en el wrapper basta, pero para asegurarse es mejor poner el text-align: center; en el body porque funciona aún en sus versiones anteriores. Si colocamos en el body el texto centrado, si o si vamos a tener agregar al wrapper un text-align:left porque de lo contrario, todo lo que está en wrapper iría centrado (ya que es “hijo” de body).
Noten que el código se hizo doblemente más grande ( de 4 líneas a 8 ) solamente porque Internet Explorer no funciona como debería ;)

resultado final

resultado final

Descargar ejemplo