Menu en acordeon + CSS

Master_0n3 #1 Mar '10

Buenas, tengo un problema q no consigo solucionar y buscando no he encontrado nada relacionado:

Tengo el siguiente codigo en HTML:

<ul id="menu">
<li>
<a href="#">Principal</a>
<ul>
<li><a href="index.php">Indice general</a></li>
<li><a href="carta_presidenta.html">Carta de la presidenta</a></li>
<li><a href="habla_con_nosotros.html">Habla con nosotros</a></li>
<li><a href="calendario_actividades.html">Calendario de actividades</a></li>
<li><a href="equipo_humano.html">Equipo humano</a></li>
<li><a href="incripciones_donaciones.html">Inscripciones/Donaciones</a></li>
<li><a href="tienda_solidaria.html">Tienda solidaria</a></li>
<li><a href="encuentranos.html">Plano de como encontrarnos</a></li>
</ul>
</li>
<li>
<a href="#">Programas</a>
<ul>
<li><a href="escuela_deporta.html">Escuela del deporte</a></li>
<li><a href="aprendizajes_instrumentales.html">Aprendizajes instrumentales</a></li>
<li><a href="medios_audiovisuales.html">Medios audiovisuales</a></li>
<li><a href="taller_fallero.html">Taller fallero</a></li>
<li><a href="epe.html">E.P.E</a></li>
<li><a href="taller_manualidades.html">Taller de manualidades</a></li>
<li><a href="concurso_voluntariado.html">Concursos de voluntariado</a></li>
<li><a href="fisioterapia.html">Fisioterapia</a></li>
</ul>
</li>
<li>
<a href="#">Actividades culturales y sociales</a>
<ul>
<li><a href="vuelta_silla_ruedas.html">Vuelta en silla de ruedas</a></li>
<li><a href="viajes_organizados.html">Viajes organizados</a></li>
<li><a href="dia_del_deporte.html">Día del deporte</a></li>
<li><a href="crema_falla.html">Cremà de la falla</a></li>
<li><a href="semana_cultural.html">Semana cultural</a></li>
<li><a href="revista_revaldis.html">Revista Revaldis</a></li>
<li><a href="salidas_cine.html">Salidas al cine</a></li>
</ul>
</li>
<li>
<a href="#">Proyectos de futuro</a>
<ul>
<li><a href="escuela_permanente_adaptada.html">Escuela permanente adaptada</a></li>
<li><a href="escuela_padres.html">Escuela de padres</a></li>
<li><a href="cfo.html">Centro de formación ocupacional</a></li>
<li><a href="residencia_tutelada.html">Residencia tutelada</a></li>
<li><a href="pdap21.html">PDAP21</a></li>
<li><a href="cursos_informatica.html">Cursos de informática</a></li>
<li><a href="centro_especial_empleo.html">Centro especial de empleo</a></li>
<li><a href="centro_especial_ensenyanza">Centro especial de enseñanza</a></li>
</ul>
</li>
</ul>

Y el siguiente en CSS

CSS

Como el archivo me lo he descargado y lo he modificado a como quiero hacer la web, quería preguntar como puedo colocar con CSS el menú en un lugar concreto de la web. Esque no encuentro nada y prueba y prueba pero no me sale nada.

Alguien que sepa me puede ayudar?

Gracias de antemano =)

NeB1 #2 Mar '10

prueba a meter todo ese código HTML dentro de:

</div>

y ese div lo pones donde quieras, como por ejemplo:

#menuContainer{
    position:absolute;
    top:500px;
    left:200px;
}

Master_0n3 #3 Mar '10

A ello voy

edit: Perfecto, gracias =)

eXtreM3 #4 Mar '10

No recomiendo NADA usar position:absolute para los div. Esto queda perfecto para una única resolución, cuando cambies la resolución... ese div se va donde le da la gana rompiéndote por completo el diseño de la web.

Utiliza siempre position:relative, así la encuadras con respecto a algo (generalmente un div contenedor)

#5 ya ya, pero como ha puesto que le ha servido... igual no sabe la diferencia y luego al probar la web en otra resolución no sabe por qué está fallando, solo eso

NeB1 #5 Mar '10

