Cómo utilizar un div contenedor

Escrito por ehow contributor | Traducido por georgina velázquez
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Cómo utilizar un div contenedor. Un contenedor o div contenedor en una página web se utiliza para varios fines. En este artículo voy a explicar algunas de las razones para usar un div contenedor.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Una página web
  • Una hoja de estilo para tu página web

Lista completaMinimizar

Instrucciones

  1. 1

    Una página web puede utilizar uno o más elementos div que se utilizan como contenedores o recipientes. Estos divs puede tener varios ID, incluyendo "wrapper" y "contenedor", pero no se limitan a estas identificaciones. Los divs se identifican con un ID o clase, para que las reglas de estilo se pueden aplicar a ellos en una hoja de estilos. Aquí puedes ver un ejemplo de donde DIV ID="WRAPPER encierra todo el contenido de una página web.

  2. 2

    El propósito de encerrar los contenidos de una página entera en un contenedor es para que los márgenes y los bordes y otras decisiones de presentación puedan ser aplicados a toda la página. Aquí, por ejemplo, es la regla CSS que se centraría y establece un margen de cero píxeles en la parte superior e inferior de la página para que el div ilustrado en el paso anterior:

    body div#wrapper { margin:0 auto; }

  3. 3

    Otra razón para utilizar un div contenedor es para agrupar elementos para fines de presentación. Por ejemplo, es posible que desees un contenedor alrededor de los elementos de navegación de la página, tal vez con un borde visible o algún relleno. O es posible que desees dejar flotar el elemento de navegación hacia la derecha o la izquierda. Si escribes la navegación en un div contenedor con una identificación como "NAV" o "GLOBALNAV" se crea un contenedor. Ese contenedor puede ser de estilo de acuerdo a tus necesidades.

  4. 4

    Los divs contenedores también se utilizan para crear diseños con CSS. Las columnas pueden ser creadas dentro de un div contenedor exterior usando divs interiores con identidades como "nav" y "contenido". Aquí, por ejemplo, es CSS que puede crear un diseño de dos columnas.

    • Nota: hay muchas maneras de crear un diseño de dos columnas, esto es sólo un ejemplo.

    wrapper {

    position: relative; }

    nav {

    width: 20%; position: absolute; left: 10px; top: 40px; }

    content{

    width: 70%; margin-left: 25%; }

  5. 5

    Los divs contenedores pueden agrupar los elementos HTML semánticamente. Has visto ejemplos de éstos con nombres div como "contenido" y "nav". En el código HTML que se muestra en el Paso 2, viste un div contenedor semántico para un elemento "header". Contener los elementos que se relacionan entre sí estructuralmente y semánticamente en un div es el propósito real del elemento div en HTML. Un div es nada más que un contenedor genérico que se utiliza para crear ganchos de estructura y presentación.

Consejos y advertencias

  • El uso de un ID para identificar un elemento div te da un gancho de CSS para los propósitos de estilo, pero también crea un elemento único que puede dirigirse con efectos JavaScript.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles