Foros del Web » Creando para Internet » CSS »

Ayuda con menu lateral y contenido

Estas en el tema de Ayuda con menu lateral y contenido en el foro de CSS en Foros del Web. Hola, Soy un principiante en esto de las CSS . Estoy haciendo una pagina basica para aprender que contiene una cabecera, un menu lateral izquierdo, ...
  #1 (permalink)  
Antiguo 07/10/2008, 12:26
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Ayuda con menu lateral y contenido

Hola,

Soy un principiante en esto de las CSS . Estoy haciendo una pagina basica para aprender que contiene una cabecera, un menu lateral izquierdo, una capa que tiene el contenido (a la derecha del menu) y un pie de pagina.

El problema esta en la CSS, (al menos eso creo). Quiero hacer que tanto el menu lateral izquierdo como su contenido (el cuadro azul), caigan hasta abajo de la pantalla del navegador, y que justo abajo de él se situe el pie de pagina. Usando magnitudes relativas (%).

En definitiva que el usuario pueda ver que la pagina ocupa todo el navegador.


La imagen de lo que he hecho lo podeis ver aqui: http://img215.imageshack.us/my.php?i...incipalir3.gif


El codigo del html es el siguiente:

Código:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
        <title>Untitled Document</title>
        <link rel="StyleSheet" href="estilos.css" type="text/css"/>
    </head>
    <body>
        <div id="contenedor">
            <div id="cabecera">
                <h2>Pagina de prueba</h2>
            </div>
            <div id="menu">
                <h2>Link1</h2>
                <h2>Link2</h2>
                <h2>Link3</h2>
                <h2>Link4</h2>
                <h2>Link5</h2>
               
            </div>
            <div id="contenido">
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 
	        </p>
            </div>
            <div id="pie">
                CopyRight
            </div>
        </div>
    </body>
</html>
El codigo CSS es el siguiente:

Código:
#contenedor {
 width:100%;
 height:100%;
}
#cabecera {
    background-color: silver;
    border: solid;
	text-align: center;	
	height:20%;
}
#menu {
    float: left;
    width: 15%;
    background-color: green;
	height:60%;
}
#contenido {
    float: right;
    width: 85%;
  background-color: #00ccff;
  height:60%;
}
#pie {
    clear: both;
    background-color: orange;
    border: solid;
    text-align: center;
	height:20%;
}

Gracias por anticipado.

Un saludo.
  #2 (permalink)  
Antiguo 07/10/2008, 12:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda con menu lateral y contenido

Hola Bladu:
Mikmoro tiene algunos ejemplos publicados para lograr ese efecto que pides.
Uno que puede servirte de guía es éste
Puedes consultar las faq´s para mayor información

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 07/10/2008, 12:53
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por kseso? Ver Mensaje
Hola Bladu:
Mikmoro tiene algunos ejemplos publicados para lograr ese efecto que pides.
Uno que puede servirte de guía es éste

Un saludo

Hola Kseso,


El link del ejemplo que has puesto no funciona.

Un saludo.
  #4 (permalink)  
Antiguo 07/10/2008, 13:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda con menu lateral y contenido

¿cual de los 2?
aaah, visto, araudi.net anda de inventario.
Pero bueno, copia el código que tiene Mikmoro en el enlace de las faq´s (ese si va), y mira a ver si es lo que precisas y después ya vemos más.
ok?
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 07/10/2008, 15:29
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Ya me he mirado el ejemplo, y lo he probado en el PC.

Pero aun asi para un novato como yo en esto, veo un poco complicado el ejemplo (el poder adaptarlo a pagina).¿No hay una manera mas simple de poder hacerlo?. Ademas mi idea es hacerlo con datos relativos (%) en vez de usar datos absolutos (pixeles)
  #6 (permalink)  
Antiguo 07/10/2008, 15:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por kseso? Ver Mensaje
¿cual de los 2?
aaah, visto, araudi.net anda de inventario.
Hola. El enlace va perfectamente, lo que pasa es que si se copia de algún otro sitio donde estaba insertado en el foro, lo más probable es que se copie parcialmente, como así ha ocurrido. El correcto es este:

http://www.araudi.net/forosdelweb/Co...uilibradas.zip

De todas maneras voy a volver a leer la consulta porque de primeras no la he entendido del todo.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 07/10/2008, 15:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por bladu Ver Mensaje
El problema esta en la CSS, (al menos eso creo). Quiero hacer que tanto el menu lateral izquierdo como su contenido (el cuadro azul), caigan hasta abajo de la pantalla del navegador, y que justo abajo de él se situe el pie de pagina. Usando magnitudes relativas (%).
Creo que para poder ayudarte tienes que ser más específico:

¿Que ambas columnas lleguen siempre hasta abajo?
¿sólo hasta abajo y nunca más largas, nunca superarán el alto de la página?
¿con unidades relativas te refieres a que ocupe el 100% de alto siempre?
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 07/10/2008, 15:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda con menu lateral y contenido

Bladu, creo que te debo una pequeña disculpa, fruto de las prisas cuando te coloqué los enlaces no advertí que ese código de Mikmoro no era exactamente lo que pensaba que era.
En cuanto tengo un momento buscaré, si no lo has hecho tú antes, aquí en el foro de css un ejemplo de dos columnas o tres, que aparentaban tener todas la misma altura con independencia del contenido.
La idea es la siguiente:
Al div principal le asignas un borde de anchura suficiente para posicionar sobre él (sobre el borde) el div o columna más estrecha, de manera que visualmente aparente que este segundo div tenga la misma altura que el principal.
Espero te sirva como base de trabajo, si tengo un rato busco el tema donde Mikmoro lo ha publicado, si antes no lo has hallado tú.
Un saludo

[lento escribiendo + lenta conexión= se llega tarde] No había visto Mikmoro estaba sobre la consulta
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 07/10/2008, 16:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

Seguramente hablarás de este, pero no recuerdo dónde está en el servidor para ver el ejemplo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Trivial</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor1 {width: 480px; border-left: solid 360px #4c9ab1;background-color: #82b04d;margin: 0 auto;color: #fff;
}
#contenedor2 {width: 850px;position: relative;left: -360px;overflow: auto;
}
.columna_izquierda {width: 300px;
float: left;
padding: 20px;
position: relative;
border-right: solid 20px #fff;
}
.columna_derecha {width: 420px;
margin-left: 340px;
padding: 20px;
position: relative;
border-left: solid 20px #fff;
}
</style>
</head>
<body>
<div id="contenedor1">
<div id="contenedor2">

<div class="columna_izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

<div class="columna_derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>
</div>
</body>
</html>
Bueno, como no sé dónde esta lo he vuelto a subir:

http://www.araudi.net/forosdelweb/co...as_1borde.html

Te referías a esto, ¿no, kseso?
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 07/10/2008, 16:17
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por Mikmoro Ver Mensaje
Creo que para poder ayudarte tienes que ser más específico:

¿Que ambas columnas lleguen siempre hasta abajo?
¿sólo hasta abajo y nunca más largas, nunca superarán el alto de la página?
¿con unidades relativas te refieres a que ocupe el 100% de alto siempre?
Hola MikMoro!

Probablemente no me he explicado bien.

Con que ambas columnas lleguen hasta abajo me refiero a que si el contenido tanto del menu izquierdo, como del contenido derecho no tiene la suficiente informacion como para que aparezca una barra de scroll en la parte derecha del navegador, dichas columnas lleguen hasta la parte inferior de la pantalla del navegador, teniendo en cuenta que debajo de las columnas siempre esta el pie de pagina y ese tambien hay que visualizarlo.

A unidades relativas me refiero usar los % en los atributos width, height, margin,... todo lo que no sea usar numeros de pixeles o cm para no depender de la resolución de la pantalla.

Un saludo
  #11 (permalink)  