#4 era un ejemplo macho xD para que viera que cambiaba de posición. Yo tampoco lo suelo recomendar, excepto para lo que sirve.

Master_0n3 #6 Mar '10

#4, gracias por el aviso. Realmente no lo sabía, asique usaré el relative =).

Gracias a todos por los aportes

bLaKnI #7 Mar '10 Inocente

De hecho, mejor no usar RELATIVE ni ABSOLUTE.
Usa STATIC, que es el por defecto. Es decir, no des propiedades "nunca" en CSS de POSITION.
Juega solo con las flotabilidades.
Olvida que existen el TOP y el LEFT, y maquetarás para TODOS Y CADA UNO de los exploradores del mundo.
Nunca tendrás problemas.

Mas trabajo? Solo mientras no estés acostumbrado.
Pero si estructuras unicamente con CSS1, insisto, nunca tendrás problemas.

Así que el "position", ni lo toques.
Crea el div del width que quieras o el height que quieras o ambos, y posicionalo correctamente en el codigo y en caso de necesitarlo, hazlo flotar como se debe.
Y punto.

eXtreM3 #8 Mar '10

#7 sí y no...

El position:static funciona bien, pero no digas que el relative no sirve y que nos olvidemos del top y el left, por qué?

Estoy acostumbrado a maquetar con capas y las últimas webs las he hecho con TODAS las capas con position:relative... y hasta ahora se ve correctamente todo en todos los navegadores / versiones.

Aún así es más correcto usar margin-top y margin-left para 'hacer flotar' una capa

bLaKnI #9 Mar '10 Inocente

Pero el concepto "capas" realmente en HTML no existe.
Los bloques preceden a otros bloques.

Cuando conceptualizas una capa, es que internamente estas sobreponiendo bloques, para dar ese efecto de bloque sobre bloque.
Para hacerlo, usas el concepto de posicionamiento relativo, y por lo tanto, tienes que jugar con TOPS y LEFTS negativos, no es cierto?

Entiendo que realmente HTML deberia evolucionar a un sistema de capas real, es que ES LA EVOLUCION MINIMA NECESARIA, pero actualmente no es así, y a pesar de que controlando bien los indices de posicionamiento no hayan problemas, sobreponer divisores (encapar), es una mala praxia, ya que no es la normal para la que esta concebido el "lenguaje" en si.

Lo suyo es jugar con los backgrounds para conseguir el efecto "capa".
El curre esta en el diseño previamente. Ahí matas un 75%. El resto, el 25%, es maquetado.
Por lo general, hay que "simular" el efecto de capas, con un buen diseño.
No debe fabricarse este efecto en tiempo de maquetado, es decir, no hay que fabricar un div con un fondo, y otro div con el trozo de fondo que se sobrepone al div primario, para conseguir el tema capas y por lo tanto, el diseño final en si... Eso hay que hacerlo en el diseño, provocando que parezca que hay capas.

Pero bueno, todos hemos "jugado"...
Y si hacemos aplicaciones web interactivas, por supuesto que "todo es válido", ya que una app web, raramente pasa por el W3C... xD

eXtreM3 #10 Mar '10

#9 entiendo lo que quieres decir, perfectamente.

Ya por curiosidad, qué has estudiado / en qué trabajas? el vocabulario que utilizas no es de un cualquiera, se nota que manejas del tema. Saludos!

bLaKnI #11 Mar '10 Inocente

^^ Merci hombre!

He estudiado la Ingenieria Informatica. He hecho algunas especializaciones y actualmente, trabajo en el sector de desarrollo web.
La empresa desarrolla webs, pero lo mas importante, es que realiza CMSs por así decirlo. Y gestores web para concretos.
Y yo soy de los programadores en este sector.
Actualmente tienen un proyecto muy potente que esta calando muy fuerte y que de bien seguro, saldrá como la espuma.

Yo trabajo un poco en todos los proyectos que hay y por lo general, desarrollo algunas cosas que son particularmente virtuosas (de entre muchas otras cosas).

En esta empresa, particularmente trabajan en PHP (y a veces en otros). Pero mi especialización es un poco "todos los lenguajes", xD
Me he especializado en fundamentos de programación por así decirlo.
Y después, "hay por ahí" la posibilidad de hacer un master muy potente del sector de los videojuegos.

