Computación y electrónica

Cómo colocar un DIV en un wrapper con CSS

Escrito por foye robinson | Traducido por elizabeth garay ruiz
Cómo colocar un DIV en un wrapper con CSS

Las hojas de estilo en cascada (CSS, por su nombre en inglés), DIV y wrappers van de la mano.

Hemera Technologies/Photos.com/Getty Images

Las hojas de estilo en cascada (CSS, por su nombre en inglés), DIV y wrappers van de la mano. CSS ayuda a manipular la manera como se muestra el contenido en tu página de la red, ya sea que estés trabajando con un wrapper (el contenedor que envuelve el contenido de una página entera de la red) o un DIV (un contenedor que mantiene una sección de tu página). El wrapper por si mismo es un DIV que actúa como un envase progenitor. Puede incluir uno o múltiples DIV, cada uno con su propio estilo y elementos.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Editor de texto

Lista completaMinimizar

Instrucciones

  1. 1

    Deslízate hacia la etiqueta de HEAD (Encabezado) del archivo HTML que deseas modificar.

  2. 2

    Crea un código CSS para el wrapper y el DIV que quieres insertar en tu página de la red, donde "#wrapper" aplica al wrapper/contenedor del DIV y al "#header" que estás insertando (como un encabezado) como sigue: <style type="text/css"> <!-- body { font-family:Verdana, Arial, Helvetica, sans-serif; } #wrapper { width: 80%; border: 1px solid black; } #header { padding: 15px; text-align: center; } --> </style>

  3. 3

    Personaliza el estilo en el código de arriba a tu gusto. Para crear un estilo para DIV adicionales, copia el formato para "#header" y cámbiale el nombre.

  4. 4

    Coloca tu cursor justo debajo de la etiqueta BODY abierta. Utiliza un "id" para referenciar el wrapper y el DIV que estás insertando, como sigue: <body> <div id="wrapper"> <div id="header">Contents of Header Go Here</div> </div> </body>

Más galerías de fotos

comentarios

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

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media