Antiguo 07/10/2008, 16:18
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por kseso? Ver Mensaje
Bladu, creo que te debo una pequeña disculpa, fruto de las prisas cuando te coloqué los enlaces no advertí que ese código de Mikmoro no era exactamente lo que pensaba que era.
En cuanto tengo un momento buscaré, si no lo has hecho tú antes, aquí en el foro de css un ejemplo de dos columnas o tres, que aparentaban tener todas la misma altura con independencia del contenido.
La idea es la siguiente:
Al div principal le asignas un borde de anchura suficiente para posicionar sobre él (sobre el borde) el div o columna más estrecha, de manera que visualmente aparente que este segundo div tenga la misma altura que el principal.
Espero te sirva como base de trabajo, si tengo un rato busco el tema donde Mikmoro lo ha publicado, si antes no lo has hallado tú.
Un saludo

[lento escribiendo + lenta conexión= se llega tarde] No había visto Mikmoro estaba sobre la consulta

No te preocupes,

Agradezco tu interes en ayudarme con esta duda.

Un saludo
  #12 (permalink)  
Antiguo 07/10/2008, 16:21
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por Mikmoro Ver Mensaje
Seguramente hablarás de este, pero no recuerdo dónde está en el servidor para ver el ejemplo:



Bueno, como no sé dónde esta lo he vuelto a subir:

http://www.araudi.net/forosdelweb/co...as_1borde.html

Te referías a esto, ¿no, kseso?
La idea que he examinado de tu post el cual me ha referenciado kseso, era sea, soo que los estilos cambiando un poco.

Te los pongo aqui:

Código:
<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>
Un saludo
  #13 (permalink)  
Antiguo 07/10/2008, 16:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

Son las respuestas que imaginaba, más o menos. Esto tiene dos problemas: 1) necesitas que el pie siempre esté abajo y que baje cuando crezca el contenido, para lo que te puede servir este ejemplo:

http://www.araudi.net/ejemplos/pie_siempre_abajo.html

2) que ambas columnas crezcan a la vez cuando una de ellas lo haga, para lo que te sirve el ejemplo que te ha puesto kseso?

http://www.araudi.net/ejemplos/colum...ilibradas.html

o el último que te he puesto yo.

Ahora bien, si no tienes buenos conocimientos de css quizá te estás metiendo en un poco de jaleo, porque aunque lo que quieres hacer te parezca algo bastante simple, tiene más complicación de lo que parece.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 07/10/2008, 16:34
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por Mikmoro Ver Mensaje
Son las respuestas que imaginaba, más o menos. Esto tiene dos problemas: 1) necesitas que el pie siempre esté abajo y que baje cuando crezca el contenido, para lo que te puede servir este ejemplo:

http://www.araudi.net/ejemplos/pie_siempre_abajo.html

2) que ambas columnas crezcan a la vez cuando una de ellas lo haga, para lo que te sirve el ejemplo que te ha puesto kseso?

http://www.araudi.net/ejemplos/colum...ilibradas.html

o el último que te he puesto yo.

Ahora bien, si no tienes buenos conocimientos de css quizá te estás metiendo en un poco de jaleo, porque aunque lo que quieres hacer te parezca algo bastante simple, tiene más complicación de lo que parece.

Hola,

El primer ejemplo tiene tambien de AJAX , no? lo digo porque una vez vez desplegado el texto, cuando pulso el pie o la cabecera el texto se vuleve a plegar, yo de AJAX no tengo ni idea.

El 2 ejemplo es el que he estado probando el PC y el que he comentado que me parecia un poco complicado para mis conocimientos de CSS.

He estado buscando por la red y he dado con otra tecnica llamada "Falsas Columnas" pero no encuentro ningun ejemplo a modo del que hay en el segundo link. ¿es mas dificil que la tecnica que expones en el link que proporcionas?

No pense que algo tan "cotidiano" de ver en Internet iba a ser tan complicado.

Un saludo
  #15 (permalink)  
Antiguo 07/10/2008, 16:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