Y por otra parte, pues tambien estan las otras cosas que a uno "se le daban bien" en la carrera... xD
Como IA, interfícies interactivas, mundo de procesado de ondas, etc...

La ingenieria informatica superior que estudié, estaba claramente orientada al mundo multimédia y mas actual.
Por si te interesa, estudié en la Pompeu Fabra de Barcelona.

Y bueno, tengo el proyecto final (neurociencia+tecnologias) a medias... xDDDDDD
Pero es que es dificilisimo trabajar y estudiar coñe! ^^'

NeB1 #12 Mar '10

#9 esto de acuerdo contigo, si a base de backgrounds simulas el efecto de capas, y despues simplificas el uso de las mismas al mínimo, consigues ahorrarte un 70% de faena. De hecho, en algunos diseños, no se pueden realizar como la lógica, siguiendo el diseño que buscas, te diría, porque implica superponer divs y hacer cosas raras, y al final tienes que hacer que un div contenga el diseño de lo que vendría a ser un div y parte del otro.

Jejeje, que rallada he dicho en un momento xD

Master_0n3 #13 Mar '10

Bueno, gracias por los aportes, pero a ver cual de los dos me saca de esta nueva duda que tengo:

El menú del que os estaba hablando me da unos pocos problemas, os explico; como habeis podido comprobar tiene 4 categorias. Vale, pues una vez en el HTML de la web, cuando lo abro en el explorador, si abro una categoria, y sin cerrarla abro otra diferente, las imagenes de fondo se me corren un poco hacia la izquierda, alguno, que por lo que he podido leer pilotais un monton sobre el tema, me puede decir el motivo? :S

Gracias =)

B

[Borrado] #14 Mar '10

El menu va dentro de una capa con una imagen de un acordeon no?
Es asi?

Master_0n3 #15 Mar '10

El menú va dentro de un div, que este div esta dentro de un div mas general... aver está asi...

<div id="contenido">
<div id="menuContainer">
<ul id="menu">
Todo lo que lleva el menu y tal...

	</ul>
</div> <!--- final div menuContainer --->

</div>

Y lo que sucede es que cuando abro una de las 4 secciones del menu y sin cerrarla abro otra, la web se corre hacia la izquierda...

Estoy por hacer un video porque creo q no me explico bien xD

B

[Borrado] #16 Mar '10

Hombre el video vendria bien, pero los div como los tienes puesto con posiciones absolutas???
Porqe si son posiciones relativas a la hora de qe se salga el menu de la capa la capa de cambia de lugar o la capa desplaza a las cosas qe tenga a su alrededor.

Master_0n3 #17 Mar '10

Las posiciones las tengo relativas, porque tengo 2 estilos, uno para la web, y otro para el menu en concreto, entonces si pongo las posiciones en absolute, se me descuadra la web un monton, entonces no se que hacer!

Master_0n3 #18 Mar '10

Aquí el video donde se aprecia lo que digo xD

Si hace falta meto el codigo, asique decidmelo

PD:. abreis podido observar q soy novato en el tema del desarrollo web

Master_0n3 #19 Mar '10

Vale, ya me han dicho que es porque aparece la barra de navegacion de la web...

Mira que no darme cuenta antes jejejeje.

En fin, eso no se puede solucionar o algo? xD

Saludos ^^

NeB1 #20 Mar '10

jajajaja xDD se menea porque aparece el scrollbar , te juro, que cuando leí tu post estuve media hora dandole vueltas a ver que narices te podía estar ocurriendo xDDD una posible solución es que siempre esté visible:

body{overflow-y:scroll;}

al inicio de tu CSSq

#19 te me adelantaste >.<

Master_0n3 #21 Mar '10

Si, me adelanté, pero tu me diste la solución =)

Master_0n3 #22 Mar '10

Madre mia, estoy plagado de dudas y problemas xD

Ahí va otro:

Se mas o menos como funciona un sistema de noticias con php y mysql, pero ahora tengo un problema y es que nose como hacer para dividir dentro del codigo php los divs, uno para el titulo, otro para la noticia, etc...

<?php
<div id="noticias">
$query = mysql_query("SELECT * FROM notis ORDER BY fecha DESC;");
while ($row = mysql_fetch_array($query)) {

echo $row['titulo'];

echo $row['contenido'];

echo "Subido el ";
$row_fecha = strtotime($row['fecha']);
echo date("d / m / Y", $row_fecha);

echo "<br />";
echo "<br />";

}
</div>
?>

nose si me explico de nuevo, quiero un div para el titulo, otro para la noticia, etc... para asi en CSS colocarlo cada cual donde lo necesite y darle diferente estilo...

Como lo debo hacer? :S

NeB1 #23 Mar '10

<?php
<div id="noticias">
$query = mysql_query("SELECT * FROM notis ORDER BY fecha DESC;";
while ($row = mysql_fetch_array($query)) {

echo "<div class='titulo'>".$row['titulo']."</div>";

echo "<div class='contenido'>".$row['contenido']."</div>";

echo "Subido el ";
$row_fecha = strtotime($row['fecha']);
echo "<div class='fecha'>".date("d / m / Y", $row_fecha)."</div>";

echo "<br />";
echo "<br />";

}
</div>
?>

por ejemplo?

Master_0n3 #24 Mar '10

Pues sip, imagino que sip xD
Esque ya te digo no entiendo mucho... y conforme intento hacer mas cosas mas fallos me salen.

Ahora por ejemplo, tengo el menu que se despliega, ya lo habeis podido ver en el video, entonces, yo justo al lado quería meter texto... y resulta que vale, hago un div para ese texto y lo cuadro y tal y resulta que cuadro abro una categoria del menú, se me baja todo el texto con el menú. Como debo estructurarlo para que no se lo lleve de paseo? xD

PD:. no se que habria hecho sin vosotros =)

Thanks

NeB1 #25 Mar '10

#24 prueba este tipo de estructura:

<div id="page">
  <div id="header"></div>
  <div id="wrap">
    <div id="menu">
           AQUI EL MENÚ
    </div>

<div id="contenido">
       AQUÍ EL TEXTO
</div>
  </div>
  <div id="footer"></div>
</div>

Y metes esto de css:

#page{width:960px;margin:0 auto;}/*El width, el que tu quieras */
#wrap{display:table; width:960px;} 
#menu{float:left;}#contenido{float:right;}

Es la tipica estructura de web...

Master_0n3 #26 Mar '10

Puff, no lo entiendo muy bien xD, pero lo intentare...

los divs menu y contenido, deben llevar una imagen de fondo concreta no?

Creo que lo tengo algo parecido, mira:

HTML

<body>
<?php

include('conexbbdd.php');

?>

</div>

<div id="contenido">
<div id="menuContainer">
<ul id="menu">
<li>
<a href="#">Principal</a>
<ul>
<li><a href="index.php">- Indice general</a></li>
<li><a href="login.php">- Administración</a></li>
<li><a href="carta_presidenta.html">- Carta de la presidenta</a></li>
<li><a href="index.php">- Galería de imagenes</a></li>
<li><a href="habla_con_nosotros.html">- Habla con nosotros</a></li>
<li><a href="calendario_actividades.html">- Calendario de actividades</a></li>
<li><a href="equipo_humano.html">- Equipo humano</a></li>
<li><a href="incripciones_donaciones.html">- Inscripciones/Donaciones</a></li>
<li><a href="tienda_solidaria.html">- Tienda solidaria</a></li>
<li><a href="encuentranos.html">- Plano de como encontrarnos</a></li>
</ul>
</li>
<li>
<a href="#">Programas</a>
<ul>
<li><a href="escuela_deporta.html">- Escuela del deporte</a></li>
<li><a href="aprendizajes_instrumentales.html">- Aprendizajes instrumentales</a></li>
<li><a href="medios_audiovisuales.html">- Medios audiovisuales</a></li>
<li><a href="taller_fallero.html">- Taller fallero</a></li>
<li><a href="epe.html">- E.P.E</a></li>
<li><a href="taller_manualidades.html">- Taller de manualidades</a></li>
<li><a href="concurso_voluntariado.html">- Concursos de voluntariado</a></li>
<li><a href="fisioterapia.html">- Fisioterapia</a></li>
</ul>
</li>
<li>
<a href="#">Actividades culturales y sociales</a>
<ul>
<li><a href="vuelta_silla_ruedas.html">- Vuelta en silla de ruedas</a></li>
<li><a href="viajes_organizados.html">- Viajes organizados</a></li>
<li><a href="dia_del_deporte.html">- Día del deporte</a></li>
<li><a href="crema_falla.html">- Cremà de la falla</a></li>
<li><a href="semana_cultural.html">- Semana cultural</a></li>
<li><a href="revista_revaldis.html">- Revista Revaldis</a></li>
<li><a href="salidas_cine.html">- Salidas al cine</a></li>
</ul>
</li>
<li>
<a href="#">Proyectos de futuro</a>
<ul>
<li><a href="escuela_permanente_adaptada.html">- Escuela permanente adaptada</a></li>
<li><a href="escuela_padres.html">- Escuela de padres</a></li>
<li><a href="cfo.html">- Centro de formación ocupacional</a></li>
<li><a href="residencia_tutelada.html">- Residencia tutelada</a></li>
<li><a href="pdap21.html">- PDAP21</a></li>
<li><a href="cursos_informatica.html">- Cursos de informática</a></li>
<li><a href="centro_especial_empleo.html">- Centro especial de empleo</a></li>
<li><a href="centro_especial_ensenyanza">- Centro especial de enseñanza</a></li>
</ul>
</li>
</ul>
</div>

