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

Tema: Problema con el pie de pagina

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    22 jun, 08
    Mensajes
    22
    Poder de Reputación
    18

    Problema con el pie de pagina

    Acabo de terminar el curso paso a paso que esta en su web y he descubierto que tengo un problema, intente resolverlo por mi cuenta pero no soy lo suficientemente bueno en esto como para solucionarlo xD

    aqui les dejo una foto




    les agradezco su ayuda :D!

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    17 jul, 07
    Mensajes
    366
    Poder de Reputación
    20
    ¿podrías copiarnos los códigos de la hoja de estilos y de la página? es para ver si has escrito algo mal o te falta algo.
    *David*
    Esperando terminar diez mil proyectos inacabados...

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    22 jun, 08
    Mensajes
    22
    Poder de Reputación
    18
    Cita Iniciado por davissbrocen
    ¿podrías copiarnos los códigos de la hoja de estilos y de la página? es para ver si has escrito algo mal o te falta algo.
    aqui te los dejo

    estilo-general.css
    Código:
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
    body {text-align: center }
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
                      background-repeat: no-repeat ;
                      width:800px ; 
                      height: 12px ;
    									overflow: hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    									background-repeat: no-repeat ;
    									width: 800px;
    									height: 12px;
    									overflow: hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; 
               border-right: black 1px solid ; height:85px}
    #logotipo   {background-color: brown ; width:280px ; float: left }
    #logotipo a         {}
    #logotipo a:link    {}
    #logotipo a:visited {}
    #logotipo a:hover   {background-color: white }
    #logotipo a:active  {}
    #publicidad {background-color: pink ; width:518px ; float: right ; margin-top:25px}
    #navegacion {background-color: gray ; border: black 1px solid ; height: 20px }
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 10px }
    #navegacion ul { margin-left: 190px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #pie     {border-left:  black 1px solid ; border-right: black 1px solid ; 
              border-top:   black 1px solid ; height: 65px }
    #pie a         {color: blue; text-decoration:none ; display: block }
    #pie a:link    {}
    #pie a:visited {}
    #pie a:hover   {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active  {color:black}
    #pie li {list-style: none ; font-size: 10px }
    #pieuno  {background-color: white ; float:left ; width:150px }
    #piedos  {background-color: white ; float:left ; width:498px }
    #pietres {background-color: white   ; float:left ; width:150px }
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ;
     margin-right: 10px ; margin: 3px 10px 3px 3px ;
     background-image: url(objetos/menu-parte-inferior.gif) ;
     background-position: bottom ;
     padding-bottom:5px }
    #menu h1 {text-decoration:none ; font-size: 12px;
    background-image: url(objetos/menu-parte-superior.gif) }
    #menu li { list-style:none ; margin: 4px 8px 4px 6px }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #estadisticas {float: left ; width: 18px }
    a         {color: brown ; text-decoration:none ; display: block }
    a:link    {}
    a:visited {}
    a:hover   {color:red ; text-decoration:underline ; background-color: silver}
    a:active  {}

    plantilla.html
    Código:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Plantilla</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <body onload="init();">
    <div id="global">
    	<div id="curva-superior"></div>
      <div id="cabecera">
    			 <div id="logotipo">[img]objetos/logotipo.gif[/img] </div>
    			 <div id="publicidad">Bienvenidos a mi Web</div>
    	</div>
      <div id="navegacion">
    	<ul>[*]  Seccion 1[*]  Seccion 2[*]  Seccion 3[*]  Seccion 4[/list]
    	</div>
    	<div id="contenido">
    			 <div id="menu">
    			 			<ul><h1>Titulo de Seccion 1</h1>[*] Enlace 1[*] Enlace 2[*] Enlace 3[*] Enlace 4[/list]
    			</div>
    	<h1>Esta será la zona principal de la web</h1>
    	
    
    Este es mi segundo párrafo. Acabo de poner un punto
    	 y en cambio sigue siendo un párrafo pues no le he colocado
    	  aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    	<h2>Y este es el tercer párrafo</h2>
    
     En pocas lecciones aprenderé
    	 a darle margenes para separarlos unos de otros, e incluso
    	  hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
    	
    
    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens
    	 nos enseñe a ponerlos alineados a la izquierda, o justificados.
    	  Así esto parece una poesia! je je je.</p>
    	</div>
    	<div id="pie">
    		<div id="pieuno">
    	 			 <ul>
    				 		[*]Foro Ejemplo[*]Contactos[*]Nos Enlazan
    				[/list]
    		</div>
    		<div id="piedos"> pie dos </div>
    		<div id="pietres">
      			 <ul>
        		 		[*]Directorio[*]TopSite[*]Mapa de la Web
     				[/list]
    		</div>
    	<div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    <div id="estadisticas">
    		 <a id="mws4527948" href="http://webstats.motigo.com/">
    		 </a>
    		 <script type="text/javascript" src="http://m1.webstats.motigo.com/c.js?id=4527948"></script>
    </div>
    </body>
    </html>

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    17 jul, 07
    Mensajes
    366
    Poder de Reputación
    20
    para el fallo de la parte derecha (donde lo blanco está un poquito más a la derecha que lo naranja) puedes probar quitándole un pixel de ancho a una de las capas del pie ( #pieuno #piedos #pietres, aunque solo un pixel a uno de los tres ) esto es porque 150+150+498=798+3(líneas)=401, por lo que sobra un píxel, para lo otro creo que influye la imagen esa que tienes puesta al final del todo que es?
    *David*
    Esperando terminar diez mil proyectos inacabados...

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,247
    Poder de Reputación
    29
    estilo-general.css
    Código:
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
    body {text-align: center }
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
                      background-repeat: no-repeat ;
                      width:800px ; 
                      height: 12px ;
    									overflow: hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    									background-repeat: no-repeat ;
    									width: 800px;
    									height: 12px;
    									overflow: hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; 
               border-right: black 1px solid ; height:85px}
    #logotipo   {background-color: brown ; width:280px ; float: left }
    #logotipo a         {}
    #logotipo a:link    {}
    #logotipo a:visited {}
    #logotipo a:hover   {background-color: white }
    #logotipo a:active  {}
    #publicidad {background-color: pink ; width:518px ; float: right ; margin-top:25px}
    #navegacion {background-color: gray ; border: black 1px solid ; height: 20px }
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 10px }
    #navegacion ul { margin-left: 190px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #pie     {border-left:  black 1px solid ; border-right: black 1px solid ; 
              border-top:   black 1px solid ; height: 65px }
    #pie a         {color: blue; text-decoration:none ; display: block }
    #pie a:link    {}
    #pie a:visited {}
    #pie a:hover   {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active  {color:black}
    #pie li {list-style: none ; font-size: 10px }
    #pieuno  {background-color: white ; float:left ; width:150px }
    #piedos  {background-color: white ; float:left ; width:498px }
    #pietres {background-color: white   ; float:left ; width:150px }
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ;
     margin-right: 10px ; margin: 3px 10px 3px 3px ;
     background-image: url(objetos/menu-parte-inferior.gif) ;
     background-position: bottom ;
     padding-bottom:5px }
    #menu h1 {text-decoration:none ; font-size: 12px;
    background-image: url(objetos/menu-parte-superior.gif) }
    #menu li { list-style:none ; margin: 4px 8px 4px 6px }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #estadisticas {float: left ; width: 18px }
    a         {color: brown ; text-decoration:none ; display: block }
    a:link    {}
    a:visited {}
    a:hover   {color:red ; text-decoration:underline ; background-color: silver}
    a:active  {}

    plantilla.html
    Código:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Plantilla</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <body onload="init();">
    <div id="global">
    	<div id="curva-superior"></div>
      <div id="cabecera">
    			 <div id="logotipo">[img]objetos/logotipo.gif[/img] </div>
    			 <div id="publicidad">Bienvenidos a mi Web</div>
    	</div>
      <div id="navegacion">
    	<ul>[*]  Seccion 1[*]  Seccion 2[*]  Seccion 3[*]  Seccion 4[/list]
    	</div>
    	<div id="contenido">
    			 <div id="menu">
    			 			<ul><h1>Titulo de Seccion 1</h1>[*] Enlace 1[*] Enlace 2[*] Enlace 3[*] Enlace 4[/list]
    			</div>
    	<h1>Esta será la zona principal de la web</h1>
    	
    
    Este es mi segundo párrafo. Acabo de poner un punto
    	 y en cambio sigue siendo un párrafo pues no le he colocado
    	  aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    	<h2>Y este es el tercer párrafo</h2>
    
     En pocas lecciones aprenderé
    	 a darle margenes para separarlos unos de otros, e incluso
    	  hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
    	
    
    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens
    	 nos enseñe a ponerlos alineados a la izquierda, o justificados.
    	  Así esto parece una poesia! je je je.</p>
    	</div>
    	<div id="pie">
    		<div id="pieuno">
    	 			 <ul>
    				 		[*]Foro Ejemplo[*]Contactos[*]Nos Enlazan
    				[/list]
    		</div>
    		<div id="piedos"> pie dos </div>
    		<div id="pietres">
      			 <ul>
        		 		[*]Directorio[*]TopSite[*]Mapa de la Web
     				[/list]
    		</div>
    	<div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    <div id="estadisticas">
    		 <a id="mws4527948" href="http://webstats.motigo.com/">
    		 </a>
    		 <script type="text/javascript" src="http://m1.webstats.motigo.com/c.js?id=4527948"></script>
    </div>
    </body>
    </html>
    [/quote]
    Hola:
    Puede probar añadiendo en la capa contenido de la hoja de estilo (fuera de lo que tiene puesto) un width:800px
    #contenido{width:800px; Después que vea como queda, le elimina donde puso 800px y solo lo deja así: #contenido{width:auto; etc.etc.etc.. puede que sea ese el problema, ya nos dirá.
    Saludos
    Agradecido de los que aprenden enseñando

Temas Similares

  1. problema con la pagina en la web
    Por LOBITA76 en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 5
    Último Mensaje: 17/09/2010, 14:27
  2. Problema con el pie de pagina
    Por Starbuck82 en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 14/08/2008, 15:02
  3. problema con la pagina
    Por bamboogdl en el foro Foro General
    Respuestas: 5
    Último Mensaje: 10/07/2006, 20:19

Permisos de Publicación

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