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

Tema: Problemas con capa Div contenido

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

    Problemas con capa Div contenido

    Saludos amigos, soy nuevo en CCTW y la verdad que agradezco y felicitos a los administradores de esta excelente página WEB, he empezado a diseñar mi WEB pero como nada es perfecto ya me ha surgido la primera duda, me encuentro la sección de Ejemplos con Divs en la lección 3 “bordes”.

    He podido ya subir mi página al servidor y como verán mi problema está en que no logro juntar la capa div “contenido” de “navegación” ni del “pie” esta queda como flotando.

    Copio código html y hoja de estilo:

    Código HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Recordando como hacer una WEB</title>
    <link rel="shortcut icon" href="objetos/avion.ico">
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
     <div id="cabecera">Bienvenido a mi Web</div>
     <div id="navegacion">Barra de Navegación"</div>
     <div id="contenido">
         <div id="menu">
    	<ul><li><a href="#"target="_blank">Pestaña 1</a></li><li><a href="#"target="_blank">Pestaña 2</a></li><li><a href="#"target="_blank">Pestaña 3</a></li><li><a href="#"target="_blank">Pestaña 4</a></li></ul>
         </div>
    		 <h1>Este será el contenido principal de la WEB</h1>
    		 <p>Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamaño de la letra de toda la web, podemos variar los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p>
         <h2>Esto seria una demostración de un Subtítulo</h2>
    		 <p>Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace, ni ná de ná. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la etiqueta <span class="htmlcode">&lt;p></span> al incio y como no, la etiqueta <span class="htmlcode">&lt;/p></span> de cierre al final. Ale, dale al teclado! Ha de quedar así:</p>
     </div>
    <div id="pie">Barra del Píe de Página"</div>
    </div>
    </body>
    </html>
    Código HTML:
    *{text-indent:0px; mrgin:0px; padding:0px; border:0px;}
    body        {text-align: center;}
    #global     {width:800px; margin:4px auto;}
    #cabecera   {background-color: pink; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid;}
    #navegacion {background-color: gray; border:black 1px solid}
    #contenido  {background-color: orange; border-left:black 1px solid; border-right:black 1px solid;}
    #contenido p{padding:5px 10px 5px 10px; text-indent:15px;}
    #menu       {background-color: yellow; width:150px; float:left; text-align:left; margin:5px 10px 5px 5px;}
    #menu li    {list-style:none; margin:4px 0px 4px 6px}
    #pie        {background-color: brown; border:black 1px solid;}
    a           {color:brown; font-size:1.1em; text-decoration:none; display:block;}
    a:link      {}
    a:visited   {}
    a:hover     {color:red; text-decoration:underline; background-color:silver;}
    a:active    {}
    p           {text-align:justify;}
    h1          {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
    h2          {font-size:1.2em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}

  2. #2
    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!

    Es simple: tienes un error sintáctico.

    Código:
    *{text-indent:0px; mrgin:0px; padding:0px; border:0px;}
    body        {text-align: center;}
    #global     {width:800px; margin:4px auto;}
    #cabecera   {background-color: pink; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid;}
    #navegacion {background-color: gray; border:black 1px solid}
    #contenido  {background-color: orange; border-left:black 1px solid; border-right:black 1px solid;}
    #contenido p{padding:5px 10px 5px 10px; text-indent:15px;}
    #menu       {background-color: yellow; width:150px; float:left; text-align:left; margin:5px 10px 5px 5px;}
    #menu li    {list-style:none; margin:4px 0px 4px 6px}
    #pie        {background-color: brown; border:black 1px solid;}
    a           {color:brown; font-size:1.1em; text-decoration:none; display:block;}
    a:link      {}
    a:visited   {}
    a:hover     {color:red; text-decoration:underline; background-color:silver;}
    a:active    {}
    p           {text-align:justify;}
    h1          {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
    h2          {font-size:1.2em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
    Revisa este post, pues te va a ayudar mucho :).

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 mar, 17
    Mensajes
    6
    Poder de Reputación
    0
    Muchas gracias skaparate , la verdad por tanto que había revisado los códigos no me percate de ese pequeño error, y de tanto buscar el cansancio me venció. Ya está solucionado el problema.

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 mar, 17
    Mensajes
    6
    Poder de Reputación
    0
    Y gracias por el Post, no sabia de esa consola, ya la pondre en practica... Saludos skaparate

Temas Similares

  1. problemas para poner imagenes dentro de la capa contenido
    Por theatre of life en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 15/01/2010, 23:41
  2. capa contenido
    Por vaneire en el foro Foro General
    Respuestas: 1
    Último Mensaje: 07/08/2009, 14:58

Permisos de Publicación

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