Entrar

Menú lateral

abip · · Solicitar retirada
Hola, he encontrado vuestra web buscando por internet y me ha encantado, antes de nada enhorabuena. Estoy leyendo y a la vez haciendo el curso de como crear tu web paso a paso y la verdad es que estoy aprendiendo muchísimo. Pero claro con el aprendizaje llegan las dudas, je je je. y mi primera y seguro que no la última es, como hacer para que el menú lateral se quede fijo y ocupe todo lo que ocupa el contendio, no sé si me he explicado bien. El caso es que quiero que el menú lateral llegue hasta el pie desde la cabecera.
Igual me he enrollado demasiado, de nuevo enhorabuena por la web y gracias por leerme.


Salduos.-
abip · · Solicitar retirada
Estoy usando HTML-kit y DreamWeaver para ir aprendiendo con los dos.
codomodragon · · Solicitar retirada
Haber tu lo que quieres es hacer que el menú ocupe toda la esquina inferior asta el pie sin importar lo ancho que sea la paca contenido.

Bueno para eso solo debes editar el height del estilo del menú y poner height: 100%, esto debería hacer que el menú ocupe el 100% de la capa sin importar el ancho de la capa contenido.

PD: solo 97+ post para el fin del mundo
codomodragon · · Solicitar retirada
Pero no es por llevar la contraria pero con divs no es mas fácil .-.?

PD: solo 96+ post para el fin del mundo :twisted:
Yaneth · · Solicitar retirada
si, con divs es mucho mas facil, para algunas cosas

pero el quiere poner dos divs con la misma altura..
seria ponerle una altura fija (eso haría yo)

pero, al poner altura fija, el contenido debe quedar dentro....

al hacerlo con tablas, ambas celdas irán creciendo a la par
al ponerle mas o menos contenido a alguna de las dos celdas

saludos
codomodragon · · Solicitar retirada
mmmmm....

pero si pongo un div madre que contenga el contenido y el menú, y asta capa madre solo le coloco el width y el height lo pongo en auto, y al menú le pongo height 100% y al contenido height: auto, debería hacer que a medida que crezca el contenido el menú también crezca.

A mi parecer son menos códigos y mas limpios, no se digo yo .-.

PD: solo 95+ post para el fin del mundo :twisted:
Yaneth · · Solicitar retirada
ooorale... no lo he intentado asi......

si funciona te lo agradesco yo tambien jajaja
que hace dias estuve sufriendo con este tema

jeje

saludos
abip · · Solicitar retirada
Gracias por las explicaciones. Lo voy a intentar de las dos formas y ya os contaré, aunque creo que es más fácil con div....
ricky · · Solicitar retirada
codomodragon escribió:mmmmm....

pero si pongo un div madre que contenga el contenido y el menú, y asta capa madre solo le coloco el width y el height lo pongo en auto, y al menú le pongo height 100% y al contenido height: auto, debería hacer que a medida que crezca el contenido el menú también crezca.
pues no creo que se pueda, decirle a un menu que vaya creciendo, si se hiciere,te imaginas el descuadre de un menu con 10 o 15 items, con una altura igual a la de la pagina que sea el total que se yo de 80 o 100 lineas?,
(ahora que funcione en todos los navegadores, seria un parto)
yo lo q creo (si entendi la pregunta) es q con divs pues hacer el del contenido con una altura fija igual al menu y cuidar que el texto no sobrepase esa altura, igual si es lo que quiere porque para que mas quieres un menu que sea el que determine la altura, y si el texto es mas largo meterlo en una caja,
codomodragon · · Solicitar retirada
haver haver creo que no entendiste lo que digo,

No meto nada en cajas ni defino contenido, solo le digo que se adapte a lo que venga, esto hace que no importa el explorador que se vea el menú se cuadrara automáticamente según el tamaño de los items del menu o de los items del contenido, la capa madre solo evita que se de descuadre todo.

A esto si mal no me equivoco se le llama css dinámico por que cambia según el caso.


PD: solo 94+ post para el din del mundo :twisted:
ricky · · Solicitar retirada
que si te entiendo hombre y eso no anda, en cuanto a las paginas dinamicas son para adaptars a las resoluciones de pantalla.

mira hice lo que dices:

html:


<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">

