Entrar

Me urge!!! COMO HACER LA TERCERA COLUMNA O MENU DERECHA

SANTA · · Solicitar retirada
Hola, hace tiempo que no escribo he ido haciendo la pagina ya casi sin ayuda, pero ha llegado un momento que me he quedado atascado, atascado, no se como colocar un div como el menu de la izquierda para poner mas cosas, tipo menu o algo asi sin que se me descuadre todo, he probado varias cosas, os dejo los codigo para ver si me podeis ayudar.

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-Caritas</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
<style type="text/css">
<!--
.Estilo1 {color: #E2E2E2}
-->
</style>
</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="contenido2">
<div id="areas"><h1>AREAS PASTORALES</h1>
</div>
<div id="escritos"><h2>CÁRITAS</h2>


[url="http://www.caritasvitoria.org/"]C&aacute;ritas[/url] de la Unidad Pastoral se encuadra en  el marco  de esta  organización de la Iglesia, y dentro de ella, en el espacio diocesano, asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>



Para el logro de ese objetivo analiza la pobreza y sus causas, interviniendo en la realidad  mediante, formación, sensibilización y denuncia, coordinando al voluntariado y participando en la red diocesana y zonal mediante diversas acciones:</p>




- Acogida: atención y apoyo a personas y familias de la zona.</p>




- Ropero: recogida de ropa para el programa de empleo de Cáritas Diocesana</p>




- Comisión de inmigrantes: conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales.</p>




-[url="forum5070.html"] Forum sociocultural[/url] para personas mayores</p>
 


- Participación en la red social de la zona.</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}
#contenido5 {width:798px; height:680px; background-image: url(IMAGENES/fondonoticias.jpg); border-left: black 1px solid ; border-right: black 1px solid}
#contenido6 {width:798px; height:680px; background-image: url(IMAGENES/fondonavegacion.jpg); 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:right; margin: 10px 25px 10px 10px}
#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-top:10px; padding-left:25px; padding-right:30px}
#grupo2 {width: 200px; height: 150px; float:left; padding-top:10px; padding-left:30px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:25px; padding-top:30px; padding-right:30px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:30px; padding-left:30px}

#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

Gracias de antemano, la verdad es que me urge mucho.
Sublevus · · Solicitar retirada
Hola
Intentá crear un div que se llame por ejemplo menu2 dentro del div que contiene todo, el general, vamos a decir; y que tenga las propiedades de flotar a la derecha, tener un ancho de 80 px por ej, y despues pone algo de texto como para identificarlo dentro de la pagina.
Si ves que ese menu se te descuadra un poco intenta cambiar las propiedades width (ancho) a los demas componentes dentro del div general donde tenes todo el texto y si hace falta agranda el ancho del div global para que todo quepa mejor.
Acordate de poner un margin para separar los divs entre si.
Es cuestion de ir probando las cosas para ver como queda, hasta que quede a gusto.
Espero haberte ayudado
Sublevus
Raulyure · · Solicitar retirada
Hola:

Le dejaré acá una de las tantas maneras en que se puede hacer, ya que depende en gran medida de lo que ya usted tiene hecho.
Quiero decir que si usted la página la tuviese en blanco, y tuviese que comenzarla desde el principio para hacer tres columnas, seguramente se habría hecho de otra manera.

fuera de eso, ceo que la hoja de estilo que usted puso acá en el mensaje, está relacionada también con otras páginas.

Así que lo que hice fue en cierta medida tratarla como si fuese una sola página, porque no se si usted quería ese menu a la derecha solo para esa página o también para las demás, lo digo porque cuando una web ya está con muchas cosas, es un poco complicado modificar ciertas capas de una de las páginas sin que afecte a otras.

En la hoja de estilo a la capa #contenido 2{etc. etc.} Le modifiqué el width, y lo dejé en auto.

Para la capa #menu{etc. etc.} (el de la izquierda) creé una capa a la que le llamé #areamenuizq{etc. etc.} en la que dentro de esa capa está la capa #areas{} y la capa #menu{}.

Luego para el menu de la derecha, también creé una capa a la que llamé #areamenuder{}, y dentro de esa capa va la capa #area{} y la capa #menuder{}.

