EL PIE SE MUEVE O LA CAPA CONTENIDO NO BAJA

:(
No me sale.
Si no escribo en el centro, el pie de pagina sube para arriba y se me desplaza hacia la derecha.

El problema es que he escrito texto para que quede bien, pero ahi no va ir texto y si otras capas para noticias con fotos y esas cosas y luego mas adelante otro menu pero a la derecha con fotos y noticias mas permanentes y si no escribo nada el pie se mueve.

Hice lo de width: auto, pero no salio bien, ¿eso no es para el ancho en vez de para el largo? Perdon por preguntas tan de novatos.

Como consigo que si sigo escribiendo en el menu laterla izquierdo y ese sí que segun escribo baja para abajo, la otra capa haga lo mismo?.

Gracias de nuevo.

Pego mis codigos

Plantilla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[img]IMAGENES/logotipoprueba.jpg[/img]</div>
<div id="publicidad"><h1>WEB SANTA MARIA DE OLARIZU</h1></div>
</div>
<div id="navegacion">
<ul>
	[*][url="#"]Que somos[/url]
    [*][url="#"]Donde estamos[/url]
    [*][url="#"]Contactos[/url]
    [*][url="#"]Documentos de interes[/url]
	[*][url="#"]Foro[/url]
  [/list]
</div>
<div id="contenido">
	<div id="menu">
 <ul><h1>EDUCACION EN LA FE</h1>
[*] [url="#"]Catequesis Familiar[/url][*] [url="#"]Pastoral con Jovenes[/url][*] [url="#"]Pastoral con Adultos[/url]
[*] [url="#"]Pastoral Familiar[/url] <h2>CELEBRACION DE LA FE Y LITURGIA </h2> [*] [url="#"]Comision de Liturgia[/url] [*] [url="#"]Experiencia de oracion grupal[/url] <h2>SOCIO CARITATIVA </h2> [*] [url="#"]Caritas[/url] [*] [url="#"]Comision Social[/url] [*] [url="#"]Comision de Mayores y Enfermos[/url] [*] [url="#"]Misiones y Solidaridad[/url] [*] [url="#"]Pastoral Penitenciaria[/url]
[/list]
 </div>
 <h1>ZONA PRINCIPAL DE LA WEB</h1>
 

El consejo pastoral te saluda y te informa. Finalizabamos el curso pasado, meses de Mayo y Junio, revisando nuestra Unidad Pastoral "Santa Maria de Olarizu". Pensabamos que la experiencia de nuestro caminar conjunto era suficiente para hacer una evaluacion, y recoger los retos que dicha practica pastoral nos plantea.</p>
 

Uno de los vacios detectados hacia referencia a la escasa informacion y comunicacion existente entre las propias comunidades (parroquiales), entre las diversas comisiones y entre los consejeros (personas representantes en el Consejo Pastoral) y sus respectivos grupos.</p>
 

Con el inteno de salir al paso y dar respueta a este vacio, afrontamos este reto que consideramos muy importante: el de la informacion.</p>
 

La pagina web que estas visualizando quiere ser un primer paso para corregir fallos y enderezar nuestra marcha como "Unidad Pastoral Santa Maria de Olarizu". Lo que en ella aparece no solo es valido para estar informados "hacia dentro" (los que formamos parte de algunos grupos) sino tambien despertar la inquietud en personas que estuvieran interesadas en participar en cualquiera de las diversas actividades pastorales existentes.</p>
 

Desde la realidad de lo que hay y con la mirada de la "utopia" puesta en todo lo que podriamos ser y realiaar como cristianos, que juntos avanzamos en comunidad de iglesia a favor de un mundo mejor y mas Reino de Dios, te decimos que estas invitado a seguir trabajando uniendo esfuerzos.</p>
 

Con la mano estendida</p>
 

<center>El Consejo Pastoral</center></p>
 </div>
<div id="pie">
  <div id="pieuno">
  <ul>
  [*][url="#"]Foro Ejemplo[/url][*][url="#"]Contactos[/url][*][url="#"]Nos Enlazan[/url]
  [/list]
</div>
  <div id="piedos">Copyright &copy; 2008 </div>
  <div id="pietres">
  <ul>
  [*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
  [/list]
</div>
  </div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

CSS
* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: none ; 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(IMAGENES/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: 90px}
#contenido {width:auto; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white; width: 150px ; float:left; text-align:left ; margin: 3px 10px 3px 3px ; 
background-image: url(IMAGENES/menu-parte-inferior-1.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(IMAGENES/menu-curva-superior-1.gif) ; padding-top:12px ; color:black}
#menu h2 {text-decoration:none ; font-size:12px ; padding-top:12px ; color:black }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li  {list-style: none ; font-size: 12px}
#pieuno  {float:left ; width:150px}
#piedos  {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(IMAGENES/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
#pie a         {color: blue; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:none ; background-color: white }
#pie a:active  {color:black}
#navegacion a         {color:white; text-decoration:none ; display: block }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:black; text-decoration:none ; background-color: white }
#navegacion a:active  {color:black}
Hola SANTA,
animo..!!! Hombre

Por que ???? no trabajas con tu capa contenido en medidas fijas.
Podrias probar éste cambio en tú linea CSS y si no te convence lo retiras.

Prueba éste cambio;
#contenido {width:798px; height:500px; background-color: #FFFFCC; border-left: black 1px solid ; border-right: black 1px solid}

Tienes algunos errrores que puedes ir corrigiendo, pero lo que te preocupa, a mí, lo que te he puesto, me parece una solución limpia.
Cambia esa pate del código CSS, elimina todo el texto de contenido menos el menú,haz una copia claro!!! y dices del resultado.


Saludos manmanu
Leida la respuesta, mañana lo pruebo y os digo, Que tal.

Por otro lado a que te refieres con que tengo muchoe errores, puedes ir dandome ideas de cuales son para ir corrigiendo. Como ves estoy aprendiendo y ya voy cogiendo algo.
Hola SANTA,
hola de nuevo.

manmanu escribió:Tienes algunos errrores que puedes ir corrigiendo
je,je,je,mejor lo dejamos en algunos, que estás haciendo un buen trabajo.
Si tú curiosidad te pica, para ésta noche te pongo uno, y mañana me lo trae "usté" resuelto.Aquí hay un error.
<ul>
   [*][url="#"]Que somos[/url]
    [*][url="#"]Donde estamos[/url]
    [*][url="#"]Contactos[/url]
    [*][url="#"]Documentos de interes[/url]
   [*][url="#"]Foro[/url]
  </ul
Al margen de los acentos.
hasta mañana

saludos manmanu
El problema de que no bajara la capa contenido soluccionado, al ponerle una altura de 600. height: 600px.
No creo que se haga mas grande el menu lateral izquierdo, en todo caso mas pequeño, cuando aprenda a cambiar el tipo de letra y algunos retoques.
Tuve que cambiar las imagenes y alargarlas un poco para que me entrase todo el menu y tambien he aprovechado para hacerlas mas anchas, parece haber quedado bien. Tambien parece que voy aprendiendo algo de los maestros que me animan y enseñan cosas en este foro. :wink:

El error que me pusiste, ¿Era que una de las listas no esta cerrada con el simbolo ? Te lo pregunto por que al corregir ese detalle no he visto que me haya afectado en nada.

Dime algun error mas que creas debo corregir.

Gracias por tu ayuda.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[img]IMAGENES/logotipoprueba.jpg[/img]</div>
<div id="publicidad"><h1>WEB SANTA MARIA DE OLARIZU</h1></div>
</div>
<div id="navegacion">
<ul>
	[*][url="#"]Que somos[/url]
    [*][url="#"]Donde estamos[/url]
    [*][url="#"]Contactos[/url]
    [*][url="#"]Documentos de interes[/url]
	[*][url="#"]Foro[/url]
  [/list]
</div>
<div id="contenido">
	<div id="menu">
 <ul><h1>EDUCACION EN LA FE</h1>
[*] [url="#"]Catequesis Familiar[/url][*] [url="#"]Pastoral con Jovenes[/url][*] [url="#"]Pastoral con Adultos[/url]
[*] [url="#"]Pastoral Familiar[/url] <h2>CELEBRACION DE LA FE Y LITURGIA </h2> [*] [url="#"]Comision de Liturgia[/url] [*] [url="#"]Experiencia de oracion grupal[/url] <h2>SOCIO CARITATIVA </h2> [*] [url="#"]Caritas[/url] [*] [url="#"]Comision Social[/url] [*] [url="#"]Comision de Mayores y Enfermos[/url] [*] [url="#"]Misiones y Solidaridad[/url] [*] [url="#"]Pastoral Penitenciaria[/url] <h2>DE COORDINACION Y COMUNION</h2> [*] [url="#"]Comision Economica[/url] [*] [url="#"]Agentes de Pastoral[/url] [*] [url="#"]Consejo Pastoral[/url] <h2>AREA DE SERVICIOS</h2> [*] [url="#"]Ornamentacion y limpieza de las iglesias[/url]
[/list]
 </div>
 <h1></h1>
 <h1>INFORMACION PASTORAL</h1>
 

El consejo pastoral te saluda y te informa. Finalizabamos el curso pasado, meses de Mayo y Junio, revisando nuestra Unidad Pastoral "Santa Maria de Olarizu". Pensabamos que la experiencia de nuestro caminar conjunto era suficiente para hacer una evaluacion, y recoger los retos que dicha practica pastoral nos plantea.</p>
 

Uno de los vacios detectados hacia referencia a la escasa informacion y comunicacion existente entre las propias comunidades (parroquiales), entre las diversas comisiones y entre los consejeros (personas representantes en el Consejo Pastoral) y sus respectivos grupos.</p>
 

Con el inteno de salir al paso y dar respueta a este vacio, afrontamos este reto que consideramos muy importante: el de la informacion.</p>
 

La pagina web que estas visualizando quiere ser un primer paso para corregir fallos y enderezar nuestra marcha como "Unidad Pastoral Santa Maria de Olarizu". Lo que en ella aparece no solo es valido para estar informados "hacia dentro" (los que formamos parte de algunos grupos) sino tambien despertar la inquietud en personas que estuvieran interesadas en participar en cualquiera de las diversas actividades pastorales existentes.</p>
 

Desde la realidad de lo que hay y con la mirada de la "utopia" puesta en todo lo que podriamos ser y realiaar como cristianos, que juntos avanzamos en comunidad de iglesia a favor de un mundo mejor y mas Reino de Dios, te decimos que estas invitado a seguir trabajando uniendo esfuerzos.</p>
 

Con la mano estendida</p>
 

<center>El Consejo Pastoral</center></p>
 </div>
<div id="pie">
  <div id="pieuno">
  <ul>
  [*][url="#"]Copyright &copy; 2008[/url][*][url="#"]Contactos[/url][*][url="#"]Nos Enlazan[/url]
  [/list]
</div>
  <div id="piedos">Ultima actualizacion - 21 de Diciembre de 2008 </div>
  <div id="pietres">
  <ul>
  [*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
  [/list]
</div>
  </div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

CSS
* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: none ; 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(IMAGENES/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: 90px}
#contenido {width:auto; height: 600px; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white; width: 180px ; float:left; text-align:left ; margin: 3px 10px 3px 3px ; 
background-image: url(IMAGENES/menu-parte-inferior-1.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(IMAGENES/menu-curva-superior-1.gif) ; padding-top:12px ; color:black}
#menu h2 {text-decoration:none ; font-size:12px ; padding-top:12px ; color:black }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li  {list-style: none ; font-size: 12px}
#pieuno  {float:left ; width:150px}
#piedos  {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(IMAGENES/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
#pie a         {color: blue; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:none ; background-color: white }
#pie a:active  {color:black}
#navegacion a         {color:white; text-decoration:none ; display: block }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:black; text-decoration:none ; background-color: white }
#navegacion a:active  {color:black}
Hola SANTA,


veo que has llevado la página a que te la critiquen.
Mi pregunta, utilizas FIRFOX???? por ejemplo.

Por que los que critiquen tu trabajo viendolo desde firefox, te dirán que tus menús se desbordan, caen hacia abajo.
Se puede solucionar uniendo mas el texto mediante CSS.por que los saltos ocupan mucho.


Bueno , ya lo resolverás, mientras piensa lo que te pongo aquí abajo.
Consejo..!!!!!
Utiliza firefox, lo hacen todos, o casi, y así comparar el trabajo desde dos angulos diferentes.


Saludos manmanu
Hola de nuevo, SANTA, !!!FELICES FIESTAS...!!!!

Creo que has decidido bién.
Luego si ves algo que no te gusta lo consultas.
Lo que voy a comentar es tambien parte de una critica, pero como lo estamos hablando aquí, la critico desde aquí.

Yo con el navegador Firefox-mazilla veo tu menú de la izquierda que se cae encima de tú capa pie, y la sobrepasa despalzando los enlaces.
Con internet explorer 6 esta justo, justo en el contenido pero se ve bién, como no todos miran el internet con IE, hay que acordarse de ellos y para ésto te puede servir verlo desde dos angulos.

he hecho un cambio que hace, que tú menú entre y tenga las mismas medidas en IE6,firefox,Opera etc. sea se ve en todos bién.


Pero priemro lo primero, date el placer de comprobar por tí mismo lo que te comento.


saludso manmanu
He estado enfermo y me estoy recuperando, va.... solo una gripe, ya me intale el firefox y vi lo mal que queda la pagina :-)

Intentare arreglarlo este fin de semana, pero antes tendre que saber ......

Si no lo logro, escribire para que me ayudes o ayudeis

Gracias
:lol:

Ya se ve bien en Firefox, no me costo mucho gracias a las pistas que me diste, junte un poco los margenes del mnu h1 y h2 y tambien del menu li.

Todavia hago la pagina un poco al tun tun, si saber muy bien el signifiacado de lo que toco, pero lo he conseguido.

Gracias,

Proximo paso que quiero hacer, ya sera el finde, es que la letra de menu de la izquierda sea mas pequeña, creo que es demasiado grande. La de los titulos h1 y h2 lo probe, pero estan mejor a 12.

Una pregunta que tipo de letras es mejor para los menus?? Que utiliza mas la gente.?

Gracias de nuevo, y FELIZ NAVIDAD!!!!!!
Hola de nuevo SANTA,

espero que hayas pasado un buen día de Nochebuena y Navidad.
Perfecto, veo que has arreglado en firefox lo que te perocupaba, pero?? no así en Internet explorer 6(no se con la ver.7), pero no con la 6.

Debería ya decirte mi opción, hace que todo este en su sitio, si no le he incluido antes, es por que pienso que prefieres mirar primero por tí mismo(es la mejor manera para aprender) y luego si no hay solución, pasas a otras opciónes.

Contesta a éste post y si estas de acuerdo te pongo mi opción.
En cuanto a tú pregunta sobre el tamaño de los titulos H, yo creo que no hay un standar, utiliza el que creas conveniente por tamño y estetica en el lugar donde lo vas a colocar.

Saludos y hasta ahora.

manmanu
Vaya con las WEBS es para volverse loco :x que si IE7, Firefox, Opera, y ahora envima el IE6...............

Por que no los haran todos iguales??

Yo utilizo el IE7 y claro por eso lo veo mas o menos bien, osea bien, pero a falta de retoques.

Dame pistas o dime por favor tu idea para que se vea bien en todos los navegadores, pero explicandome la soluccion asi para proximas veces ya se como hacer.

Gracias, estas siendo de gran ayuda en la confeccion de la pagina y en mi aprendizaje.

Los dias los pase medio enfermo, pero los he pasado bien, como los cerdos comiendo y durmiendo. :lol:
Hola SANTA,
Bueno espero que ahora éstes repuesto y con ganas de trabajar.
En cuanto a tú comentario, efectivamente no con todos se ve igual, pero para eso nos adaptamos, y tienes que tener en cuenta que hay, a día de hoy mucha gente que utltiza IE6.
Aquí te dejo una captura de tú menú, pero le quedan tres minutos, je,je,je.
[contenido no disponible]

Bueno, primero quiero que copies éste código, que estan incluidos CSS y html, y lo peges en un archivo de texto.Le cambias la extensión txt, por .html y lo abres.Dime si te gusta, a mí si.
Se ve bien en todos los navegadores.
Debajo te pongo el código CSS que he modificado, espero no haberme quedado nada en le tintero, por que ultimamente no encuentro nada.
Primero haz la comprobación y despues si te gusta, pues modificas tú CSS.
Hay va...!!!
<head>

<style type="text/css">

* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: none ; 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(IMAGENES/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: 90px}
#contenido {width:auto; height: 600px; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white; width: 180px ; float:left; text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url([url]http://www.santamariadeolarizu.org/IMAGENES/menu-parte-inferior-1.gif[/url]) ; background-position: bottom ; padding-bottom:20px }
#menu li { list-style:none ; font-size:14px; margin: 4px 8px 4px 6px; line-height:14px; font-family: "Arno Pro Caption"}
#menu a {color: #990000; text-decoration:none ;  }
#menu a:hover {color: #000000; text-decoration: underline; background-color:silver}
#menu h1 {text-decoration:none ; font-size:11px ; background-image: url([url]http://www.santamariadeolarizu.org/IMAGENES/menu-curva-superior-1.gif[/url]) ; padding-top:11px ; color:black;font-family:"Lucida Handwriting"}
#menu h2 {text-decoration:none ; font-size:10px ; padding-top:12px ; color:black; font-family:"Lucida Handwriting"}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li  {list-style: none ; font-size: 12px}
#pieuno  {float:left ; width:150px}
#piedos  {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(IMAGENES/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ;height: 12px ; overflow : hidden}
a {color: brown; text-decoration: none ;}
a:link {}
a:visited {}
a:hover {color: red; text-decoration: underline; background-color: silver}
a:active
#pie a         {color: blue; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:none ; background-color: white }
#pie a:active  {color:black}
#navegacion a         {color:white; text-decoration:none ; display: block }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:black; text-decoration:none ; background-color: white }
#navegacion a:active  {color:black} 
</style>


</head>




<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[img]IMAGENES/logotipoprueba.jpg[/img]</div>
<div id="publicidad"><h1>WEB SANTA MARIA DE OLARIZU</h1></div>

</div>
<div id="navegacion">
<ul>
	[*][url="#"]Que somos[/url]
    [*][url="#"]Donde estamos[/url]
    [*][url="#"]Contactos[/url]
    [*][url="#"]Documentos de interes[/url]
	[*][url="#"]Foro[/url]

  [/list]
</div>
<div id="contenido">
	<div id="menu">
 <h1>EDUCACION EN LA FE</h1><ul>
[*] [url="#"]Catequesis Familiar[/url][*] [url="#"]Pastoral con Jovenes[/url][*] [url="#"]Pastoral con Adultos[/url]
[*] [url="#"]Pastoral Familiar[/url] [/list]

<h2>CELEBRACION DE LA FE Y LITURGIA </h2><ul> [*] [url="#"]Comision de Liturgia[/url] [*] [url="#"]Experiencia de oracion grupal[/url][/list]

 <h2>SOCIO CARITATIVA </h2><ul>[*] [url="#"]Caritas[/url] [*] [url="#"]Comision Social[/url] [*] [url="#"]Comision de Mayores y Enfermos[/url] [*] [url="#"]Misiones y Solidaridad[/url] [*] [url="#"]Pastoral Penitenciaria[/url][/list]
 
  <h2>DE COORDINACION Y COMUNION</h2> <ul>[*] [url="#"]Comision Economica[/url] [*] [url="#"]Agentes de Pastoral[/url] [*] [url="#"]Consejo Pastoral[/url][/list]
  
   <h2>AREA DE SERVICIOS</h2><ul> [*] [url="#"]Ornamentacion y limpieza de las iglesias[/url][/list]


 </div>
 <h1></h1>
 <h1>INFORMACION PASTORAL</h1>
 

El consejo pastoral te saluda y te informa. Finalizabamos el curso pasado, meses de Mayo y Junio, revisando nuestra Unidad Pastoral "Santa Maria de Olarizu". Pensabamos que la experiencia de nuestro caminar conjunto era suficiente para hacer una evaluacion, y recoger los retos que dicha practica pastoral nos plantea.</p>
 

Uno de los vacios detectados hacia referencia a la escasa informacion y comunicacion existente entre las propias comunidades (parroquiales), entre las diversas comisiones y entre los consejeros (personas representantes en el Consejo Pastoral) y sus respectivos grupos.</p>
 

Con el inteno de salir al paso y dar respueta a este vacio, afrontamos este reto que consideramos muy importante: el de la informacion.</p>

 

La pagina web que estas visualizando quiere ser un primer paso para corregir fallos y enderezar nuestra marcha como "Unidad Pastoral Santa Maria de Olarizu". Lo que en ella aparece no solo es valido para estar informados "hacia dentro" (los que formamos parte de algunos grupos) sino tambien despertar la inquietud en personas que estuvieran interesadas en participar en cualquiera de las diversas actividades pastorales existentes.</p>
 

Desde la realidad de lo que hay y con la mirada de la "utopia" puesta en todo lo que podriamos ser y realiaar como cristianos, que juntos avanzamos en comunidad de iglesia a favor de un mundo mejor y mas Reino de Dios, te decimos que estas invitado a seguir trabajando uniendo esfuerzos.</p>
 

Con la mano estendida</p>
<center> 

El Consejo Pastoral</p></center>
 </div>
<div id="pie">
  <div id="pieuno">

  <ul>
  [*][url="#"]Copyright &copy; 2008[/url][*][url="#"]Contactos[/url][*][url="#"]Nos Enlazan[/url]
  [/list]
</div>
  <div id="piedos">Ultima actualizacion - 21 de Diciembre de 2008 </div>
  <div id="pietres">

  <ul>
  [*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
  [/list]
</div>
  </div>
<div id="curva-inferior"></div>
</div>
</body>

Aquí te pongo los cambios, o puedes ver tú mismo comparando.
Corrige la comas,comillas etc.la ortografía, tendrás menos problemas.

El CSS;
#menu {background-color: white; width: 180px ; float:left; text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(IMAGENES/menu-parte-inferior-1.gif) ; background-position: bottom ; padding-bottom:20px }
#menu li { list-style:none ; font-size:14px; margin: 4px 8px 4px 6px; line-height:14px; font-family: "Arno Pro Caption"}
#menu a {color: #990000; text-decoration:none ;  }
#menu a:hover {color: #000000; text-decoration: underline; background-color:silver}
#menu h1 {text-decoration:none ; font-size:11px ; background-image: url(IMAGENES/menu-curva-superior-1.gif) ; padding-top:11px ; color:black;font-family:"Lucida Handwriting"}
#menu h2 {text-decoration:none ; font-size:10px ; padding-top:12px ; color:black; font-family:"Lucida Handwriting"}

Bueno SANTA, haz la comprobaciónes.
Fijate en el padding-bottom:20px de menú, le hemos dado 20px y está en su sitio, esto respondía a tu duda en el post anterior, si el max, era 5px.
Mientras escribia éste post. he recibido gente,creo que no se ha movido nada,eso espero,si es así luego lo compruebo.
Mientras me dices como lo ves.


Hasta ahora


manmanu
Creo que ya esta, y digo creo por que esto es mas complicado....... :oops:

Yo la veo bien en IE7 y en FIREFOX ya me diras si la ves bien en IE6.

Hice algun cambio en el tipo de letra y color, ya me diras si te gusta.

Hay cosas que no entiendo mucho, pero me imprimire los codigos e ire poniendo nostas al lado de codigos en los que me pierdo. ¿que te parece? es una manera de aprender?

Gracias de Nuevo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[img]IMAGENES/logotipoprueba.jpg[/img]</div>
<div id="publicidad"><h1>WEB SANTA MARIA DE OLARIZU</h1></div>
</div>
<div id="navegacion">
<ul>
	[*][url="#"]Que somos[/url]
    [*][url="#"]Donde estamos[/url]
    [*][url="#"]Contactos[/url]
    [*][url="#"]Documentos de interes[/url]
	[*][url="#"]Foro[/url]
  [/list]
</div>
<div id="contenido">
	<div id="menu">
 <ul><h1>EDUCACION EN LA FE</h1>
[*] [url="#"]Catequesis Familiar[/url][*] [url="#"]Pastoral con Jovenes[/url][*] [url="#"]Pastoral con Adultos[/url]
[*] [url="#"]Pastoral Familiar[/url] <h2>CELEBRACION DE LA FE Y LITURGIA </h2> [*] [url="#"]Comision de Liturgia[/url] [*] [url="#"]Experiencia de oracion grupal[/url] <h2>SOCIO CARITATIVA </h2> [*] [url="#"]Caritas[/url] [*] [url="#"]Comision Social[/url] [*] [url="#"]Comision de Mayores y Enfermos[/url] [*] [url="#"]Misiones y Solidaridad[/url] [*] [url="#"]Pastoral Penitenciaria[/url] <h2>COORDINACION Y COMUNION</h2> [*] [url="#"]Comision Economica[/url] [*] [url="#"]Agentes de Pastoral[/url] [*] [url="#"]Consejo Pastoral[/url] <h2>SERVICIOS</h2> [*] [url="#"]Ornamentacion y limpieza de las iglesias[/url]
[/list]
 </div>
 <h1></h1>
 <h1>INFORMACION PASTORAL</h1>
 

El consejo pastoral te saluda y te informa. Finalizabamos el curso pasado, meses de Mayo y Junio, revisando nuestra Unidad Pastoral "Santa Maria de Olarizu". Pensabamos que la experiencia de nuestro caminar conjunto era suficiente para hacer una evaluacion, y recoger los retos que dicha practica pastoral nos plantea.</p>
 

Uno de los vacios detectados hacia referencia a la escasa informacion y comunicacion existente entre las propias comunidades (parroquiales), entre las diversas comisiones y entre los consejeros (personas representantes en el Consejo Pastoral) y sus respectivos grupos.</p>
 

Con el intento de salir al paso y dar respueta a este vacio, afrontamos este reto que consideramos muy importante: el de la informacion.</p>
 

La pagina web que estas visualizando quiere ser un primer paso para corregir fallos y enderezar nuestra marcha como "Unidad Pastoral Santa Maria de Olarizu". Lo que en ella aparece no solo es valido para estar informados "hacia dentro" (los que formamos parte de algunos grupos) sino tambien despertar la inquietud en personas que estuvieran interesadas en participar en cualquiera de las diversas actividades pastorales existentes.</p>
 

Desde la realidad de lo que hay y con la mirada de la "utopia" puesta en todo lo que podriamos ser y realiaar como cristianos, que juntos avanzamos en comunidad de iglesia a favor de un mundo mejor y mas Reino de Dios, te decimos que estas invitado a seguir trabajando uniendo esfuerzos.</p>
 

Con la mano estendida</p>
 

<center>El Consejo Pastoral</center></p>
 </div>
<div id="pie">
  <div id="pieuno">
  <ul>
  [*][url="#"]Copyright &copy; 2008[/url][*][url="#"]Contactos[/url][*][url="#"]Nos Enlazan[/url]
  [/list]
</div>
  <div id="piedos">Ultima actualizacion - 27 de Diciembre de 2008 </div>
  <div id="pietres">
  <ul>
  [*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
  [/list]
</div>
  </div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

CSS
* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: none ; 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(IMAGENES/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: 90px}
#contenido {width:auto; height: 570px; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white; width: 180px ; float:left; text-align:left ; margin: 3px 10px 3px 3px ; 
background-image: url(IMAGENES/menu-parte-inferior-1.gif) ; background-position: bottom ; padding-bottom:20px }
#menu li { list-style:none ; font-size:14px; margin: 4px 8px 4px 6px; line-height:14px; font-family:Garamond}
#menu h1 {text-decoration:none ; font-size:10px ; background-image: url(IMAGENES/menu-curva-superior-1.gif) ; padding-top:11px ; color:black; font-family:"Lucida Handwriting"}
#menu h2 {text-decoration:none ; font-size:10px ; padding-top:11px ; color:black; font-family:"Lucida Handwriting" }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li  {list-style: none ; font-size: 12px}
#pieuno  {float:left ; width:150px}
#piedos  {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(IMAGENES/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; 
                  height: 12px ; overflow : hidden}
#menu a {color: #551A8B; text-decoration: none}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: #000000; text-decoration: underline; background-color: #D3D3D3}
#menu a:active
#pie a         {color: blue; text-decoration:none }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:none ; background-color: white }
#pie a:active  {color:black}
#navegacion a         {color:white; text-decoration:none }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:black; text-decoration:none ; background-color: white }
#navegacion a:active  {color:black}
Genial...!!!!
El tipo de letra, ninguna objeción.
Creo que a sido un acierto los cambios que te hice, é incluso el tipo de letra para los H1 y H2, a mi me gustan.


Tanto en IE6,IE7,firefox,opera,chrome etc, te garantizo que se ve tú menú en el mismo sitio.


A seguir trabajando.


Saludos manmanu
Que te parece si cerramos estu super y maravilloso post, y cuando vuelva a seguir trabajando y me surgan dudas y problemas, (que no sera tarde) :lol: abro otro post.

Esta plantilla es la que voy a utilizar para las paginas enlazadas, ahora tengo que tabajar sobre esta para crear el menu lateral derecho, donde quiero poner divs con noticias permanentes y en la capa centra del medio divs con noticias mas actualizadas.

Aunque quizas para hacer esto seria mejor con tablas,

Cierra el post, y me dices que te parece lo de las tablas para meter dentro de los divs o divs dentro de divs.

MUCHAS GRACIAS, y nos vemos pronto en otro post con mis grandes dudas.
Hola de nuevo SANTA;


por mí de acuerdo.
Te sugiero que trabajes con capas Div, y que organices y repartas bién el espacio de tú conetnido.

A mi siempre me ha parecido bien utilizar los float, y creo que es un buen consejo que trabajes tú plantilla, o index, siempre flotando desde left.
Por que por defecto, todo el contenido, sin ningún selector CSS, flota siempre en la izquierda, o sea left, y de arriba hacia abajo, recuerdalo.

Tambien se trabaja flotando en la derecha, pero más bién para trabajos concretos y necesarios.

Bueno si tienes alguna consulta, exponla y alguien del foro te contestará.

Saludo manmanu