</head>
<body>
<div id="mayor">
<div id="logo"><p class="l">logo</p></logo></div>
<div id="madre">
<div id="menu">menu</div>
<div id="contenido">empieza el contenido
luego bajo
sigo bajando
y el menu se quedo amigo comododragon
</div>
</div>
<div id="pie"><p class="l">pie</p></div>
</div>

</body>
</html>


css:
*{text-indent:0px;margin:0px;padding:0px;bortder:0px}

body{background-color:black;text-align:center}
#mayor{background-color:silver;width:900px;margin:50px auto}
#logo{background-color:white;height:100px}
#madre{width:800px;height:auto;background-color:yellow}
#menu{background-color:red;width:150px;height:100%;float:left}
#contenido{background-color:pink;float:right;width:650px;height:auto}
#pie{background-color:white;height:100px}
.l{text-align:left}

mirala subida: http://pruebaformulario.netau.net/
y ni se te ocurra verla en chrome!!!
ricky · · Solicitar retirada
yo habia puesto un tema parecido http://www.comocreartuweb.com/phpBB2/ftopic26290.html&highlight=
la solucion es usar la capa fondo en este caso "madre" y agregarle el color del menu o ponerle una imagen en left bottom para crear el efecto del menu expandible,
de hecho en esto dias baje una plantilla y asi lo hacen con la imagen grande del basketbolista mirala: http://www.freewebsitetemplates.com/preview/basketball/ ahi a medida que el contenido baje, la imagen tambien lo hace dando el efeceto qu es el menu cuando en realidad es el fondo.
codomodragon · · Solicitar retirada
Analizando un poco mas los códigos el error ya lo encontré, se me Abia olvidado el echo de que la propiedad auto no funciona bien junto con la propiedad 100% ya que auto no definirá el tamaño de la propiedad 100% si no a la inversa.

En su lugar lo que ise es ponerle a la capa madre un height y ponerle a las capas contenido y menú la propiedad height 100%, con esto tanto el menú como la capa contenido su tamaño queda definido por la capa madre, pero aun no encuentro una forma de hacer que se adapte a el tamaño de la capa contenido.

Códigos

html

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo1.css" type="text/css" media="all">

</head>
<body>
<div id="mayor">
<div id="logo"><p class="l">logo</p></logo></div>
<div id="madre">
<div id="menu">menu</div>
<div id="contenido">empieza el contenido
 luego bajo
sigo bajando
y el menu se quedo amigo comododragon
</div>
</div>
<div id="pie"><p class="l">pie</p></div>
</div>

</body>
</html>

Css
*{text-indent:0px;margin:0px;padding:0px;bortder:0px}

body{background-color:black;text-align:center}
#mayor{background-color:silver;width:900px;margin:50px auto}
#logo{background-color:white;height:100px}
#madre{width:800px;height:100px;background-color:yellow}
#menu{background-color:red;width:150px;height:100%;float:left}
#contenido{background-color:pink;width:650px;height:100%;float:left}
#pie{background-color:white;height:100px}
.l{text-align:left}


Jeje esto fue un pequeño olvido,
Vamos todos nos podemos equivocar xD
PD: tu solución no va al caso ya que el menú y el contenido deben tener las mismas dimisiones, ahora dime que pasa si el menú debe ser curvado en la cabeza y en el final no puedes agregar eso en el fondo de esta manera si es posible y si se usa una plantilla de combinada con php nuke se lograría cambiar el css
ricky · · Solicitar retirada
no te preocupes que no hago esto para decir que te equivocas sino para aprender y sobre todo debatir un poco,
la solucion que das no aporta mucho :wink:
le ponemos altura de 100px a las tres capas y listo!!! queda mas erroneo aun porque no podre escribir entonces texto que supere a esos 100px (quedamos igual pero de otra forma a como esta quien empezo el post)y las alturas ninguna capa se las da a otras simplemente cada cual las tiene definidas,
mira creeme los profesionales usan el efecto que te dije arriba, es simple, limpio y sin mayor complique
ricky · · Solicitar retirada
codomodragon escribió:PD: tu solución no va al caso ya que el menú y el contenido deben tener las mismas dimisiones, ahora dime que pasa si el menú debe ser curvado en la cabeza y en el final no puedes agregar eso en el fondo de esta manera si es posible y si se usa una plantilla de combinada con php nuke se lograría cambiar el css
1.(creo que por dimisiones te refieres a dimensiones) en lo que yo hice no puse ni una sola altura, fuiste tu quien salio con el height:100px :shock:
2.estamos hablando de este caso y aun no lo resolvemos, no hagas suposiciones.
3.estamos ayudando a alguien que apenas empieza no te metas con el php.
4. si el menu debe ser curvado arriba , pues le pones la imagen de fondo a la capa menu en la parte de arriba y q no se repita :roll:
codomodragon · · Solicitar retirada
Haber ese efecto que dices lo uso yo en mi pagina ( revísala bien xD) pero en este caso que el menú debe ser exactamente del mismo tamaño que el contenido en todos y cada uno de los casos, pues no funciona. Ya que no es el menú lo que vez si no la capa madre.