Luego para la capa central, la que se llama #escritos{}, le di un margin-left de 185 px y un margin right de 185 px con borde a la izquierda y a la derecha, lo e hecho así solo para que pueda usted verlo (términos visuales).
¿Porqué un margin-left?.
Porque la capa que contiene a la capa menu, mide de ancho 181px, le sumamos el borde izquierdo de la capa contenido 2, eso haría 182 px, y lo mismo para el margin-right que tiene que ver con la otra capa donde está el menu de la derecha.
Le puse como le digo, un margin left y un margin right de 185, solo para que usted viera que es una capa diferente.
Usted puede quitarle los bordes a esa capa #escritos{}, y ponerle si quiere un margin-left de 182 o 183px y lo mismo para el margin right.

Fuera de eso, cuando usted crea un grupo de aes para una capa en la hoja de estilo, es conveniente ponerla al final de la hoja de estilo, se lo digo por lo de la capa #navegación{}, ya que al ponerla como la tenía usted, genera problemas si no inmediatos, pero si a futuro, y después no se sabe porqué puede ser.

En lo que concierne a su página html, no es lo mismo poner dentro de la capa #contenido 2{} una capa #menu{}, luego una capa central (escritos) y luego una capa menu a la derecha, ya que lo hay que buscar es, cuál es la combinación correcta.

Se dará cuenta que he puesto a continuación de la capa <div id="contenido 2">
la capa <div id="menu">etc.</div>
la capa <div id="menuder">etc.</div>
y después la capa <div id="escritos">etc.</div>
y luego he cerrado la capa contenido 2 con </div>

Como le digo, Hay formas de resumir los códigos para no hacer tantos, pero eso se hace con un poco de experiencia, yo se los he armado de esta manera para que vea las diferencias y similitudes que pueden haber

Yo he utilizado mis curvas en su página y tienen a veces distintos nombres, usted pongales el nombre de las suyas
..............................................................
Esta es la hoja de estilo paginas.css:

* {text-indent:0px;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}


#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:auto; 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}
#contenido5 {width:798px; height:680px; background-image: url(IMAGENES/fondonoticias.jpg); border-left: black 1px solid ; border-right: black 1px solid}
#contenido6 {width:798px; height:680px; background-image: url(IMAGENES/fondonavegacion.jpg); border-left: black 1px solid ; border-right: black 1px solid}

#areamenuizq{float:left;width:181px;height:680px;border-right:black 1px solid;background-color:#915c27}
#areas {float:left; width:180px; height:30px; background-color:#9ACD32; text-align:center; margin-top:10px; }
#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;
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 4px 4px 3px; 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}

#areamenuder{float:right;width:181px;height:680px;border-left:black 1px solid;background-color:#915c27}
#menuder {float:left;background-color:#FFFFFF; width: 180px; text-align:left; margin-top:10px;
background-image: url(IMAGENES/menu-parte-inferior-1.gif) ; background-position: bottom ; padding-bottom:20px}
#menuder li { list-style:none ; font-size:12px; margin: 4px 4px 4px 3px; line-height:14px; font-family:"Trebuchet MS",Helvetica,sans-serif}
#menuder 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}
#menuder h2 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:#000000; font-family:Georgia, serif}

#escritos {background-color:#ffcc66;margin-left:185px;margin-right:185px;border-left:black 1px solid;border-right:black 1px solid;}
#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; font-size:13px; font-family:"Comic Sans MS",cursive;padding:5px 10px 5px 10px;}
#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-top:10px; padding-left:25px; padding-right:30px}
#grupo2 {width: 200px; height: 150px; float:left; padding-top:10px; padding-left:30px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:25px; padding-top:30px; padding-right:30px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:30px; padding-left:30px}

#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-1.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

#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}

...................................................................................
su pagina.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-Caritas</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
<style type="text/css">
<!--
.Estilo1 {color: #E2E2E2}
-->
</style>
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
  • Qué somos
  • Dónde estamos
  • Contacto
  • Documentos de interés
  • Foro
  • Inicio

    </div>
    <div id="contenido2">
    <div id="areamenuizq">
    <div id="areas"><h1>AREAS PASTORALES</h1>
    </div>
    <div id="menu">
    <ul><h1>EDUCACIÓN EN LA FE</h1>
  • Catequesis Familiar
  • Pastoral con Jóvenes
  • Pastoral con Adultos
  • Pastoral Familiar
    <h2>CELEBRACIÓN DE LA FE Y LITURGIA </h2>
  • Comisi&oacute;n de Liturgia
  • Experiencia de oraci&oacute;n grupal
    <h2>SOCIO CARITATIVA </h2>
  • Cáritas
  • Comisi&oacute;n Social
  • Comisi&oacute;n de Mayores y Enfermos
  • Misiones y Solidaridad
  • Pastoral Penitenciaria
    <h2>COORDINACIÓN Y COMUNIÓN</h2>
  • Comisión Económica
  • Agentes de Pastoral
  • Consejo Pastoral
    <h2>SERVICIOS</h2>
  • Ornamentación y limpieza de las iglesias

    </div>
    </div>
    <div id="areamenuder">
    <div id="areas"><h1>AREAS PASTORALES</h1>
    </div>
    <div id="menuder">
    <ul><h1>EDUCACIÓN EN LA FE</h1>
  • Catequesis Familiar
  • Pastoral con Jóvenes
  • Pastoral con Adultos
  • Pastoral Familiar
    <h2>CELEBRACIÓN DE LA FE Y LITURGIA </h2>
  • Comisi&oacute;n de Liturgia
  • Experiencia de oraci&oacute;n grupal
    <h2>SOCIO CARITATIVA </h2>
  • Cáritas
  • Comisi&oacute;n Social
  • Comisi&oacute;n de Mayores y Enfermos
  • Misiones y Solidaridad
  • Pastoral Penitenciaria
    <h2>COORDINACIÓN Y COMUNIÓN</h2>
  • Comisión Económica
  • Agentes de Pastoral
  • Consejo Pastoral
    <h2>SERVICIOS</h2>
  • Ornamentación y limpieza de las iglesias

    </div>
    </div>
    <div id="escritos"><h2>CÁRITAS</h2>


    C&aacute;ritas de la Unidad Pastoral se encuadra en el marco de esta organización de la Iglesia, y dentro de ella, en el espacio diocesano, asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>



    Para el logro de ese objetivo analiza la pobreza y sus causas, interviniendo en la realidad mediante, formación, sensibilización y denuncia, coordinando al voluntariado y participando en la red diocesana y zonal mediante diversas acciones:</p>




    - Acogida: atención y apoyo a personas y familias de la zona.</p>




    - Ropero: recogida de ropa para el programa de empleo de Cáritas Diocesana</p>




    - Comisión de inmigrantes: conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales.</p>




    - Forum sociocultural para personas mayores</p>



    - Participación en la red social de la zona.</p>
    </div>


    </div>
    <div id="pie">[contenido no disponible]
    [contenido no disponible][contenido no disponible]<a href="http://www.caritasvitoria.org/" target="_blank">[contenido no disponible]</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>
    .......................................................................................

    Espero esto le de una idea de como se pueden ir modificándo las capas y los contenidos

    Saludos
    • Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    Nada mas levantarme he visitado la pagian para ver si alguien me habia podido ayudar, GRACIASSSSS, probare todo lo dicho y os cuento.

    Me he dado cuenta que aunque lo iba haciendo poco a poco y solo con alguna ayuda que otra del foro, me quedaba bien pero no lo estaba construyendo bien del todo, claro al principio la web es sencilla, pero me van pididendo cosas y digo pongo esto o esto otro y la cosa se complica.

    Ya os cuento, que tal con esta SUPER AYUDA que me habeis dado.

    De nuevo GRACIAS

    Salu2,
    nosabernada · · Solicitar retirada
    Hola,

    la verdad es que los valores son los mismos que el de la izquierda solo que cambiandole la flotacion.

    Adios
    SANTA · · Solicitar retirada
    Esto es lo que he conseguido hasta ahora, pero asi como en IE6 se me ve bien en IE7 y en Firefox, no se ve nada bien, el menuder y el area del menuder se sale de la capa contenido.El ancho del areamenuder en la vistra previa se ve bien, pero al diseñarla en vez de coger 181px coge 404px de ancho. Y me imagino que mas cosas, no se ............ hay algo o muhco que nop ahgo bien y no soy capaz de verlo.

    Ayuda por favor.

    Ahh!!! y si esta pagina sera igual para muchas otras,

    Gracias,

    Os dejo los nuevos codigos

    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-Caritas</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
<style type="text/css">
<!--
.Estilo1 {color: #E2E2E2}
-->
</style>
</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="contenido2">
<div id="areamenuizq">
<div id="areas"><h1>AREAS PASTORALES</h1></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="areamenuder">
<div id="areas"><h1>ACTIVIDADES</h1></div>
<div id="menuder">
 <ul><h1>COMISIONES</h1>
[*] [url=""]Comisión de Acogida[/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] 
[/list]
 </div>
</div>
<div id="escritos"><h2>CÁRITAS</h2>


[url="http://www.caritasvitoria.org/"]C&aacute;ritas[/url] de la Unidad Pastoral se encuadra en  el marco  de esta  organización de la Iglesia, y dentro de ella, en el espacio diocesano, asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>



Para el logro de ese objetivo analiza la pobreza y sus causas, interviniendo en la realidad  mediante, formación, sensibilización y denuncia, coordinando al voluntariado y participando en la red diocesana y zonal mediante diversas acciones:</p>




- Acogida: atención y apoyo a personas y familias de la zona.</p>




- Ropero: recogida de ropa para el programa de empleo de Cáritas Diocesana</p>




- Comisión de inmigrantes: conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales.</p>




-[url="forum5070.html"] Forum sociocultural[/url] para personas mayores</p>
 


- Participación en la red social de la zona.</p>
</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:auto; 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}
#contenido5 {width:798px; height:680px; background-image: url(IMAGENES/fondonoticias.jpg); border-left: black 1px solid ; border-right: black 1px solid}
#contenido6 {width:798px; height:680px; background-image: url(IMAGENES/fondonavegacion.jpg); border-left: black 1px solid ; border-right: black 1px solid}

#areamenuizq{float:left;width:181px;height:680px;background-color:#FFC1C1}
#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}

#areamenuder{float:right;width:181px;height:680px;background-color:#915c27} 
#menuder {float:left;background-color:#FFFFFF; width: 180px; text-align:left; margin-top:10px; 
background-position: bottom ; padding-bottom:20px; margin-left:10px; margin-right:11px; border: gray 1px solid} 
#menuder li { list-style:none ; font-size:12px; margin: 4px 4px 4px 3px; line-height:14px; font-family:"Trebuchet MS",Helvetica,sans-serif} 
#menuder h1 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:black; font-family:Georgia, serif} 
#menuder h2 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:#000000; font-family:Georgia, serif} 

#escritos {background-color:#ffcc66;margin-left:185px;margin-right:185px;border-left:black 1px solid;border-right:black 1px solid;}
#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-top:10px; padding-left:25px; padding-right:30px}
#grupo2 {width: 200px; height: 150px; float:left; padding-top:10px; padding-left:30px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:25px; padding-top:30px; padding-right:30px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:30px; padding-left:30px}

#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

    GRACIAS DE NUEVO, POR TODA LA AYUDA QUE ME DAIS
    Raulyure · · Solicitar retirada
    SANTA escribió:Esto es lo que he conseguido hasta ahora, pero asi como en IE6 se me ve bien en IE7 y en Firefox, no se ve nada bien, el menuder y el area del menuder se sale de la capa contenido.El ancho del areamenuder en la vistra previa se ve bien, pero al diseñarla en vez de coger 181px coge 404px de ancho. Y me imagino que mas cosas, no se ............ hay algo o muhco que nop ahgo bien y no soy capaz de verlo.

    Ayuda por favor.

    Ahh!!! y si esta pagina sera igual para muchas otras,

    Gracias,

    Os dejo los nuevos codigos

    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-Caritas</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
<style type="text/css">
<!--
.Estilo1 {color: #E2E2E2}
-->
</style>
</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="contenido2">
<div id="areamenuizq">
<div id="areas"><h1>AREAS PASTORALES</h1></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="areamenuder">
<div id="areas"><h1>ACTIVIDADES</h1></div>
<div id="menuder">
 <ul><h1>COMISIONES</h1>
[*] [url=""]Comisión de Acogida[/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] 
[/list]
 </div>
</div>
<div id="escritos"><h2>CÁRITAS</h2>


[url="http://www.caritasvitoria.org/"]C&aacute;ritas[/url] de la Unidad Pastoral se encuadra en  el marco  de esta  organización de la Iglesia, y dentro de ella, en el espacio diocesano, asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>



Para el logro de ese objetivo analiza la pobreza y sus causas, interviniendo en la realidad  mediante, formación, sensibilización y denuncia, coordinando al voluntariado y participando en la red diocesana y zonal mediante diversas acciones:</p>




- Acogida: atención y apoyo a personas y familias de la zona.</p>




- Ropero: recogida de ropa para el programa de empleo de Cáritas Diocesana</p>




- Comisión de inmigrantes: conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales.</p>




-[url="forum5070.html"] Forum sociocultural[/url] para personas mayores</p>
 


- Participación en la red social de la zona.</p>
</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:auto; 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}
#contenido5 {width:798px; height:680px; background-image: url(IMAGENES/fondonoticias.jpg); border-left: black 1px solid ; border-right: black 1px solid}
#contenido6 {width:798px; height:680px; background-image: url(IMAGENES/fondonavegacion.jpg); border-left: black 1px solid ; border-right: black 1px solid}

#areamenuizq{float:left;width:181px;height:680px;background-color:#FFC1C1}
#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}

#areamenuder{float:right;width:181px;height:680px;background-color:#915c27} 
#menuder {float:left;background-color:#FFFFFF; width: 180px; text-align:left; margin-top:10px; 
background-position: bottom ; padding-bottom:20px; margin-left:10px; margin-right:11px; border: gray 1px solid} 
#menuder li { list-style:none ; font-size:12px; margin: 4px 4px 4px 3px; line-height:14px; font-family:"Trebuchet MS",Helvetica,sans-serif} 
#menuder h1 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:black; font-family:Georgia, serif} 
#menuder h2 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:#000000; font-family:Georgia, serif} 

#escritos {background-color:#ffcc66;margin-left:185px;margin-right:185px;border-left:black 1px solid;border-right:black 1px solid;}
#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-top:10px; padding-left:25px; padding-right:30px}
#grupo2 {width: 200px; height: 150px; float:left; padding-top:10px; padding-left:30px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:25px; padding-top:30px; padding-right:30px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:30px; padding-left:30px}

#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

    GRACIAS DE NUEVO, POR TODA LA AYUDA QUE ME DAIS

    Hola:

    Digamos que tenemos una capa contenido 2, y en esa capa queremos poner un menu a la izquierda y un menu a la derecha, y escribir por lo que queda del centro, sería seguramente más fácil, poner el menu de la izquierda, que flote a la izquierda y el menu de la derecha, que flote a la derecha, lógicamente cambiando uno o dos códigos y no habría ningún problema.

    Así el menu tanto de la izquierda como el de la derecha serían flotantes, y al centro se podría escribir lo que se quisiera, hasta se podría poner algunas imagenes en esa capa que iría al centro, pero se corre el riesgo de que es posible que si pone imagenes, estan desbarajusten los flotantes.

    Por esa razón, decidí, basándome en sus códigos, crear tres capas, no dos capas flotantes y que la del centro quedara como en el aire, sino tres capas, dos flotantes (las capas areamenu) y la del centro fija.
    así se puede uno evitar problemas , ya que las capas quedan individualmente definidas

    En este momento no tengo Internet Explorer 6, solo tengo Internet Explorer 7 y el Firefox.

    Y en las dos (por lo menos en mi ordenador) se ven casi iguales, por no decir iguales, claro que no las tengo subidas.

    Pero le diré algo.

    ¿Recuerda que le dije que en la página pusiera primero, dentro de la capa <div id="contenido-2"> la capa areamenuizq, con sus listas, y a continuación la capa areamenuder con sus listas y después la capa escritos?
    Muchas veces depende de cómo las pone uno para que se vean bien o no se vean bien.

    a lo mejor en su ordenador hay que poner la capa areamenuizq, luego la capa escrito y después la capa areamenuder.

    En todo caso, antes de que haga usted ese tipo de cambios para ver como le queda, le sugiero que en su hoja de estilo-general (como se lo dije en el spot anterior, usted después de definir las propiedades de la capa navegación , a continuación usted tiene definidas las "pseudoclases", o sea el grupo de las aes, quiero decir esto:

    #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}

    Pues todo eso, debe ponerlo al final de su hoja de estilo-general, no donde lo tiene ahora.

    también en la línea del asterisco (*) usted debe poner text-indent.0px, lo que pasa es que se habrá equivocado y ha puesto dos veces margin:0px;

    Acá le dejo como se ve la página con Firefox (con El IE 7 casi igual)

    [contenido no disponible]

    Ya nos dirá, yo haré otras pruebas para ver si es facible hacerlo de otra forma, aunque creo a mi entender que esta es la más adecuada para que la cpa area y la capa menu no anden dando vueltas

    Saludos
    Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    :cry:
    He cambiado lo del asterisco y lo de las aes,pero me sigue quedando todo igual,desplazado a la derecha.

    No se que hacer,

    Salu2, y gracias de nuevo.
    SANTA · · Solicitar retirada
    Al final no me quedo mas remedio que copiar y pegar todos los codigos de raulyure y luego modificar partes de la web y quedo mas o menos bien tengo que cambiar otras cosas.

    Ahora tengo otras preguntas, pero abro otro post para que me aconsejeis.

    MUCHAS GRACIAS, SOIS LO MEJOR