problema con el pie de pagina

vasco-catalan · 18 Dic 2008, 20:32 · Solicitar retirada

hola buenas,

estoy avanzando bastante con el tutorial de Jorgens, gracias por hacerlo tan facil!!

el único problema que tengo hasta ahora es con el pie. Al poner pie 1, pie 2 y pie 3 en vertical, me sale el pie 1 ligeramente mas hacia la derecha que pie2 y pie3.
la pagina es: paginadeprueba1.onlinewebshop.net/plantilla.html

os pongo lo que tengo escrito en la plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</a>
</div>
<div id="navegacion">
<ul>

sección 1

sección 2

sección 3

sección 4

</div>
<div id="contenido">
<div id="menu">
<ul><h1>Título de sección 1</h1>

enlace 1

enlace 2

enlace 3

enlace 4</div><h1>Esta será la zona principal de la web</h1>

Este es el segundo parrafo, estoy aprendiendo mucho con este tutorial.</p>
<h2>Este es el tercer párrafo, dentro de poco voy a tener una web de puta madre. De aquí al estrellato. O eso, o me estrello con todas las de la ley!! jajjaja</h2>

Este es el cuarto párrafo, no se que poner porque no tengo ni puta idea.</p>
</div>
<div id="pie">
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

y lo que tengo puesto en estilo-general.css:

* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
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}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.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 {width:280px ; float:left }
#publicidad {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 20px }
#navegacion ul { margin-left: 180px }
#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:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height: 12px ; overflow: hidden}
a {color: brown ; text-decoration:none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

un saludo, y gracias de antemano por ayudarme.

GianBros · 18 Dic 2008, 21:08 · Solicitar retirada

Hola compadre pues yo creo se debera a que en tu hoja de estilos no has definido, ni pieuno, piedos, ni pietres, sera por eso posiblemente que no salga muy bie, po que tu tienes en tu plantilla:
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
y en tu hoja de estilos no aparece definido.
Bueno espero sea eso y te medio sirva, saludos cordiales hasta pronto bye.

vasco-catalan · 18 Dic 2008, 21:38 · Solicitar retirada

GianBros escribió:Hola compadre pues yo creo se debera a que en tu hoja de estilos no has definido, ni pieuno, piedos, ni pietres, sera por eso posiblemente que no salga muy bie, po que tu tienes en tu plantilla:
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
y en tu hoja de estilos no aparece definido.
Bueno espero sea eso y te medio sirva, saludos cordiales hasta pronto bye.

estoy siguiendo los pasos segun la web, y ahi dice que al poner los pies en la plantilla, en la vista previa me deberia salir alineado y no es asi.
he probado tambien de hacer lo que dices tu, de definirlo en la hoja de estilos, como dice en la pagina siguiente a la que te pongo, pero ahi me sigue igual, me salen los colores y todo horizontal, pero me sigue apareciendo ese margen de color blanco a la izquierda.
http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
no se a que se puede deber ese error...

Deathly Snake · 19 Dic 2008, 02:23 · Solicitar retirada

Con el navegador llamado Opera, el pie se ve perfecto. Pero con IE, es como tú dices, la palabra "pieuno" se corre a la derecha :? No puedo encontrar la solución :?: :roll:

Raulyure · 19 Dic 2008, 02:25 · Solicitar retirada

vasco-catalan escribió:
GianBros escribió:Hola compadre pues yo creo se debera a que en tu hoja de estilos no has definido, ni pieuno, piedos, ni pietres, sera por eso posiblemente que no salga muy bie, po que tu tienes en tu plantilla:
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
y en tu hoja de estilos no aparece definido.
Bueno espero sea eso y te medio sirva, saludos cordiales hasta pronto bye.

estoy siguiendo los pasos segun la web, y ahi dice que al poner los pies en la plantilla, en la vista previa me deberia salir alineado y no es asi.
he probado tambien de hacer lo que dices tu, de definirlo en la hoja de estilos, como dice en la pagina siguiente a la que te pongo, pero ahi me sigue igual, me salen los colores y todo horizontal, pero me sigue apareciendo ese margen de color blanco a la izquierda.
http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
no se a que se puede deber ese error...

Hola:
Hay una cosa que se debe tener claro cuando se diseña una página, cualquier cosa que haga en algun sector de ella, puede afectar a cualquier parte de la página y no necesariamente a donde se puede suponer que está el error, lo que le dijo Gian Bross es cierto, usted ha creado dentro de la capa pie tres capas más.
La capa pieuno, piedos y pietres, luego de crear esas capas en la página , hay que darle las propiedades con sus valores , pero eso se hace en la hoja de estilo general, porque o si no lo único que se verá en la página será lo que haya escrito en ellas , pero como no están definidas las características de esas tres capas lo que haya escrito en teoría en ellas , aparecerá en la capa pie, ya que las otras prácticamente no existen,al no heberle dado las directivas a ellas. Por eso le aparece como si no existiesen, sin colores y sin nada.
En el curso Paso a Paso se le explica lo que debe hacer, pero como sugerencia, le diré que he notado que usted en la capa logotipo, cuando hace el enlace para volver al inicio, usted ha incluído la capa publicidad como parte del enlace de la capa logotipo, con ese cierre de a que ha puesto </a>.
Eso le afecta seguramente a toda su página. Incluyéndo a la capa pie y lo que tenga dentro
Fíjese como en este ejemplo que le pongo debe ir ese cierre de enlace o a </a>

<div id="logotipo">[contenido no disponible]</div>

Usted en su página ese cierre de enlace </a> no lo tiene como en este ejemplo, lo tiene después de la capa publicidad.
También debe usted fijarse que a la capa contenido, parece ser que no le ha puesto ningún width o ancho, después de eliminar de la capa contenido el width:800px más el float:left que dice el curso que hay que poner, y que después hay que quitar, claro que hay que eliminarlos , pero hay que poner en su lugar un width:auto
Saludos

vasco-catalan · 19 Dic 2008, 22:34 · Solicitar retirada

También debe usted fijarse que a la capa contenido, parece ser que no le ha puesto ningún width o ancho, después de eliminar de la capa contenido el width:800px más el float:left que dice el curso que hay que poner, y que después hay que quitar, claro que hay que eliminarlos , pero hay que poner en su lugar un width:auto
Saludos

hola de nuevo,
despues de hacer lo que escribiste, en la plantilla me ha quedado igual que estaba, o sea, con ese espacio en blanco a la izquierda. Lo que he hecho es que en vez de a los pie1, pie2 y pie3 en la hoja de estilos colocarles el float:left, todo lo contrario, ponerle float:right, con lo que he conseguido que me quedaran todos alineados y ya con colores. Lo único que veo es que de izquierda a derecha me han quedado asi: pie tres, pie dos, pie uno. Eso no creo que sea un excesivo problema ya que puedo cambiar en la plantilla el nombre de pie uno por el de pie tres, cierto?
He vuelto a cargar la pagina en el hosting, espero que se vea bien con otro navegador que no sea IE, que ya lo he probado y se ve bien.
Ya me contareis.

Un saludo.

manmanu · 19 Dic 2008, 22:45 · Solicitar retirada

Hola amigos,

hola
bueno está claro que el problema que hace que tú texto pieuno se desplace a la derecha es por que el menu esta haciendo de empujador.
Al menu le asignas un padding-bottom:5px , y el maximo que te permite el contenido son 4 pixeles, osea que empuja hacia abajo y encuentra la capa pie, y empuja el texto de pieuno.
Solucionalo dandole maximo 4 pixeles ,ó ninguno, funciona igual.

Raulyure a sido muy observador, y a notado que el cierre de </a>, a patinado hasta las afueras de tú capa publicidad, no se si era tú intención, pero es como no normal.

Te incluyo tú trabajo, y existe algúnos pequeños errores.
Corrigelos, y te irá mejor tú trabajo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Esto vá dentro de <head>
<body>

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</a>
</div>
<div id="navegacion">
<ul>
sección 1
sección 2
sección 3
sección 4

</div>
<div id="contenido">
<div id="menu">
<ul><h1>Título de sección 1</h1>
enlace 1
enlace 2
enlace 3
enlace 4</div><h1>Esta será la zona principal de la web</h1>

Este es el segundo parrafo, estoy aprendiendo mucho con este tutorial.</p>
<h2>Este es el tercer párrafo, dentro de poco voy a tener una web de puta madre. De aquí al estrellato. O eso, o me estrello con todas las de la ley!! jajjaja</h2>

Este es el cuarto párrafo, no se que poner porque no tengo ni puta idea.</p>
</div>
<div id="pie">
<div id="pieuno">pie uno</div>
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

y lo que tengo puesto en estilo-general.css:

* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
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}Esto lo he visto varias veces, debe quedar así ó h2 no funcionará font-size:1.1em
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.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 {width:280px ; float:left }
#publicidad {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 20px }
#navegacion ul { margin-left: 180px }
#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:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px }Este es el que genera el quebradero de cabeza, ponle 4px y funcionará.
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height: 12px ; overflow: hidden}
a {color: brown ; text-decoration:none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

Bueno no prestado más atención que aquellos problemas que no veias.
Creo que estás haciendo un buen trabajo, continua así.
Espero haberte ayudado.

Saludos a todos, y !!!Felíces Fiestas....!!!!

manmanu

manmanu · 19 Dic 2008, 22:52 · Solicitar retirada

Hola vasco-catalan,
hola de nuevo a todos.

Solo entro para comentar vasco-catalan, que eseguro que casi escribiamos en el post. al mismo tiempo, y he podisdo leer lo que comentas.

Espero que mires la opción que te pongo, para tú asunto me parece una solución limpia.

Saludos manmanu

vasco-catalan · 19 Dic 2008, 23:22 · Solicitar retirada

manmanu escribió:Hola amigos,

hola
bueno está claro que el problema que hace que tú texto pieuno se desplace a la derecha es por que el menu esta haciendo de empujador.
Al menu le asignas un padding-bottom:5px , y el maximo que te permite el contenido son 4 pixeles, osea que empuja hacia abajo y encuentra la capa pie, y empuja el texto de pieuno.
Solucionalo dandole maximo 4 pixeles ,ó ninguno, funciona igual.

Raulyure a sido muy observador, y a notado que el cierre de </a>, a patinado hasta las afueras de tú capa publicidad, no se si era tú intención, pero es como no normal.

Te incluyo tú trabajo, y existe algúnos pequeños errores.
Corrigelos, y te irá mejor tú trabajo.

hola buenas, tenias razon con lo del menu. le he cambiado a 4px y me va mucho mejor, pq si lo hubiera dejado en 5px despues, al insertar los enlaces, me lo descuadraba todo radicalmente. Este limite de 4px siempre es asi, de 4?
Por otra parte, lo del cierre </a> no era intencion, se me fue la olla.
Los fallos que tambien me describiste los he corregido y parece que va mejor.

Gracias!!
Feliz Navidad

manmanu · 19 Dic 2008, 23:42 · Solicitar retirada

Igualmente para tí, !!!Felíz Navidad!!!

A tú pregunta,
no, no hay limite, siempre y cuando haya un espacio que pueda contener, el contenido + el padding.
Me explico, no tenias más sitio, por las medidas que existen.
Tú menú y tú padding, sobrepasaban el limite, yo lo unico que pude observar cual era el limite y así te lo expuse.
De todas las maneras creo que funciona perfectamente sin el padding-bottom, para éste caso.

Dime por que ??? padding-bottom al menú, ya no me acuerdo.
Viene en el curso???
Igual le hecho una mirada.

Saludos manmanu

vasco-catalan · 20 Dic 2008, 01:46 · Solicitar retirada

A tú pregunta,
no, no hay limite, siempre y cuando haya un espacio que pueda contener, el contenido + el padding.
Me explico, no tenias más sitio, por las medidas que existen.
Tú menú y tú padding, sobrepasaban el limite, yo lo unico que pude observar cual era el limite y así te lo expuse.
De todas las maneras creo que funciona perfectamente sin el padding-bottom, para éste caso.

Dime por que ??? padding-bottom al menú, ya no me acuerdo.
Viene en el curso???
Igual le hecho una mirada.

Saludos manmanu

buenas de nuevo, lo de padding-bottom al menu me sonaba de algo que era para dejar algun margen entre el ultimo enlace del menu lateral y la imagen inferior del menu. lo busque en la pagina del curso, http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
dice que debemos colocar en este caso un padding inferior a 5px, como dijiste tu, pero luego en el ejemplo de abajo el padding esta en 5px, no por debajo como deberia estar. Entonces lo que hice yo fue fijarme mas en el ejemplo que en la propia explicacion del porqué. Quizá se deberia corregir en el ejemplo, si esto que te comento fuera del todo cierto, para que no hayan mas lios.

Bueno, pues ya he terminado con el tutorial hasta la leccion 4. Tengo ganas de que salgan las lecciones 5 y 6 para seguir aprendiendo... Mientras tanto iré investigando un poco por mi cuenta y empezando mi propia web.

Gracias a ti, a Jorgens y a toda la gente del foro de CCTW por haberme echado una mano con las dudas que he ido teniendo. Sois geniales!!

Un abrazo

manmanu · 20 Dic 2008, 17:41 · Solicitar retirada

Hola vasco-catalan,

vasco-catalan escribió:buenas de nuevo, lo de padding-bottom al menu me sonaba de algo que era para dejar algun margen entre el ultimo enlace del menu lateral y la imagen inferior del menu. lo busque en la pagina del curso, http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
dice que debemos colocar en este caso un padding inferior a 5px

No lo recordaba, y pienso que jorgens acerto en hacer éste ajuste.Para mí creo que le viene bién al enlace 4 para que no se heche encima de la moldura del menú.
Tambien es cierto que si vuelves a poner en 5px el padding, y continuas escribiendo más texto, desaparece el empuje que comentamos.
El problema en el momento era 5px tal y como lo tenias,espero que me entiendas, y si no prueba como te comento.

vasco-catalan escribió:Bueno, pues ya he terminado con el tutorial hasta la leccion 4. Tengo ganas de que salgan las lecciones 5 y 6 para seguir aprendiendo... Mientras tanto iré investigando un poco por mi cuenta y empezando mi propia web.

De momento es lo mejor que puedes hacer, jorgens está en ello.
Seguro que pronto nos asombra con el resto del curso, paciencia::!!!!, está muy liaado.
Puedes contar con la gente del foro y participar.
Animooo...!!!!

vasco-catalan escribió:Gracias a ti, a Jorgens y a toda la gente del foro de CCTW por haberme echado una mano con las dudas que he ido teniendo. Sois geniales!!

Aceptadas en nombre de tod@s.
Hay qué darles las gracias a Raulyure, GianBros,Deathly Snake por qué ellos son los que atendieron tú petición de ayuda.

Si tienes algún problema puedes consultar con tod@s.

Saludos manmanu