Investigue un poco y lo mejor en este caso es usar tablas como dijo Yaneth, ya que no hay un código con simple css que aumente dos capas de = manera según el contenido.

Seguiré investigando pero no hay de otra.

PD: no puedes poner tres imágenes seguidas amigo, recuerda la curva superior, curva inferior, y centro :roll: .
PD2 no hagas Flood ¬_¬ ( mensajes seguidos) eso ya párese spam ¬_¬
Yaneth · · Solicitar retirada
a eso me referia
y con tablas pues realmente no es mucho codigo
seria algo asi

<table>
<tr>
<td valign="top">menu</td><td>contenido</td>
</tr>
</table

si aumenta menu, automaticamente aumenta contenido, y visebersa (se escribira asi?)

solo se le dan las caracteristicas en css de ancho de tabla, de menu y de contenido

y agregarle valign="top" para que el texto de la celda que tenga contenido menor no se centre

para mi es lo mas simple, aunque aprender codigos y ordenes nuevas no nos viene mal a nadie

saludos y seguro que nuestro compañero, queda´ra mas que satisfecho con tantas opciones jeje

saludos
ricky · · Solicitar retirada
Yaneth escribió:para mi es lo mas simple, aunque aprender codigos y ordenes nuevas no nos viene mal a nadie

saludos y seguro que nuestro compañero, queda´ra mas que satisfecho con tantas opciones jeje

saludos

todo cierto, aunque quien pregunta esta haciendo el curso con divs, pues yo me enfoque en ayudarle con divs, yo tambien tendre que aprender tablas son ideales para eso en estos dias estuve viendo paginas q les enseñan en un colegio de mi zona con tablas y esa es la base siempre un menu lateral permanente y un contenido por el cual navegar, y en internet las pocas q quedan en tablas trabajan en el mismo principio.

en cuanto a comododragon, vaya! estoy notando q eres una persona antipatica que siempre quiere tener la razon, aprende a escuchar en este caso leer y no te tomes todo personal, que es eso de no se que = spam? esto es un foro viejo, donde se participa pareces un niño que dice "callate yo tengo la ultima palabra", y porque me mandas a ver tu pagina de esa forma?
es simple lo q usted dijo no sirve, lo que yo propuse soluciona un poco y la solucion con tablas de yaneth es la ideal y mas facil aunque no se hasta que punto sea practica.
Yaneth · · Solicitar retirada
hola

la finalidad de todos aqui, es ayudar,
cada uno lo hace en base a su experiencia y conocimientos

todas las opciones son validas, quien toma la ultima palabra al utilizar una u otra es quien pregunta....

animo chicos, a seguir ayudando, que esto aun no termina

jeje

un abrazo a todos
ricky · · Solicitar retirada
saludos yaneth y este es el ultimo "FLOOD = SPAM " que hago en este post,

y esa es la intencion participar y ayudar. :wink: :wink:
codomodragon · · Solicitar retirada
Haber haber el único que se toma las cosas personales eres tu yo siempre e esta do intentando que todos cumplan las normas en el foro y el flood es postear dos beses seguidas, eso es para aumentar el numero de post y es una forma muy poco atractiva al decir algo, si te fijas lo hiciste seguido.

Yo me fije que si, mi solución no funciona perfecta y por eso dije que mejor es usar la que dijo Yaneth por eso lo dije.

Y el único que dijo que algo no servia eres tu, quien ofendió, quien se altero, quien se dio de que yo se mas que los demás y tengo la potestad deducir que algo no sirve? no fui yo, aparte e sido respetuoso en todo momento y asta acepte que my solución no funciona.

Por favor deja de tomarte las cosas personales estamos para ayudar, no para decir que el trabajo de alguien no sirve.