Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Dudas con las capas DIV

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 mar, 17
    Mensajes
    6
    Poder de Reputación
    0

    Dudas con las capas DIV

    Saludos amigos, coloco este post porque tengo mis dudas en cuanto a una de las practicas que se realiza en el apartado de “Ejemplos DIV” “Tres en Uno”.
    Bueno, me puse hacer mis prácticas para entender un poco más sobre las capas y logre realizar esta plantilla, mis dudas es si es correcto como la realice y que propiedades se le podrían quitar para mejor la hoja de estilo y obtener el mismo resultado:

    Código HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Pagina de los DIV</title>
    <link rel="stylesheet" href="estilo-prueba.css" type="text/css" media="all">
    </head>
    <body>
    
    <div id="global">
    <div id="bartolo"><p>Diseñando Mi primer DIV llamado Bartolo</p></div>
    <div id="catalina"><p>Diseñando Mi segundo DIV llamado Catalina</p></div>
    <div id="perico"><p>Diseñando Mi tercer DIV llamado perico</p></div>
    <div id="contenido">
    <div id="pedro"><p> Diseñando Mi Cuarto DIV llamado Pedro, aqui iria el 1er contenido</p>
    <p>Aprovechando que nuestro amigo Hq nos pregunta en el Foro CCTW, vamos a publicar el ejemplo que nos pide.
    Hq quiere, basándose en el ejemplo que llevamos hasta ahora, poner dentro de un DIV general (global) uno a la izquierda donde colocar el menú (será bartolo) y otros dos a su derecha, uno encima del otro en los que colcoar el título (en catalina) y en el otro de abajo (perico) los textos. Esto es lo que quiere conseguir y a continuación os indico como hacerlo.
    Para ello basta con copiar todo el HTML del DIV catalina y pegarlo justo a continuación. Luego le cambiamos el nombre del DIV por "perico" y personalizamos un poco su texto para distinguirlo, poniendo "Este es mi tercer DIV llamado perico".</p>
    </div>
    <div id="marco">Diseñando Mi quinto DIV llamado Marco, aqui iria el 2do contenido</div>
    
    </div>
    
    </div>
    </body>
    </html>
    la Hoja de estilo seria la siguiente:

    Código:
    body               {background-color:gray; text-align:center; }
    #global            {background-color:red; border:#000 1px solid; margin:4px auto; padding:2px 2px 800px 2px; width:800px; }
    #bartolo           {background-color:yellow; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left; padding:0px 0px 650px 0px; }
    #catalina          {background-color:blue; border:#000 1px solid; margin:0px 0px 0px 0px; width:712px; float:right; }
    #perico            {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:712px; float:right; }
    #contenido         {background-color:silver; border:#000 0px solid; margin:2px 0px 0px 4px; width:712px; float:right; padding:0px 0px 10px 0px; text-align:justify; }
    #pedro            {background-color:blue; border:#000 1px solid; margin:2px 6px 0px 0px; width:340px; float:left; padding:10px 10px 10px 10px; text-align:justify; }
    #marco            {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:340px; float:right; padding:0px 0px 600px 0px; }
    p                  {padding:5px 5px 5px 5px}

  2. #2
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 mar, 17
    Mensajes
    6
    Poder de Reputación
    0
    También la realice de esta forma:

    Código HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Pagina de los DIV</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
    </head>
    <body>
    
    <div id="global">
    <div id="bartolo"><p>Diseñando Mi primer DIV llamado Bartolo</p></div>
    <div id="catalina"><p>Diseñando Mi segundo DIV llamado Catalina</p></div>
    <div id="perico"><p>Diseñando Mi tercer DIV llamado perico</p></div>
    <div id="pedro"><p> Diseñando Mi Cuarto DIV llamado Pedro, aqui iria el 1er contenido</p>
    <p>Aprovechando que nuestro amigo Hq nos pregunta en el Foro CCTW, vamos a publicar el ejemplo que nos pide.
    Hq quiere, basándose en el ejemplo que llevamos hasta ahora, poner dentro de un DIV general (global) uno a la izquierda donde colocar el menú (será bartolo) y otros dos a su derecha, uno encima del otro en los que colcoar el título (en catalina) y en el otro de abajo (perico) los textos. Esto es lo que quiere conseguir y a continuación os indico como hacerlo.
    Para ello basta con copiar todo el HTML del DIV catalina y pegarlo justo a continuación. Luego le cambiamos el nombre del DIV por "perico" y personalizamos un poco su texto para distinguirlo, poniendo "Este es mi tercer DIV llamado perico".</p>
    </div>
    <div id="marco">Diseñando Mi quinto DIV llamado Marco, aqui iria el 2do contenido</div>
    
    </div>
    </body>
    </html>
    Esta seria la hoja de estilo

    Código:
    body               {background-color:gray; text-align:center; }
    #global            {background-color:red; border:#000 1px solid; margin:4px auto; padding:2px 2px 800px 2px; width:800px; }
    #bartolo           {background-color:yellow; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left; padding:0px 0px 650px 0px; }
    #catalina          {background-color:blue; border:#000 1px solid; margin:0px 0px 0px 0px; width:712px; float:right; }
    #perico            {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:712px; float:right; }
    #pedro            {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 4px; width:350px; float:left; padding:0px 5px auto 5px; text-align:justify; }
    #marco            {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:350px; float:right; padding:0px 0px 620px 0px; }
    p                  {padding:5px 5px 5px 5px}

    Mis dudas:
    ¿Cuál de las 2 opciones seria la correcta?
    ¿O si las 2 son válidas?

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,046
    Poder de Reputación
    28
    Hola!

    Ambas formas son válidas. Htm y css son el diseño de tu página, así que lo importante es que se vea como quieres. Lee sobre los tipos de elementos.

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 mar, 17
    Mensajes
    6
    Poder de Reputación
    0
    skaparate! Gracias nuevamente por tu pronta respuesta y colaboración.

    Mi duda era si colocando las capas DIV “pedro y marco” dentro de la capa “contenido” podía tener mejores resultados que colocándolas solas como lo hice en el segundo ejercicio, esto si decidiera que la capa contenido fuera del mismo color de la capa “global”

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,046
    Poder de Reputación
    28
    No tiene relevancia, pues todo es alcanzable a través de CSS, por eso se llaman "Hojas de Estilo en Cascada". En muy pocos casos el orden de los elementos importa en cuanto a la estética, pues todo se puede manipular a través de CSS o Javascript. Sólo importa para el contenido de los elementos (texto, imágenes, videos, etc.) .

Temas Similares

  1. problemas al insertar capas sobre otras capas
    Por rub17 en el foro Foro General
    Respuestas: 2
    Último Mensaje: 19/04/2009, 11:20
  2. Problemas con capas dentro de capas
    Por Jose_no_más en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 25/12/2008, 19:28

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •