Entrar

CONSEJOS PARA AMPLIACION DEL MENU LATERAL IZQUIERDO

SANTA · · Solicitar retirada
Hola, ya temine el curso y la verdad es que los primeros pasos no me han quedado mal, tengo una primera pregunta.

Como me aconsejais que haga para ampliar el menu lateral izquierdo? He intentado, copiar y pegar la lista del div menu con el titulo, pero claro al haber puesto en la hoja de estilos que el menu h1 incluya la imagen de la curva, no me sale bien.

Cual es la mejor manera de hacerlo??

Quiero ampliar 5 secciones mas como la que ya tengo, de moento con los mismos colores del titulo y los enlaces.

Graicas de antemano, os pego parte de los codigos

<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][/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>
 <h2>Tercer Parrafo</h2>
 

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>
 </div>

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: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width: 800px ; margin: 4px auto }
#curva-superior { background-image: url(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 {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 }
#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
Yaneth · · Solicitar retirada
mmm


ampliarlo hacia abajo????????

pues simplemente le vas escribiendo mas
y solito se amplia

es eso???'

o no entendi????
Raulyure · · Solicitar retirada
SANTA escribió:Hola, ya temine el curso y la verdad es que los primeros pasos no me han quedado mal, tengo una primera pregunta.

Como me aconsejais que haga para ampliar el menu lateral izquierdo? He intentado, copiar y pegar la lista del div menu con el titulo, pero claro al haber puesto en la hoja de estilos que el menu h1 incluya la imagen de la curva, no me sale bien.

Cual es la mejor manera de hacerlo??

Quiero ampliar 5 secciones mas como la que ya tengo, de moento con los mismos colores del titulo y los enlaces.



