Cómo insertar un Div en un Div

Escrito por rachelle reese | Traducido por beatriz sánchez
Cómo insertar un Div en un Div

Usar estilos CSS te permite crear estructuras alternativas para dispositivos móviles.

Jupiterimages/Comstock/Getty Images

Un elemento

es un elemento HTML (elemento de marcado de hipertexto) que tiene contenido. Los desarrolladores web suelen usar elementos
, junto con valores CSS (hoja de estilo en cascada) para definir cómo se estructura y se muestra el contenido en la página web. Puedes anidar elementos
uno dentro de otro para crear formatos complicados sin usar tablas. En este tutorial, puedes crear un elemento
externo y tres elementos
internos, junto con tres estilos CSS distintos.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Una computadora con Windows 7
  • El Bloc de Notas u otro editor de texto
  • Internet Explorer u otro navegador

Lista completaMinimizar

Instrucciones

    Crear una página web

  1. 1

    Haz clic en el botón "Inicio", ve al elemento de menú "Todos los programas" y pulsa "Accesorios" y "Bloc de Notas".

  2. 2

    Escribe el siguiente código de marcado en la ventana de documento: <html> <head> <title>Demostración de Div anidado</title> </head> <body> </body> </html> El <html> es el elemento más externo y permite al navegador saber que debería traducir los contenidos como HTML. El elemento <head> tiene los elementos que definen la información general de la página. En este ejemplo, el elemento <title> define el texto mostrado en la barra de título cuando la página se muestra. El elemento <body> tiene el contenido que aparece en la página.

  3. 3

    Pulsa en el menú "Archivo" y pulsa"Guardar" para mostrar el cuadro de diálogo "Guardar como".

  4. 4

    Elige "Todos los archivos" en la lista del menú desplegable "Guardar como tipo". Esto es necesario para evitar que la extensión ".txt" se añada al final del nombre del archivo.

  5. 5

    Escribe "DivsExample.html" en el campo "Nombre de archivo".

  6. 6

    Navega al lugar donde quieres guardar el archivo. Asegúrate de que lo recuerdas para usarlo en los siguientes pasos.

  7. 7

    Pulsa el botón "Guardar" para guardar el archivo.

    Prueba tu página

  1. 1

    Pulsa en el botón "Inicio" y ve al elemento "Computadora".

  2. 2

    Navega al lugar donde guardaste "DivsExample.html".

  3. 3

    Haz doble clic en "DivsExample.html" y verifica que el título se muestra bien en la barra de títulos del navegador. Si no lo hace, comprueba el código de marcado escrito para asegurarte de que no has escrito algo mal.

    Crear el Div externo

  1. 1

    Escribe el siguiente código de marcado entre las etiquetas <head> y </head>: <style type="text/css"> .outerDiv { border:solid 2px tan; width:300px; height:150px; position:relative; font-family:verdana; font-weight:bold; font-size:11px; } </style> El elemento <style> se usa para definir estilos CSS incrustados. Debes preceder el nombre del estilo por un "." para indicar que el estilo se ha seleccionado según el valor del atributo "class" del elemento. Por tanto, sólo has creado un estilo CSS incrustado que se aplicará a todos los elementos con un atributo de clase con valor "outerDiv". Definirás las propiedades del estilo dentro de los corchetes. Las propiedades se definen como "nombre:pares valor".

  2. 2

    Escribe el siguiente código de marcado entre las etiquetas <body> y </body>: <div class="outerDiv"> Caja externa </div> Asignando el valor "outerDiv" al atributo "class" del elemento <div>, indicas que el estilo que definiste en el paso 1 debería aplicarse al div. El contenido del elemento <div> es "Caja externa". Este es el texto que se mostrará dentro de la caja.

  3. 3

    Haz clic en el menú "Archivo" y pulsa en "Guardar".

  4. 4

    Coloca la ventana de navegador "Demostración de Div anidado" en la parte frontal. Haz clic con el botón derecho en la ventana y pulsa en "Refrescar". Aparecerá una caja con un borde de color canela. Debería tener el texto "Caja externa". Si no se muestra correctamente, comprueba el código de marcado y corrige los errores.

    Crear un Div interno

  1. 1

    Añade el siguiente código de marcado CSS dentro del elemento <style> bajo el corchete de cierre ( } ) del estilo outerDiv: .vBarDiv { background-color:#000000; width:300px; height:100px; position:relative; } Este estilo se aplicará a cualquier elemento que tenga el atributo "class" con valor "vBarDiv". El estilo define una barra negra al 100% con 100 píxeles de alto y 300 de largo que se colocará en una posición relativa respecto de los otros elementos.

  2. 2

    Escribe el siguiente código de marcado bajo el texto "Caja externa": <div class="vBarDiv"> </div>

  3. 3

    Pulsa en el menú "Archivo" y haz clic en el elemento "Guardar".

  4. 4

    Coloca la ventana de navegador "Demostración de Div anidado" en la parte frontal. Haz clic con el botón derecho en la ventana y pulsa en "Refrescar". Debería aparecer una caja negra dibujada dentro de la caja con borde marrón, debajo del texto. Si no se ve, comprueba que no has cometido un error al escribir el código.

    Crear otros Div internos

  1. 1

    Escribe el siguiente código de marcado CSS bajo el corchete de cierre de la definición de estilo varBarDiv: .wordDiv { background-color:#FF0000; width:100px; position:relative; text-align:center; } Esta definición de estilo crea una caja roja que tiene 100 píxeles de ancho. Los contenidos de la caja quedarán centrados.

  2. 2

    Añade el siguiente código de marcado después del texto "Caja externa": <div class="wordDiv"> Interno </div>

  3. 3

    Añade el siguiente código de marcado bajo el elemento <div> que dibuja la barra negra: <div class="wordDiv"> Caja </div>

  4. 4

    Pulsa en el menú "Archivo" y haz clic en "Guardar".

  5. 5

    Coloca la ventana de navegador "Demostración de Div anidado" en la parte frontal. Haz clic con el botón derecho en la ventana y pulsa en "Refrescar". Debería aparecer una caja roja con la palabra "Interno" sobre la barra negra. Debería aparecer una caja roja con la palabra "Caja" debajo de la barra negra. Las cajas rojas deberían estar alineadas al borde izquierdo de la caja externa. Si no se muestran correctamente, comprueba si hay errores en el código de marcado.

Consejos y advertencias

  • Aunque este tutorial usa el Bloc de Notas e Internet Explorer, se puede usar el mismo código de marcado, independientemente de las herramientas usadas. Si estás probando en un navegador distinto de Internet Explorer, los pasos para refrescar la página pueden ser distintos. Por ejemplo, Firefox tiene un elemento de menú "Volver a cargar" en lugar de uno llamado "Refrescar". La diferencia entre un selector de estilo de clase y un selector de estilo id es que un selector de clase se puede aplicar a varios elementos en una página, mientras que un selector id sólo se puede aplicar a uno.
  • Asegúrate de que cada etiqueta de apertura tiene una de cierre.
  • Algunos navegadores tratan los nombres de clase como sensibles a mayúsculas.

No dejes de leer...

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