Ayuda Con menu lateral Izquierdo

SANTA · 20 Feb 2009, 08:38 · Solicitar retirada

Hola la verdad es que gracias a vuestra ayuda y a vuestros consejos he podido realizar la pagina Web, pero ahora le estoy haciendo mejoras y me he quedado atascado, os explico....

Tengo esta pagina en internet
www.santamariadeolarizu.org/plantilla.html

He conseguido que todos los menus o divs esten situados donde quiero, sobre todo el div menu y el div agentes, ahora queria hacer lo mismo con todas las demas paginas, pero me he encontrado que soy incapaz de hacerlo ya que ponga lo que ponga y haga lo que haga no me queda bien.

Lo que quiero en las demas paginas es que el div agente quede encima del div menu los dos pegados a la izquierda, espero que me podias ayudar y es que no encuentro el fallo.

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-Jornada de encuentro y reflexión</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[url="plantilla.html"][img]IMAGENES/logotipoprueba.jpg[/img][/url]</div>
<div id="publicidad">[img]IMAGENES/banner.jpg[/img]</div>
</div>
<div id="navegacion">
<ul>
	[*][url="quesomos.html"]Qué somos[/url]
    [*][url="dondeestamos.html"]Dónde estamos[/url]
    [*][url="contactos.html"]Contacto[/url]
    [*][url="docinteres.html"]Documentos de interés[/url]
	[*][url="foro.html"]Foro[/url]
	[*][url="plantilla.html"]Inicio[/url]
  [/list]
</div>
<div id="contenido">
<div id="areas"><h1>AREAS PASTORALES</h1>
</div>
<div id="escritos"><h2>ACTIVIDADES DE LA PASTORAL PENITENCIARIA</h2>[img]IMAGENES/la bambalina.jpg[/img]


[b]25 de febrero[/b] El grupo de teatro La Bambalina, integrado por presos de la cárcel de Nanclares de la Oca, estrenará la obra "Mascarada Canalla", cuyos beneficios irán a parar a un programa de la Ong Intermón Oxfam en el sur de Sudán. La obra se representará en el teatro Federico García Lorca del centro cívico Lakua en Vitoria.</p>



[b]ENTRADAS:[/b] 5 €</p>

[b]COMIENZO:[/b] 19:30 H</p>

[b]DIRECCION:[/b]C/ Senda Etxanobe Nº 3 (Vitoria).</p>

<hr width="400" align="center">



[b]22 de febrero[/b] Misa Pro-encarcelados en la Parroquia del Sagrado Corazón. Estáis invitados a participar en ella como signo de cercanía y  solidaridad con todos los encarcelados del mundo, sobre todo con los que viven en la Carcel de Nanclares</p>


[b]COMIENZO:[/b] 12:00 H</p>


[b]DIRECCION:[/b][url="dondeestamos.html"] C/ Paseo de la Zumaquera nº 9 (Vitoria)[/url]</p>
</div>
	<div id="menu">
 <ul><h1>EDUCACIÓN EN LA FE</h1>
[*] [url="catequesis.html"]Catequesis Familiar[/url]
[*] [url="pastoraljovenes.html"]Pastoral con Jóvenes[/url]
[*] [url="pastoraladultos.html"]Pastoral con Adultos[/url]
[*] [url="pastoralfamiliar.html"]Pastoral Familiar[/url] 
<h2>CELEBRACIÓN DE LA FE Y LITURGIA </h2> 
[*] [url="liturgia.html"]Comisi&oacute;n de Liturgia[/url] 
[*] [url="oraciongrupal.html"]Experiencia de oraci&oacute;n grupal[/url] 
<h2>SOCIO CARITATIVA </h2> 
[*] [url="caritas.html"]Cáritas[/url] 
[*] [url="social.html"]Comisi&oacute;n Social[/url] 
[*] [url="mayores.html"]Comisi&oacute;n de Mayores y Enfermos[/url] 
[*] [url="misiones.html"]Misiones y Solidaridad[/url] 
[*] [url="penitenciaria.html"]Pastoral Penitenciaria[/url] 
<h2>COORDINACIÓN Y COMUNIÓN</h2> 
[*] [url="economica.html"]Comisión Económica[/url] 
[*] [url="agentes.html"]Agentes de Pastoral[/url] 
[*] [url="consejo.html"]Consejo Pastoral[/url] 
<h2>SERVICIOS</h2> 
[*] [url="limpieza.html"]Ornamentación y limpieza de las iglesias[/url]
[/list]
 </div>

  </div>