No, no es AJAX, es sólo CSS.

Y no tiene nada de cotidiano; con las especificaciones que buscas, es muy poco habitual verlo. Mira bien las que te parece que son iguales y usarán todo tipo de trucos javascript, o no se adaptarán al alto, o el pie no está abajo en cualquier resolución, o las columnas tiene alto fijo, ... en fin, que es muy muy poco habitual.

Mira esta solución conjunta

http://www.araudi.net/forosdelweb/pi..._conjunta.html

Pero como te he dicho, si el segundo ejemplo de antes te parece complicado, creo que te vas a meter en un berenjenal
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 07/10/2008, 17:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda con menu lateral y contenido

Bladu, date un pequeño respiro, pásate por aquí:
www.librosweb.es
Descárgate el .pdf sobre css y creo que te resultará más fácil comprender las soluciones de Mikmoro.
El suele verlas como algo evidente, pero no te asustes si para nosotros no lo son tanto, pues has ido a topar con un GENIO de css, que ya no necesita ni que le froten la lámpara.

Dale fuerte y con ganas a tu idea, que las hojas en cascada sólo es texto en lenguaje humano.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 07/10/2008, 17:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por kseso? Ver Mensaje
pues has ido a topar con un GENIO de css, que ya no necesita ni que le froten la lámpara.
Lástima no fuera cierto. Mal genio es lo que tengo, a chorros. Lo que pasa es que mi avatar puede leer el código que cae en vertical y ver lo está ocurriendo

Es cierto, es sólo texto y lenguaje semihumano, que merece la pena estudiar un poco.

(¿Quién dijo miedo? cómo me molan los retos)
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 08/10/2008, 02:14
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por Mikmoro Ver Mensaje
No, no es AJAX, es sólo CSS.

Y no tiene nada de cotidiano; con las especificaciones que buscas, es muy poco habitual verlo. Mira bien las que te parece que son iguales y usarán todo tipo de trucos javascript, o no se adaptarán al alto, o el pie no está abajo en cualquier resolución, o las columnas tiene alto fijo, ... en fin, que es muy muy poco habitual.

Mira esta solución conjunta

http://www.araudi.net/forosdelweb/pi..._conjunta.html

Pero como te he dicho, si el segundo ejemplo de antes te parece complicado, creo que te vas a meter en un berenjenal
No sabía que fuese algo ta raro lo que pido (aunque siendo un novato en esto.....) , tampoco tiene porque funcionar para todos los navegadores(si lo hace mejor :)), con que funcione para el Firefox me conformo.

La solución que propones me parece perfecta. Ahora lo complicado sera cogerle lógica.

Muchas gracias
  #19 (permalink)  
Antiguo 08/10/2008, 02:14
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por kseso? Ver Mensaje
Bladu, date un pequeño respiro, pásate por aquí:
www.librosweb.es
Descárgate el .pdf sobre css y creo que te resultará más fácil comprender las soluciones de Mikmoro.
El suele verlas como algo evidente, pero no te asustes si para nosotros no lo son tanto, pues has ido a topar con un GENIO de css, que ya no necesita ni que le froten la lámpara.

Dale fuerte y con ganas a tu idea, que las hojas en cascada sólo es texto en lenguaje humano.

Un saludo
Muchas gracias por los animos y por el aporte

Un saludo
  #20 (permalink)  
Antiguo 08/10/2008, 02:16
 
Fecha de Ingreso: mayo-2007
Mensajes: 222
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: Ayuda con menu lateral y contenido

Cita:
Iniciado por Mikmoro Ver Mensaje
Lástima no fuera cierto. Mal genio es lo que tengo, a chorros. Lo que pasa es que mi avatar puede leer el código que cae en vertical y ver lo está ocurriendo

Es cierto, es sólo texto y lenguaje semihumano, que merece la pena estudiar un poco.

(¿Quién dijo miedo? cómo me molan los retos)
Para mi si has echo lo que he pedido ayuda, genio no , DIOS

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:08.