<div id="noticias">
<?php
$query = mysql_query("SELECT * FROM notis ORDER BY fecha DESC;");
while ($row = mysql_fetch_array($query)) {

echo "<div id='titulo'>".$row['titulo']."</div>";

echo "<div id='contenido'>".$row['contenido']."</div>";

echo "Subido el ";
$row_fecha = strtotime($row['fecha']);
echo "<div id='fecha'>".date("d / m / Y", $row_fecha)."</div>";

echo "<br />";
echo "<br />";

}
?>
</div>





</div> <!--- final div noticia --->

</div>

</div>

</body>
</html>

Me explico, el div "encabezado" no lleva nada dentro, solo le meto en el CSS la imagen de fondo, lo centro y tal...

el div "contenido", tiene dentro, el div "menuContainer" y el "noticias"

Cabe decir, que en CSS, el div contenido tiene de fondo una imagen entera, osea, de lado a lado de la web... nose si esto tiene algo q ver con que se me desplace hacia abajo y demas

y el div "pie", pues no tiene nada dentro, solo la imagen en CSS, centrado y tal

PD:. me voy al sobre, mañana seguiré, gracias por todo

bLaKnI #27 Mar '10 Inocente

Con todo el cariño te lo digo ¿eh?

Pero, ¿supongo que no cobrarás un duro por "eso" que estas haciendo, verdad?

Master_0n3 #28 Mar '10

Yo tambien te lo digo con todo el cariño eh?

Tu acaso naciste sabiendo o que?

edit: Y bueno, te contesto... No, no voy a cobrar nada, me ofrecí voluntario ya que tenia una pequeña noción... y así me obligaba un poco a aprender, perdone usted.

yEnS #29 Mar '10

Sólo un comentario... la combinación del relative para posicionar absolutes en containers suele ser muy potente y útil.

bLaKnI #30 Mar '10 Inocente

No te enfades! Que no voy para nada a malas!
Perdona si ha sonado como no debe! :_(
Lo que pasa que los que somos bastante asíduos en este foro, ya hemos visto infinitas veces "LISTOS", que vienen aquí pidiendo ayuda, luego un poco mas, luego otro poco mas y finalmente te das cuenta de que entre todo le estamos haciendo el trabajo.
No pasaria nada si no fuera porque mas de una vez, se ha descubierto que cobran después.

Y el problema mas grande de todos, no es el cobrar!
Que cobren... pues mira, listos ellos.
El problema de verdad, es la posición que estan ocupando. ESTE es el problema y lo que personalmente, me calienta un huevo. Que seguiran cobrando, mientras no tienen puta idea de lo que hacen.
Y eso pasa en todos los sitios, porsupuesto... pero cuando se trata de mi sector, ahí intervengo.

Pero insisto, perdoname que no iba a malas!

Menu en acordeon + CSS

Usuarios habituales

Tags