<div id="pie">[img]IMAGENES/webamigas.jpg[/img]
[url="http://www.gazteok.org"][img]IMAGENES/gazteok.jpg[/img][/url][url="http://www.diocesisvitoria.org/"][img]IMAGENES/diocesisvitoria.gif[/img]<a href="http://www.caritasvitoria.org/" target="_blank">[img]IMAGENES/caritas.jpg[/img][/url]</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

CSS

* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
body 	{text-align: center; background-color: #528B8B}
#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:105px}
#logotipo   {width:260px ; float:left}
#publicidad {width:538px ; float:right}

#navegacion {background-color: #003366 ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 18px 0px 18px}
#navegacion ul { margin-left: 60px}
#navegacion a         {color:white; text-decoration:none }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:#9ACD32; text-decoration:none }
#navegacion a:active  {color:#9ACD32}

#contenido {width:798px; height:680px; background-color: #C1FFC1; border-left: black 1px solid ; border-right: black 1px solid}
#contenido1 {width:798px; height:680px; background-color: #C6E2FF; border-left: black 1px solid ; border-right: black 1px solid}
#contenido2 {width:798px; height:680px; background-color: #FFC1C1; border-left: black 1px solid ; border-right: black 1px solid}
#contenido3 {width:798px; height:680px; background-color: #F5DEB3; border-left: black 1px solid ; border-right: black 1px solid}
#contenido4 {width:798px; height:680px; background-color: #FFBBFF; border-left: black 1px solid ; border-right: black 1px solid}

#areas {float:left; width:180px; height:30px; background-color:#9ACD32; text-align:center; margin-top:10px; margin-left:10px; margin-right:11px}
#areas h1 {text-align: center; text-decoration:none ; font-size:13px ; padding-top:6px ; color:#FFFFFF; font-family:Georgia, serif}

#menu 	 {float:left; background-color:#FFFFFF; width: 180px; text-align:left; margin-top:10px; margin-left:10px; margin-right:11px; 
	  	  background-image: url(IMAGENES/menu-parte-inferior-1.gif) ; background-position: bottom ; padding-bottom:20px}
#menu li { list-style:none ; font-size:12px; margin: 4px 8px 4px 6px; line-height:14px; font-family:"Trebuchet MS",Helvetica,sans-serif}
#menu h1 {text-align: center; text-decoration:none ; font-size:11px ; background-image: url(IMAGENES/menu-curva-superior-1.gif) ; padding-top:11px ; 		          color:black; font-family:Georgia, serif}
#menu h2 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:#000000; font-family:Georgia, serif}

#escritos {width: 550px ; float:left; margin: 10px 6px 10px 5px}
#escritos h2 {text-decoration:none ; font-size:25px ; padding-top:11px; padding-bottom:11px; color:#1C6901; font-family:"Comic Sans MS",cursive}
#escritos h3 {text-decoration:none ; font-size:16px ; color:#003366; font-family:"Comic Sans MS",cursive}
#escritos p {text-align:justify; text-indent:15px; padding-left:6px; font-size:13px; font-family:"Comic Sans MS",cursive}
#escritos img {padding-left:10px; padding-right:10px}
#escritos table {width:500px; border-width:5px; margin-top:10px}
th {text-align:left; font-size:16px; font-family:"Comic Sans MS",cursive}
td {text-align:left; font-size:13px; font-family:"Comic Sans MS",cursive}

#grupo1 {width: 200px; height: 150px; float:left; padding-left:35px; padding-right:35px}
#grupo2 {width: 200px; height: 150px; float:left; padding-left:35px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:35px; padding-top:40px; padding-right:35px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:40px; padding-left:35px}

#pie {width: 798px; height: 75px; background-color:#FFFFFF; padding-top:4px; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid}
#pie img{float: left; margin-right:6px}

#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}
#escritos a {color:#FF0000; text-decoration:none}
#escritos a:link {}
#escritos a:visited {}
#escritos a:hover {color:#FFFFFF; text-decoration:none; background-color:#4F4F4F}
#escritos a:active

Graicas por adelantado

SANTA · 20 Feb 2009, 15:24 · Solicitar retirada

Nada que me he puesto a probar otra cosa que se me ha ocurrido, y he dado con la soluccion.

He puesto el div comentarios en float=right y no en left como por arte de magia se me ha colocado todo como yo queria.

Parece que voy mejorando y aprendiendo cosas.

Gracias,

nosabernada · 20 Feb 2009, 19:47 · Solicitar retirada

Hola,

me alegro, pero ten encuenta que los float, cambian mucho segun la resolucion, asi que pruebalo en todas partes va?, tambien, antes de cualquier web, prueba a usar cosas que creias imposible, que la magia existe!

Adios