Hola:
Como le dijo Yaneth, si usted pone mas enlaces hacia abajo, el menú se irá alargándo hasta un tope, por ejemplo, usted tiene una capa que se llama menu que mide 150px de ancho pero que no tiene una altura definida, al no tener una altura definida, se puede seguir escribíendo o alargando la lista .
Ahora bien, en esa capa usted tiene puesta encima (arriba otra capa, que se llama menu h1, esa capa menu h1 mide de ancho 150px y de alto 30px que es el ancho de esa curva superior del menu, luego dentro de la capa menu, usted ha puesto una imagen que mide 150px de ancho (ya ve que miden lo mismo que el ancho de la capa), esa imagen está puesta dentro de la capa menu y mide 400píxeles de alto, así que cuando usted pone allí una lista, la capa junto con la imagen se van alargando, hasta llegar al tope de 400 píxeles de alto, seguramente le cabrán unos diez enlaces mas o menos.
Resumiendo el menu lateral se compone de una capa que se llama menu h1 que sería la tapa o cubierta de la capa menu, luego está la capa menu, y dentro de la capa menu está la imagen que que es la curva de abajo del menu.
A lo mejor lo que usted quiere hacer es otro menu debajo de el menu lateral .
En la seccion de Preguntas Frecuentes en este mismo foro creo hay una explicación de como hacerlo
Saludos
Agradecido de los que aprenden enseñando
SANTA · · Solicitar retirada
Efectivamente veo que lo mejor es ir poniendo enlaces, y la capa se va ir alargando, eso ponia en el curso. Vale eso hare, pero..........

La gran pregunta es?? Si quiero poner esto..

un enlace mas
un enlace mas

Estamos de acuerdo en que la mejor manera de hacerlo es escribiendo enlaces uno debajo de otro dentro de la lista.
Y si quiero poner esto?

Otro Titulo igual que el que puse en el codigo anterior, Quedando asi

Otro Titulo
un enlace mas
un enlace mas

Ese titulo, lo escribo sin mas?? O como lo hago??

Gracias,
Raulyure · · Solicitar retirada
SANTA escribió:Efectivamente veo que lo mejor es ir poniendo enlaces, y la capa se va ir alargando, eso ponia en el curso. Vale eso hare, pero..........

La gran pregunta es?? Si quiero poner esto..

un enlace mas
un enlace mas

Estamos de acuerdo en que la mejor manera de hacerlo es escribiendo enlaces uno debajo de otro dentro de la lista.
Y si quiero poner esto?

Otro Titulo igual que el que puse en el codigo anterior, Quedando asi

Otro Titulo
un enlace mas
un enlace mas

Ese titulo, lo escribo sin mas?? O como lo hago??

Gracias,


Hola:
Una , y digo una, porque en este momento neo me ecuerdo bien de las otras maneras sería más o menos así

<div id="menu">
<h1>Paises</h1>
<ul>
  • Rusia
  • febrero
  • marzo
  • abril
  • China
  • uno
  • dos
  • tres
  • India
  • rojo
  • verde
  • azul
  • blanco

    </div>

    En todo caso esto es solo una de tantas ideas de como podría hacerlo, hay otras un poco más elaboradas
    Saludos
    • Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    OK, he empezado ha realizar eso como me dijiste, pero en cuanto he metido 3 enlaces mas, el pie de pagina se ha vuelto loco.

    Creo que asi como el menu se va haciendo mas grande, la capa contenido no lo hace y al finalizar lo escrito el pie de pagina se mete dentro de esas lineas y se me descuadra todo.

    Puedes o podeis indicarme como corregir ese problema.

    Gracias de nuevo.

    Uff es mas comlicado de lo que parece :-)
    Raulyure · · Solicitar retirada
    SANTA escribió:OK, he empezado ha realizar eso como me dijiste, pero en cuanto he metido 3 enlaces mas, el pie de pagina se ha vuelto loco.

    Creo que asi como el menu se va haciendo mas grande, la capa contenido no lo hace y al finalizar lo escrito el pie de pagina se mete dentro de esas lineas y se me descuadra todo.

    Puedes o podeis indicarme como corregir ese problema.

    Gracias de nuevo.

    Uff es mas comlicado de lo que parece :-)

    Hola:
    No estoy muy seguro, pero puede que sea lo que le digo.
    Mirándo sus códigos que ha puesto, veo que en la hoja de estilo usted a la capa contenido no le ha puesto ningún ancho.
    En el curso se explica que en principio, solo en principio a la capa contenido hay que ponerle un ancho de width:800px y que flota a la izquierda o sea un float:left
    ¿Porqué en principio?
    Porque así esa capa se podía "fijar" y de esa manera la capa menú podía ponerse donde debía quedar, pero luego de que la capa menú ya estuviese puesta en su debido lugar con su width:150px etc. etc. etc.
    y a la vez que en la capa contenido se le hubiese puesto más texto.
    Entonces ese ancho de 800 píxeles y ese float:left que se le puso en principio a la capa contenido, había que eliminarlos y poner solamente width:auto
    Eso lo explica el Curso Paso a Paso. Es como cuando usted quiere juntar dos hojas de papel, y para que queden bien puestas, les pone un clip, pues cuandodo ya están bien y usted ha escrito en esas hojas lo que tenía que escribir, entonces ya no necesita que sigan teniéndo ese clip.

    Pruebe poniéndole a la capa contenido ese width:auto
    Yanos dirá
    Saludos
    Agradecido de los que aprenden enseñando
    Raulyure · · Solicitar retirada
    SANTA escribió:OK, he empezado ha realizar eso como me dijiste, pero en cuanto he metido 3 enlaces mas, el pie de pagina se ha vuelto loco.

    Creo que asi como el menu se va haciendo mas grande, la capa contenido no lo hace y al finalizar lo escrito el pie de pagina se mete dentro de esas lineas y se me descuadra todo.

    Puedes o podeis indicarme como corregir ese problema.

    Gracias de nuevo.

    Uff es mas comlicado de lo que parece :-)

    Hola:
    Fuera de lo que le dije anteriormente, uno debe entender que en muchas ocasiones, ( y no lo tome a título personal) las sugerencias que doy y seguramente muchos de los compañeros que hay acá, también lo hacen, es que hay preguntas que con una sola respuesta, el problema se arregla, pero hay otras, que necesitan dos o tres, o más sugerencias para que el problema se arregle, lo que usted desea hacer, está bien, pero requiere por lo menos tres sugerencias,
    La primera, es la que le dije de qué forma podía hacer usted un menu lateral que tuviese títulos de por medio, usted respondió diciéndo que lo había hecho, pero que pasaba esto o esto otro, pues en ese mismo mensaje en que usted me decía eso, lo que tenía que haber puesto a continuación eran otra vez los códigos para que yo viera como lo estaba haciendo, y así darle la siguiente sugerencia.
    Con la siguiente sugerencia usted habría hecho las modificaciones correspondientes y otra vez las tenía que haber puesto en un mensaje de acá mismo, hasta haber puesto su página como usted quería
    Esto que digo, si sirve para los que lo lean , espero que lo tengan en cuenta, porque para mí a veces es muy difícil adivinar lo que la persona está haciéndo, por eso se necesitan los códigos, tanto los de las hojas de estilos como los de las páginas, porque uno coge esos códigos, (por lo menos yo lo hago), y con esos códigos uno hace una página, en el ordenador, la prueba, ve los posibles fallos que pueda tener y si le falta algo se arregla poco a poco hasta que va quedando bien , y así cuando vamos dando respuestas a medida que nos van poniéndo lo que van haciéndo, entonces nosotros podemos "jugar" un poco con los códigos y vamos adelantando en el proceso
    Como es posible que usted siga teniéndo algún problema para hacer lo que quiere en ese menu lateral, le dejaré todos los códigos de una página normal basada en el curso y le dejaré también los códigos de la correspondiente hoja de estilo.
    Allí se dará cuenta usted que para lo que usted quiere, había que hacer una serie de modificaciones, pero había que ir de a poco.

    Estos son los códigos de la página

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>..::Generaciones::..</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">[contenido no disponible]</div>
    <div id="publicidad">Publicidad</div>
    </div>
    <div id="navegacion">
    <ul>
  • Seccion 1
  • Seccion 2
  • Seccion 3
  • Seccion 4
  • Contactos

    </div>
    <div id="contenido">

    <div id="menu">
    <h1>..::Secciones de menu::..</h1>
    <ul>
  • Foros
  • Registrate
  • Aportes
  • Descargas
  • Otros
  • <h2>Otras Secciones</h2>
  • Sandias
  • Melones
  • Peras
  • Cerezas
  • Sandias
  • <h2>Otras Secciones</h2>
  • Melones
  • Peras
  • Cerezas
  • Calabazas
  • Manzanas


    </div>
    <h1>Para Pensar</h1>


    En el campo de Generaciones, entran unos cuantos proyectos.</p>

    <h2>Conoci&eacute;ndo</h2>


    Nuestras Conocimientos son fundamentales, pero si no van acompañados de buenos argumentos son totalmente vacíos, al igual que el que estudia pero que jamás ha practicado lo que aprendió, por lo tanto no sabe nada.</p>
    <h3>Acerca de Generaciones y Nosotros</h3>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla b</p>


    bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla b</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bl</p>


    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
    </div>
    <div id="pie">
    <div id="pieuno">Copyright © 2008 Generaciones
    </div>
    <div id="piedos">Powered by: Usted::mailto:[correo eliminado]</div>

    </div>
    <div id="curva-inferior"></div>
    </div>

    </body>
    </html>


    Y estos son los de la hoja de estilo

    *{text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align:justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size:1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {text-align:center;background-color:#FFE4B5;}


    #global {width:800px;margin:4px auto }

    #curva-superior { background-image: url(objetos/curva-superior.gif.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #cabecera {border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #publicidad {width:518px ;float:right ; margin-top:25px ; font-size: 16px }
    #logotipo {width:280px ; float:left }
    #navegacion {border: black 1px solid ; height:25px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 160px }
    #contenido {width:auto;border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {padding:5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: #2f2e2e ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px;line-height:0.9em }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior-1.gif) }
    #menu h2{text-decoration:none;font-size:12px;}
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 30px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:399px }
    #piedos {float:left ; width:399px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }

    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #menu li a{color:green;text-decoration:none;display:normal}
    #menu li a:link{}
    #menu li a:visited{}
    #menu li a:hover{text-decoration:none;color:yellow}
    #menu li a:active{background-color:red}


    Fíjese que a los otros títulos, no al del h1, si no los que separan los enlaces les he puesto un h2, en la página.
    Y en la hoja de estilo he creado un #menu h2 y le he dado unas propiedades y unos valores.
    Y para que pudieran caber todos esos enlaces en ese menu, he rebajado la distancia que hay entre línea y línea también en la hoja de estilo, allí donde dice #menu li{etc.etc.etc.}, con una propiedad que se llama line-height y le di un valor, que fuese menor que el normal.

    ¿Se da cuenta que no era tan fácil? ¿Que había que ir de a poco modificándo algunas cosas?.
    Espero que le saque provecho
    Y si tiene alguna duda , ya sabe ....Pregunte
    Pero cuando la haga , aproveche de poner los códigos si es que es necesario
    Si me he equivocado en algo (algún código que se me haya quedado colgado) al pegarlos acá , ya lo iremos viéndo
    Saludos
    • Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    Muchisimas gracias, acabo de leer las respuestas, probare todo lo espuesto hoy o mañana. Ya comentare como me va quedando y las dudas que van surgiendo.

    De nuevo Gracias
    Raulyure · · Solicitar retirada
    SANTA escribió:Muchisimas gracias, acabo de leer las respuestas, probare todo lo espuesto hoy o mañana. Ya comentare como me va quedando y las dudas que van surgiendo.

    De nuevo Gracias

    Hola:
    Espero que le sirvan
    saludos
    Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    :(
    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.

    Hice lo de width: auto, pero no salio bien, ¿eso no es para el anch 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 si que segun escrbio 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}
    SANTA · · Solicitar retirada
    El problema de que no bajara la capa contenido soluccionado, al ponerle una altura de 600. height: 600px a la capa contenido
    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: 
    #contenido {width:auto; height: 600px; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}
    Raulyure · · Solicitar retirada
    SANTA escribió:El problema de que no bajara la capa contenido soluccionado, al ponerle una altura de 600. height: 600px a la capa contenido
    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: 
    #contenido {width:auto; height: 600px; background-color: white; border-left: black 1px solid ; border-right: black 1px solid}

    Hola:
    Bueno, eso es una solución, y está muy bien que vaya viendo las distintas formas de acomodar capas y lo que hay que hacer para que estas queden bien, pero le daré una idea de como funcionan las capas a las que no sel pone un height.
    Cuando usted en la hoja de estilo pone por ejemplo #navegacion{background-color:yellow} y nada más, y luego va a su página html y pone <div id="navegacion"></div>
    Luego cuando haga vista previa, verá que esa capa navegacion, no existe.
    En realidad si existe, pero como usted no le ha escrito nada, ni ha puesto una imagen, ni tan siquiera un punto, esa capa navegacion es solo una linea continua, como si fuese un borde, en el momento que usted le ponga por ejemplo en su pagina a esa capa navegacion tan solo un punto (.) , esa capa va a aparecer a todo lo ancho y dentro podrá ver ese punto de color negro.
    Bien, ahora hagamos cuenta de que usted a esa capa navegacion , no le pone ese punto, pero va a la hoja de estilo , y en la capa navegacion le incluye una altura, por ejemplo:
    #navegacion{background-color:yellow;height:20px}, sale de la capa estilo y va a su página, y entonces verá que si aparece esa capa navegacion.
    Resumiendo
    Toda capa a la que no le haya puesto un valor de altura por lo menos, no se verá a menos que en la pagina se le escriba algo.
    Si usted no le pone altura a esa capa en la hoja de estilo, pero en su pagina escribe un poco de texto en esa capa, esa capa va a coger la altura que ocupa ese texto nada más, ahora si usted escribe más texto cosa de que sobrepase la anchura de esa capa, ese texto seguirá a continuacion en una línea por abajo, haciéndo que la capa se vaya alargándo a medida que le va poniéndo texto o imágenes etc.
    Resumo otra vez:
    Las capas suelen ocupar a la vez, solo lo que ocupa el contenido que le pone, a menos claro que a esa capa le haya puesto una altura definida en la hoja de estilo.
    Esta es una explicación en términos generales nada más para que se haga una idea de como funcionan las capas.
    Aunque para lo que usted dice que desea poner en la capa contenido, (y solo es mi opinión personal), yo crearía otra capadentro de la capa contenido, y que quede al lado derecho de la capa menu, por los posibles problemas que puedan cusar las imágenes y más capas que ponga allí. Así minimizaría posibles problemas posteriores, ya que la capa contenido tendría en este caso dentro de ella dos capas, la capa menu a la izquierda y la capa otrascosas a la derecha, por ejemplo:
    #contenido{etc etc etc}
    #menu{150px de ancho margin:3px 0px 0px 0px;border-right:black 1px solid;}, cosa de que quede pegada a la izquierda de la capa contenido
    #menu li{etc etc etc }
    #menu ul{etc etc etc }
    #otrascosas{etc etc etc margin-top:3px;margin-left:153px}
    #otrascosas p{text-indent:15px;padding:4px 3px 3px 3px}

    Eso significa que dentro de la capa contenido, tengo una capa menu que mide de ancho 150px, con un borde de 1px por su lado derecho y como la capa contenido tiene un borde de un píxel por el lado izquierdo, eso sumaría 152px, por eso al crear la capa otrascosas, le he puesto un margen izquierdo de 153 px , pueden ser 152 o 180 o lo que uno estime cosa de que sean diferentes capas, así cuando ponga imagenes, capas texto en la capa otrascosas, no va a molestar la capa menu.
    Tampoco es llegar y hacerlo, porque hay que complementar las tres capas, esto que le digo es solo un ejemplo muy, pero muy sencillo de como se podría hacer. Las medidas que doy en el ejemplo solo son aproximativas y faltan otras cosas, ya que por ejemplo habrúia quezás que ponerle a la capa pie , en la hoja de estilo (donde van las directivas de la capa pie) un clear:both para que la capa pie no permita que se ponga nada a su lado, cosa que uno visualmewnte cree que es al revés al ver que la capapie se "sube" o se queda a un costado de otra capa.
    Poco a poco irá entendiendo muchas cosas.
    Saludos
    Saludos
    Agradecido de los que aprenden enseñando
    SANTA · · Solicitar retirada
    He estado enfermo y me estoy recuperando, va.... solo una gripee


    Gracias, por la ayuda e ire puliendo y aprendiendo de sus consejos.
    Raulyure · · Solicitar retirada
    SANTA escribió:He estado enfermo y me estoy recuperando, va.... solo una gripee


    Gracias, por la ayuda e ire puliendo y aprendiendo de sus consejos.

    Hola:
    No se preocupe que ya somos dos, ¡estos virus!, les dije que este año no me visitaran, pero no me han hecho ningún caso, (hablo de los de la gripe, no los del ordenador)
    Vaya tranquilo y mejórese.
    Saludos
    Agradecido de los que aprenden enseñando
    Yaneth · · Solicitar retirada
    pues......a mi los del ordenador


    ME COMEEEEEEEEEEEEEN

    he tenido que formatear mi pc, yyyyy perdùi tooooood

    tal ves algun dia aprenda la leccion

    :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:
    Raulyure · · Solicitar retirada
    Yaneth escribió:pues......a mi los del ordenador


    ME COMEEEEEEEEEEEEEN

    he tenido que formatear mi pc, yyyyy perdùi tooooood

    tal ves algun dia aprenda la leccion

    :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

    Hola:
    Por acá dicen que el que no camina, no se cae, lo que pasa que hurgueteamos mucho en ellos.
    El mío lleva veinticinco días en la sala de urgencias, más casi casi fallecido,
    Le han cambiado la fuente de alimentación y nada, le han cambiado la placa base, y nada, ahora creo que le van a cambiar el microchip, por si es ese el problema y ya veremos, y me han tenido que prestar uno tan viejo como el mío, y como el sistema operativo del que me prestaron no es original, a medida que van avanzándo los días, Microsoft le va quitándo funciones.
    Así que No estás sola
    Saludos